Vue 记账凭证模块组件

基于vue的记账凭证页面效果：

支持的快捷操作有：

页面代码如下：

<template><div class="charge-container" id="chargeContainer"><div class="charge"><!--<h1 class="charge-title">记账凭证</h1>--><div class="charge-header"><div>凭证字<el-select style="width: 80px;" v-model="voucher.word"><el-optionv-for="item in wordList":key="item.name":label="item.name":value="item.name"></el-option></el-select></div><div>凭证号<el-input type="number" style="width: 80px;" min="1" v-model="voucher.no"></el-input></div><div>日期<el-date-picker type="date" style="width: 145px;" v-model="voucher.date"></el-date-picker></div><div style="font-size: 24px;">记账凭证</div><div style="float: right;position: relative;">附单据<el-input type="number" style="width: 80px;" min="0" v-model="voucher.bill"></el-input>张<i class="el-icon-info"></i><div class="tip-box"><table class="tip-box-table" border="1"><tr style="background-color: #f5f4f4;"><td>操作</td><td>快捷键</td></tr><tr><td>选择列表</td><td>F7</td></tr><tr><td>自动平衡</td><td>=</td></tr><tr><td>新增</td><td>F4</td></tr><tr><td>保存</td><td>Ctrl+S</td></tr><tr><td>保存并审核</td><td>F10</td></tr><tr><td>保存并新增</td><td>F11</td></tr><tr><td>复制上一行</td><td>//</td></tr><tr><td>复制上一行摘要</td><td>..</td></tr><tr><td>金额自动切换借贷方</td><td>空格键</td></tr><tr><td>单据头与分录快速切换</td><td>Tab</td></tr></table></div></div></div><table class="charge-table" border="1"><tr><td width="6%">操作</td><td :width="isAuxiliary?'14%':'22%'">摘要</td><td :width="isAuxiliary?'15%':'22%'">会计科目</td><td width="14%" v-if="isAuxiliary">辅助核算</td><td width="50%"><table style="height: 50px;"><tr style="border-bottom: 1px solid #bab9b9;"><td width="50%" style="border-right: 1px solid #bab9b9;">借方金额</td><td width="50%">贷方金额</td></tr><tr><td style="border-right: 1px solid #bab9b9;"><table class="debtor-lender-table" style="height: 100%;"><tr><td>亿</td><td>千</td><td>百</td><td>十</td><td>万</td><td>千</td><td>百</td><td>十</td><td>元</td><td>角</td><td>分</td></tr></table></td><td><table class="debtor-lender-table" style="height: 100%;"><tr><td>亿</td><td>千</td><td>百</td><td>十</td><td>万</td><td>千</td><td>百</td><td>十</td><td>元</td><td>角</td><td>分</td></tr></table></td></tr></table></td></tr><tr v-for="(item,index) in list"><td><div @click="addList" class="charge-table-icon"><i class="el-icon-plus" style="color: orangered;"></i></div><div @click="removeList(index)" class="charge-table-icon"><i class="el-icon-close" style="color: #4a90e2;"></i></div></td><td><div @click="showInput(index,'main')" v-if="!item.isShowMainInput" class="main-subject"><!--{{item.main}}--><textarea v-model="item.main"></textarea></div><div class="main-subject" v-if="item.isShowMainInput"><!--<input type="text" v-model="item.main" @blur="hideInput(index,'main')" v-focus @keyup="keyupEvents(index,$event,1)">--><textarea v-model="item.main" @blur="hideInput(index,'main')" v-focus@keyup="keyupEvents(index,$event,1)"></textarea><div class="dropdown-menu suggest-list special-elements" style="top: 60px;"><ul class="item-list"><li v-for="main in mainList" v-if="main.name.indexOf(item.main.trim())!=-1":class="main.name==item.main?'hover':''"@click="voluationInput(index,'main',main.name)">{{ main.name }}</li></ul></div></div><i v-if="item.isShowMainInput" class="el-icon-more special-elements"@click="selectionList(index,'main')"></i></td><td><div @click="showInput(index,'subject')" v-if="!item.isShowSubjectInput" class="main-subject"><!--{{item.subject}}--><textarea v-model="item.subject.name"></textarea></div><div class="main-subject" v-if="item.isShowSubjectInput"><!--<input type="text" v-model="item.subject" @blur="hideInput(index,'subject')" v-focus @keyup="keyupEvents(index,$event,2)">--><textarea v-model="item.subject.name" @blur="hideInput(index,'subject')" v-focus@keyup="keyupEvents(index,$event,2)"></textarea><div class="dropdown-menu suggest-list special-elements" style="top: 60px;"><ul class="item-list"><li v-for="subject in subjectList" v-if="subject.name.indexOf(item.subject.name.trim())!=-1":class="subject.name==item.subject.name?'hover':''"@click="voluationInput(index,'subject',subject)">{{ subject.name }}</li></ul></div></div><i v-if="item.isShowSubjectInput" class="el-icon-more special-elements"@click="selectionList(index,'subject')"></i></td><td v-if="isAuxiliary" :disabled="!item.isAuxiliary" :class="item.isAuxiliary?'':'td-auxiliary-dis'"><div class="auxiliary-accounting" v-if="item.isAuxiliary" @click="selectionList(index,'auxiliary')"><div v-if="item.auxiliary && item.auxiliary!=''" class="auxiliary-single"><span>{{ item.auxiliary }}</span><i class="el-icon-close" @click.stop="clearAuxiliary(index,$event)"></i></div></div></td><td><table><tr><td width="50%" style="border-right: 1px solid #bab9b9;"><table class="debtor-tbale debtor-lender-table"><tr @click="showInput(index,'debtor')" v-if="!item.isShowDebtorInput":class="item.debtor*1<0?'tr-negative':''"><td v-for="debtor in item.debtorList">{{ debtor }}</td></tr><tr v-if="item.isShowDebtorInput"><input @blur="hideInput(index,'debtor')" @keyup="debtorInputKeyUp(index,$event,3)"v-model="item.debtor" maxlength="12"v-focusonkeypress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false"></tr></table></td><td width="50%"><table class="lender-tbale debtor-lender-table"><tr v-if="!item.isShowLenderInput" @click="showInput(index,'lender')":class="item.lender*1<0?'tr-negative':''"><td v-for="lender in item.lenderList">{{ lender }}</td></tr><tr v-if="item.isShowLenderInput"><input @blur="hideInput(index,'lender')" @keyup="lenderInputKeyUp(index,$event,4)"v-model="item.lender" maxlength="11"v-focusonkeypress="if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;"></tr></table></td></tr></table></td></tr><tr><td :colspan="isAuxiliary?4:3" style="text-align: left;padding-left: 10px;">合计：</td><td><table><tr><td width="50%" style="border-right: 1px solid #bab9b9;"><table class="debtor-tbale debtor-lender-table"><tr><td v-for="debtor in debtorTotalList">{{ debtor }}</td></tr></table></td><td width="50%"><table class="lender-tbale debtor-lender-table"><tr><td v-for="lender in lenderTotalList">{{ lender }}</td></tr></table></td></tr></table></td></tr></table><div style="height: 50px;line-height: 50px;">制单人：</div><div style="text-align: right;" v-show="saveVisible"><el-button @click="preservation(1)">暂存</el-button><el-button type="primary" @click="preservation(2)">保存</el-button></div></div><!--<el-dialog title="摘要列表" width="30%" :visible.sync="dialogMainVisible"><main-selector @closeMainDialog="closeMainDialog" ref="mainSelector"></main-selector><span slot="footer" class="dialog-footer"><el-button @click="closeMainDialog">取消</el-button><el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="edit">确认</el-button></span></el-dialog><el-dialog title="会计科目" width="30%" :visible.sync="dialogSubjectVisible"><subject-selector @closeSubjectDialog="closeSubjectDialog" ref="subjectSelector"></subject-selector><span slot="footer" class="dialog-footer"><el-button @click="closeSubjectDialog">取消</el-button><el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="edit">确认</el-button></span></el-dialog><el-dialog title="请选择" width="30%" :visible.sync="dialogAuxiliaryVisible"><auxiliary-selector @closeAuxiliaryDialog="closeAuxiliaryDialog" ref="auxiliarySelector"></auxiliary-selector><span slot="footer" class="dialog-footer"><el-button @click="closeAuxiliaryDialog">取消</el-button><el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="edit">确认</el-button></span></el-dialog>--></div>
</template><script>
import Vue from 'vue';
import {addObj,getObj,putObj,getWordList,getMainList,getSubjectList
} from '@/api';Vue.directive('focus', {// 当绑定元素插入到 DOM 中。inserted: function (el) {// 聚焦元素el.focus();}
});export default {name: "voucherForm",props: ['id'],// components: {//   'main-selector': () => import('./components/mainSelector'),//   'subject-selector': () => import('./components/subjectSelector'),//   'auxiliary-selector': () => import('./components/auxiliarySelector'),// },data() {return {voucher: {word: '记', no: 1, date: new Date(), bill: 0},list: [{main: '',isShowMainInput: false,subject: {number: '',name: '',detailJson: ''},isShowSubjectInput: false,debtor: '',debtorList: ['', '', '', '', '', '', '', '', 0, 0, 0],isShowDebtorInput: false,lender: '',lenderList: ['', '', '', '', '', '', '', '', 0, 0, 0],isShowLenderInput: false,isAuxiliary: false,auxiliary: ''},{main: '',isShowMainInput: false,subject: {number: '',name: '',detailJson: ''},isShowSubjectInput: false,debtor: '',debtorList: ['', '', '', '', '', '', '', '', 0, 0, 0],isShowDebtorInput: false,lender: '',lenderList: ['', '', '', '', '', '', '', '', 0, 0, 0],isShowLenderInput: false,isAuxiliary: false,auxiliary: ''},{main: '',isShowMainInput: false,subject: {number: '',name: '',detailJson: ''},isShowSubjectInput: false,debtor: '',debtorList: ['', '', '', '', '', '', '', '', 0, 0, 0],isShowDebtorInput: false,lender: '',lenderList: ['', '', '', '', '', '', '', '', 0, 0, 0],isShowLenderInput: false,isAuxiliary: false,auxiliary: ''},{main: '',isShowMainInput: false,subject: {number: '',name: '',detailJson: ''},isShowSubjectInput: false,debtor: '',debtorList: ['', '', '', '', '', '', '', '', 0, 0, 0],isShowDebtorInput: false,lender: '',lenderList: ['', '', '', '', '', '', '', '', 0, 0, 0],isShowLenderInput: false,isAuxiliary: false,auxiliary: ''}],debtorTotal: 0,debtorTotalList: ['', '', '', '', '', '', '', '', 0, 0, 0],lenderTotal: 0,lenderTotalList: ['', '', '', '', '', '', '', '', 0, 0, 0],wordList: [],mainList: [],subjectList: [],dialogMainVisible: false,dialogSubjectVisible: false,dialogAuxiliaryVisible: false,dialogMainIndex: 0,dialogSubjectIndex: 0,dialogAuxiliaryIndex: 0,isAuxiliary: false,saveVisible: true,billNo: '',}},mounted() {document.addEventListener('keydown', this.handleEvent);getWordList().then(response => {this.wordList = response.data.records;});getMainList().then(response => {this.mainList = response.data.records;});getSubjectList().then(response => {this.subjectList = response.data.records;});this.init();},updated() {//给特定区域添加ID   绑定onmousedown 事件var chargeContainer = document.getElementById('chargeContainer');var outDiv = chargeContainer.getElementsByClassName('special-elements');for (var i = 0; i < outDiv.length; i++) {outDiv[i].onmousedown = function (e) {//现代浏览器阻止默认事件if (e && e.preventDefault)e.preventDefault();//IE阻止默认事件elsewindow.event.returnValue = false;return false;}}},methods: {judgeIsAuxiliary() {var flag = false;for (var i in this.list) {var detailJson = this.list[i].subject.detailJson;if (detailJson !== '' && detailJson !== undefined) {flag = true;this.list[i].isAuxiliary = true;} else {this.list[i].isAuxiliary = false;this.list[i].auxiliary = '';}}this.isAuxiliary = flag;},openMainDialog() {this.dialogMainVisible = true},closeMainDialog(main) {if (!main.isTrusted) {this.list[this.dialogMainIndex].main = main;}this.dialogMainVisible = false},openSubjectDialog() {this.dialogSubjectVisible = true},closeSubjectDialog(sub) {if (!sub.isTrusted) {this.list[this.dialogSubjectIndex].subject = sub;}this.dialogSubjectVisible = false;this.judgeIsAuxiliary();},openAuxiliaryDialog() {this.dialogAuxiliaryVisible = true},closeAuxiliaryDialog(aux) {if (!aux.isTrusted) {this.list[this.dialogAuxiliaryIndex].auxiliary = aux;}this.dialogAuxiliaryVisible = false;},clearAuxiliary(index, e) {this.list[index].auxiliary = '';},handleEvent(event) {//console.log(event);if (window.location.hash == '#/general_ledger/voucher_entry') {if (event.keyCode === 83 && event.ctrlKey) {//console.log('拦截到83+ctrl');this.preservation(2);event.preventDefault();event.returnValue = false;return false;} else if (event.keyCode === 115) {//console.log('拦截到115');//F4this.addList();event.preventDefault();event.returnValue = false;return false;} else if (event.keyCode === 121) {//console.log('拦截到121');//F10event.preventDefault();event.returnValue = false;return false;} else if (event.keyCode === 122) {//console.log('拦截到122');//F11event.preventDefault();event.returnValue = false;return false;}} else {//需要销毁事件 防止全局生效//document.removeEventListener('keydown', this.handleEvent);}},showInput(index, type) {for (var i in this.list) {this.list[i].isShowDebtorInput = false;this.list[i].isShowLenderInput = false;this.list[i].isShowMainInput = false;this.list[i].isShowSubjectInput = false;if (i == index && type == 'debtor') {this.list[index].isShowDebtorInput = true;} else if (i == index && type == 'lender') {this.list[index].isShowLenderInput = true;} else if (i == index && type == 'main') {this.list[index].isShowMainInput = true;} else if (i == index && type == 'subject') {this.list[index].isShowSubjectInput = true;}}},hideInput(index, type) {if (type == 'debtor') {//判断是否有小数点var inx = this.list[index].debtor.indexOf('.');if (inx != -1 && this.list[index].debtor.length - 1 != inx) {this.list[index].debtor = (this.list[index].debtor * 1).toFixed(4);}this.list[index].isShowDebtorInput = false;} else if (type == 'lender') {//判断是否有小数点var inx = this.list[index].lender.indexOf('.');if (inx != -1 && this.list[index].lender.length - 1 != inx) {this.list[index].lender = (this.list[index].lender * 1).toFixed(4);}this.list[index].isShowLenderInput = false;} else if (type == 'main') {this.list[index].isShowMainInput = false;} else if (type == 'subject') {this.list[index].isShowSubjectInput = false;}},voluationInput(index, type, val) {if (type == 'main') {this.list[index].main = val;this.list[index].isShowMainInput = false;} else if (type == 'subject') {this.list[index].subject.number = val.number;this.list[index].subject.name = val.name;this.list[index].subject.detailJson = val.detailJson;this.list[index].isShowSubjectInput = false;}this.judgeIsAuxiliary();},selectionList(index, type) {//console.log('弹出选择列表');if (type == 'main') {this.dialogMainIndex = index;this.openMainDialog();} else if (type == 'subject') {this.dialogSubjectIndex = index;this.openSubjectDialog();} else if (type == 'auxiliary') {this.dialogAuxiliaryIndex = index;this.openAuxiliaryDialog();}},keyupEvents(index, e, remaind) {if (e.keyCode == 37) {//console.log('拦截到37');//左this.keyboardEvents('left', index * 4 + remaind);return;} else if (e.keyCode == 38) {//console.log('拦截到38');//上this.keyboardEvents('up', index * 4 + remaind);return;} else if (e.keyCode == 39) {//console.log('拦截到39');//右this.keyboardEvents('right', index * 4 + remaind);return;} else if (e.keyCode == 40) {//console.log('拦截到40');//下this.keyboardEvents('down', index * 4 + remaind);return;} else if (e.keyCode == 13) {//console.log('拦截到13');//enter键this.keyboardEvents('enter', index * 4 + remaind);return;} else if (e.keyCode == 118) {//console.log('拦截到118');//F7if (remaind == 1) {this.selectionList(index, 'main');} else if (remaind == 2) {this.selectionList(index, 'subject');}return;}var main = this.list[index].main;var subject = this.list[index].subject.name;if (index - 1 >= 0) {if (main.indexOf('//') != -1 || subject.indexOf('//') != -1) {this.list[index].main = this.list[index - 1].main;this.list[index].subject = this.list[index - 1].subject;this.list[index].debtor = this.list[index - 1].debtor;this.list[index].debtorList = this.list[index - 1].debtorList;this.list[index].lender = this.list[index - 1].lender;this.list[index].lenderList = this.list[index - 1].lenderList;this.list[index].auxiliary = this.list[index - 1].auxiliary;this.calcDebtorTotal();this.calcLenderTotal();}if (main.indexOf('..') != -1) {this.list[index].main = this.list[index - 1].main;}}//判断是否显示辅助核算this.judgeIsAuxiliary();},keyboardEvents(type, number) {var total = this.list.length * 4;if (type == 'enter') {number++;} else if (type == 'left' && number - 1 > 0) {number--;} else if (type == 'right' && number + 1 <= total) {number++;} else if (type == 'up' && number - 4 > 0) {number = number - 4;} else if (type == 'down' && number + 4 <= total) {number = number + 4;}if (type == 'enter' && number > total) {this.addList();}var index = parseInt(number / 4);var remaind = number % 4;if (remaind == 1) {this.showInput(index, 'main');} else if (remaind == 2) {this.showInput(index, 'subject');} else if (remaind == 3) {this.showInput(index, 'debtor');} else if (remaind == 0) {this.showInput(index - 1, 'lender');}},debtorInputKeyUp(index, e, remaind) {//console.log(e);//this.list[index].debtor=this.list[index].debtor.replace(/\D/g,'');if (e.keyCode === 187) {this.calcDebtorTotal(index);this.calcLenderTotal(index);var cha = this.lenderTotal - this.debtorTotal;if (cha == 0) {cha = '';}this.list[index].debtor = cha + '';} else if (e.keyCode === 32) {this.list[index].isShowLenderInput = true;this.list[index].isShowDebtorInput = false;this.list[index].lender = this.list[index].debtor.trim();this.list[index].debtor = '';this.list[index].debtorList = ['', '', '', '', '', '', '', '', 0, 0, 0];var lenderList = ['', '', '', '', '', '', '', '', 0, 0, 0];this.list[index].lenderList = this.collatingData(this.list[index].lender, lenderList);this.calcDebtorTotal();this.calcLenderTotal();return;} else if ((e.keyCode >= 37 && e.keyCode <= 40) || e.keyCode == 13) {this.keyupEvents(index, e, remaind);return;}this.list[index].lender = '';this.list[index].lenderList = ['', '', '', '', '', '', '', '', 0, 0, 0];var debtor = this.list[index].debtor;var debtorList = ['', '', '', '', '', '', '', '', 0, 0, 0];this.list[index].debtorList = this.collatingData(debtor, debtorList);this.calcDebtorTotal();this.calcLenderTotal();},calcDebtorTotal(index) {var debtorTotal = 0;for (var i in this.list) {if (this.list[i].debtor != null && this.list[i].debtor != '') {if (!(index && index == i)) {debtorTotal += (this.list[i].debtor) * 1;}}}this.debtorTotal = debtorTotal;debtorTotal = debtorTotal + '';var debtorTotalList = ['', '', '', '', '', '', '', '', 0, 0, 0];this.debtorTotalList = this.collatingData(debtorTotal, debtorTotalList);},lenderInputKeyUp(index, e, remaind) {//this.list[index].lender=this.list[index].lender.replace(/\D/g,'');if (e.keyCode === 187) {this.calcDebtorTotal(index);this.calcLenderTotal(index);var cha = this.debtorTotal - this.lenderTotal;if (cha == 0) {cha = '';}this.list[index].lender = cha + '';} else if (e.keyCode === 32) {this.list[index].isShowDebtorInput = true;this.list[index].isShowLenderInput = false;this.list[index].debtor = this.list[index].lender.trim();this.list[index].lender = '';this.list[index].lenderList = ['', '', '', '', '', '', '', '', 0, 0, 0];var debtorList = ['', '', '', '', '', '', '', '', 0, 0, 0];this.list[index].debtorList = this.collatingData(this.list[index].debtor, debtorList);this.calcLenderTotal();this.calcDebtorTotal();return;} else if ((e.keyCode >= 37 && e.keyCode <= 40) || e.keyCode == 13) {this.keyupEvents(index, e, remaind);return;}this.list[index].debtor = '';this.list[index].debtorList = ['', '', '', '', '', '', '', '', 0, 0, 0];var lender = this.list[index].lender;var lenderList = ['', '', '', '', '', '', '', '', 0, 0, 0];this.list[index].lenderList = this.collatingData(lender, lenderList);this.calcLenderTotal();this.calcDebtorTotal();},calcLenderTotal(index) {var lenderTotal = 0;for (var i in this.list) {if (this.list[i].lender != null && this.list[i].lender != '') {if (!(index && index == i)) {lenderTotal += (this.list[i].lender) * 1;}}}this.lenderTotal = lenderTotal;lenderTotal = lenderTotal + '';var lenderTotalList = ['', '', '', '', '', '', '', '', 0, 0, 0];this.lenderTotalList = this.collatingData(lenderTotal, lenderTotalList);},addList() {var obj = {main: '',isShowMainInput: false,subject: {number: '',name: '',detailJson: ''},isShowSubjectInput: false,debtor: '',debtorList: ['', '', '', '', '', '', '', '', 0, 0, 0],isShowDebtorInput: false,lender: '',lenderList: ['', '', '', '', '', '', '', '', 0, 0, 0],isShowLenderInput: false,isAuxiliary: false,auxiliary: ''};this.list.push(obj);},removeList(index) {if (this.list.length <= 2) {this.$message.error('至少保存两行');return;}this.list.splice(index, 1);this.calcDebtorTotal();this.calcLenderTotal();},collatingData(debtor, debtorList) {debtor = debtor.replace(/-/g, '');//判断是否有小数点if (debtor.indexOf('.') != -1) {debtor = (debtor * 1).toFixed(4);debtor = (debtor + '').replace(/\./g, '');} else {debtor = debtor + '00';}if (debtor.length <= 11) {var cha = debtorList.length - debtor.length;for (var i = 0; i < debtor.length; i++) {debtorList[i + cha] = debtor.charAt(i);}} else {for (var i = 0; i < debtor.length; i++) {debtorList[i] = debtor.charAt(i);}}return debtorList;},checkListData() {if ((this.debtorTotal != 0 || this.lenderTotal != 0) && this.lenderTotal * 1 != this.debtorTotal * 1) {this.$message.error('凭证借贷不平衡，请检查');return;}var mainFlag = true;for (var i in this.list) {if (this.list[i].main != null && this.list[i].main != '') {mainFlag = false;}if (this.list[i].subject.name == null || this.list[i].subject.name == '') {this.$message.error('第' + (i * 1 + 1) + '行中的会计科目为必填项，请填写了再提交');return;}if ((this.list[i].debtor == null || this.list[i].debtor == '') && (this.list[i].lender == null || this.list[i].lender == '')) {this.$message.error('第' + (i * 1 + 1) + '行中借方金额、贷方金额必须填一个，请填写了再提交');return;}}if (mainFlag) {this.$message.error('必须填写一个摘要，请填写了再提交');return;}var list = [];for (var a = 0; a < this.list.length; a++) {var obj = {explanation: this.list[a].main,accountNumber: this.list[a].subject.number,accountName: this.list[a].subject.name,auxiliaryType: this.list[a].subject.detailJson,itemObjectKeys: this.list[a].auxiliary,basicDebitAmount: this.list[a].debtor,basicCreditAmount: this.list[a].lender};list.push(obj);}var reqObj = {id: this.id,billNo: this.billNo,billStatus: 2,voucherType: this.voucher.word,voucherNumber: this.voucher.no,year: this.formatDate("yyyy-MM-dd hh:mm:ss", this.voucher.date),creditTotal: this.lenderTotal,debitTotal: this.debtorTotal,attachments: this.voucher.bill,list: list};return reqObj;},formatDate(fmt, date) {if (typeof date === 'string') {date = new Date(date);}var o = {"M+": date.getMonth() + 1,                 //月份"d+": date.getDate(),                    //日"h+": date.getHours(),                   //小时"m+": date.getMinutes(),                 //分"s+": date.getSeconds(),                 //秒"q+": Math.floor((date.getMonth() + 3) / 3), //季度"S": date.getMilliseconds()             //毫秒};if (/(y+)/.test(fmt))fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));for (var k in o)if (new RegExp("(" + k + ")").test(fmt))fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));return fmt;},preservation(status) {var reqObj = this.checkListData();//console.log(reqObj);if (reqObj) {addObj(reqObj).then(response => {if (response.code == '2000') {this.$notify({title: '成功',message: '创建成功',type: 'success',duration: 2000});this.init();} else {this.$notify({title: '失败',message: response.msg,type: 'warning',duration: 2000})}});}},onSubmit() {var reqObj = this.checkListData();//console.log(reqObj);if (reqObj) {putObj(this.id, reqObj).then(response => {if (response.code == '2000') {this.$notify({title: '成功',message: '修改成功',type: 'success',duration: 2000});this.$emit('submitSuccess', response);} else {this.$notify({title: '失败',message: response.msg,type: 'warning',duration: 2000})}});}},init() {if (this.id !== '' && this.id !== undefined) {getObj(this.id).then(response => {const data = response.data;this.voucher = {word: data.voucherType, no: data.voucherNumber, date: data.year, bill: data.attachments};this.list = [];var isAuxiliary = false;for (var i = 0; i < data.list.length; i++) {var debtor = data.list[i].basicDebitAmount == 0 ? '' : data.list[i].basicDebitAmount + '';var debtorList = debtor == '' ? ['', '', '', '', '', '', '', '', 0, 0, 0] : this.collatingData(debtor, ['', '', '', '', '', '', '', '', 0, 0, 0]);var lender = data.list[i].basicCreditAmount == 0 ? '' : data.list[i].basicCreditAmount + '';var lenderList = lender == '' ? ['', '', '', '', '', '', '', '', 0, 0, 0] : this.collatingData(lender, ['', '', '', '', '', '', '', '', 0, 0, 0]);if (data.list[i].itemObjectKeys != null && data.list[i].itemObjectKeys != '') {isAuxiliary = true;}var obj = {main: data.list[i].explanation,isShowMainInput: false,subject: {number: data.list[i].accountNumber,name: data.list[i].accountName,detailJson: data.list[i].auxiliaryType},isShowSubjectInput: false,debtor: debtor,debtorList: debtorList,isShowDebtorInput: false,lender: lender,lenderList: lenderList,isShowLenderInput: false,isAuxiliary: data.list[i].itemObjectKeys == '' ? false : true,auxiliary: data.list[i].itemObjectKeys};this.list.push(obj);}this.debtorTotal = data.debitTotal + '';this.debtorTotalList = this.collatingData(this.debtorTotal, ['', '', '', '', '', '', '', '', 0, 0, 0]);this.lenderTotal = data.creditTotal + '';this.lenderTotalList = this.collatingData(this.lenderTotal, ['', '', '', '', '', '', '', '', 0, 0, 0]);this.dialogMainVisible = false;this.dialogSubjectVisible = false;this.dialogAuxiliaryVisible = false;this.saveVisible = false;this.dialogMainIndex = 0;this.dialogSubjectIndex = 0;this.dialogAuxiliaryIndex = 0;this.isAuxiliary = isAuxiliary;this.billNo = data.billNo;});} else {this.voucher = {word: '记', no: 1, date: new Date(), bill: 0};this.list = [{main: '',isShowMainInput: false,subject: {number: '',name: '',detailJson: ''},isShowSubjectInput: false,debtor: '',debtorList: ['', '', '', '', '', '', '', '', 0, 0, 0],isShowDebtorInput: false,lender: '',lenderList: ['', '', '', '', '', '', '', '', 0, 0, 0],isShowLenderInput: false,isAuxiliary: false,auxiliary: ''},{main: '',isShowMainInput: false,subject: {number: '',name: '',detailJson: ''},isShowSubjectInput: false,debtor: '',debtorList: ['', '', '', '', '', '', '', '', 0, 0, 0],isShowDebtorInput: false,lender: '',lenderList: ['', '', '', '', '', '', '', '', 0, 0, 0],isShowLenderInput: false,isAuxiliary: false,auxiliary: ''},{main: '',isShowMainInput: false,subject: {number: '',name: '',detailJson: ''},isShowSubjectInput: false,debtor: '',debtorList: ['', '', '', '', '', '', '', '', 0, 0, 0],isShowDebtorInput: false,lender: '',lenderList: ['', '', '', '', '', '', '', '', 0, 0, 0],isShowLenderInput: false,isAuxiliary: false,auxiliary: ''},{main: '',isShowMainInput: false,subject: {number: '',name: '',detailJson: ''},isShowSubjectInput: false,debtor: '',debtorList: ['', '', '', '', '', '', '', '', 0, 0, 0],isShowDebtorInput: false,lender: '',lenderList: ['', '', '', '', '', '', '', '', 0, 0, 0],isShowLenderInput: false,isAuxiliary: false,auxiliary: ''}];this.debtorTotal = 0;this.debtorTotalList = ['', '', '', '', '', '', '', '', 0, 0, 0];this.lenderTotal = 0;this.lenderTotalList = ['', '', '', '', '', '', '', '', 0, 0, 0];this.dialogMainVisible = false;this.dialogSubjectVisible = false;this.dialogAuxiliaryVisible = false;this.dialogMainIndex = 0;this.dialogSubjectIndex = 0;this.dialogAuxiliaryIndex = 0;this.isAuxiliary = false;}}}
}
</script><style scoped>
table {width: 100%;border-spacing: 0;border-collapse: collapse;padding: 0;margin: 0;
}table td {text-align: center;table-layout: fixed;padding: 0px;position: relative;
}.main-subject {position: relative;height: 60px;line-height: 30px;text-align: left;
}.charge-container {padding: 10px;font-size: 14px;color: #444;font-weight: 400;background-color: white;
}.charge {width: 1124px;margin: auto;
}.charge-header {margin-bottom: 10px;
}.charge-header > div {display: inline-block;margin-right: 15px;
}.tip-box {width: 330px;padding: 10px;position: absolute;top: 27px;right: -15px;z-index: 1005;background-color: #fff;box-shadow: 0 0 6px rgba(170, 170, 170, .73);display: none;
}.tip-box-table tr {height: 25px;
}.el-icon-info {font-size: 18px;margin-left: 30px;cursor: pointer;
}.el-icon-info:hover + .tip-box {display: inline-block;
}.el-icon-more {position: absolute;top: 22px;right: 10px;z-index: 2;color: #666;cursor: pointer;font-size: 16px;
}.dropdown-menu {position: absolute;top: 100%;left: 0px;float: left;padding: 5px 0;margin: 2px 0 0;text-align: left;list-style: none;background-color: #fff;background-clip: padding-box;
}.suggest-list {width: 100%;height: auto;z-index: 1015;min-width: inherit;display: block;overflow: hidden;border: none;box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
}.suggest-list .item-list {max-height: 375px;overflow: auto;list-style: none;margin: 0px;padding: 0px;
}.item-list li {display: flex;padding: 0 10px;height: 28px;line-height: 28px;cursor: pointer;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}.item-list li:hover {background: #ecebeb;
}.item-list li.hover {background: #ecebeb;
}.charge-table, .tip-box-table {border: 1px solid #bab9b9;
}.charge-table, .debtor-tbale, .lender-tbale > tr {height: 60px;
}.charge-table > tr:first-child {height: 50px;
}.td-auxiliary-dis {background-color: #f7f7f7;
}.auxiliary-accounting {height: 60px;overflow: auto;padding: 15px 0 0 30px;
}.auxiliary-accounting:before {content: "+";font-size: 30px;color: #4a90e2;cursor: pointer;padding: 0 11px;position: absolute;top: 0;left: 0;line-height: 60px;
}.auxiliary-single {display: flex;float: left;height: 28px;line-height: 28px;margin-right: 5px;cursor: pointer;background: #eee;padding: 0 8px;border-radius: 2px;
}.auxiliary-single span {max-width: 90px;overflow: hidden;height: 28px;text-overflow: ellipsis;white-space: nowrap;
}.auxiliary-single i {color: red;margin: 8px 0 8px 7px;font-size: 10px;visibility: hidden;
}.auxiliary-single:hover i {visibility: inherit;
}.charge-table-icon {cursor: pointer;display: inline-block;
}.debtor-lender-table tr td {width: 9%;border-right: 1px solid #bab9b9;
}.debtor-lender-table tr td:nth-child(3) {border-right-color: rgba(74, 144, 226, .5);
}.debtor-lender-table tr td:nth-child(6) {border-right-color: rgba(74, 144, 226, .5);
}.debtor-lender-table tr td:nth-child(9) {border-right-color: rgba(226, 106, 74, .5);
}.debtor-lender-table tr td:last-child {border-right: none;
}.tr-negative {color: red;
}.charge-table input, select {width: 100%;height: 60px;
}.charge-table textarea {width: 100%;height: 60px;padding: 9px 14px 9px 10px;overflow: auto;resize: none;border: none;border-radius: 0px;margin: 0;color: #444;box-sizing: border-box;
}
</style>

由于component组件这些不是每个都需要用到，所以在贴代码的时候注释了，有需要可以看一下component组件代码如下。

摘要列表选择框：mainSelector.vue

<template>
<div><ul class="list"><li v-for="(main,index) in mainList" @click="voluationInput(main.name)">{{main.name}}</li></ul>
</div>
</template><script lang='jsx'>
import {getMainList} from '@/api';export default {methods: {voluationInput(val){this.$emit('closeMainDialog', val);}},data() {return {mainList:[],};},created() {getMainList().then(response => {this.mainList = response.data.records;});},
};
</script><style scoped>.list{list-style: none;padding: 0;margin: 0;border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;}.list li{cursor: pointer;height: 40px;line-height: 40px;padding: 0 10px;}.list li:hover{background: #ecebeb;}
</style>

会计科目选择框：subjectSelector.vue

<template><div><ul class="list"><li v-for="(subject,index) in subjectList" @click="voluationInput(subject)">{{subject.name}}</li></ul></div>
</template><script lang='jsx'>import {getSubjectList} from '@/api';export default {methods: {voluationInput(val) {this.$emit('closeSubjectDialog', val);}},data() {return {subjectList: [],};},created() {getSubjectList().then(response => {this.subjectList = response.data.records;});},};
</script><style scoped>.list {list-style: none;padding: 5px 0;margin: 0;border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;}.list li {cursor: pointer;height: 40px;line-height: 40px;padding: 0 10px;}.list li:hover {background: #ecebeb;}
</style>

辅助核算框：auxiliarySelector.vue

<template>
<div><ul class="list"><li v-for="(auxiliary,index) in auxiliaryList" @click="voluationInput(auxiliary)">{{auxiliary}}</li></ul>
</div>
</template><script lang='jsx'>
export default {methods: {voluationInput(val){this.$emit('closeAuxiliaryDialog', val);}},data() {return {auxiliaryList:['施耐德','西门子','驱易'],};}
};
</script><style scoped>.list{list-style: none;padding: 0;margin: 0;border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;}.list li{cursor: pointer;height: 40px;line-height: 40px;padding: 0 10px;}.list li:hover{background: #ecebeb;}
</style>

Vue 记账凭证模块组件相关推荐

Vue2 记账凭证模块组件
Vue2页面代码如下: <template><div class="charge-container" id="chargeContain ...
【Vue基础七】--- 组件和模块概念
文章目录一. 组件 1-1 传统方式和组件的对比 1-2 模块和组件概念 1-2-1 模块+模块化 1-2-2 组件化 1-3 组件 1-3-1 非单文件组件 1-3-1-1 组件的使用 1-3-1 ...
记账凭证php源码,【FICO系列】SAP FI模块-记账凭证FB01的BAPI
公众号:SAP Technical 本文作者:matinal 前言部分大家可以关注我的公众号,公众号里的排版更好,阅读更舒适. 正文部分 FI模块记账凭证FB01的BAPI - POSTING_IN ...
vue实现简单表格组件
本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解 ...
Vue.js 单文件组件
单文件组件介绍在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这 ...
vue怎么自己创建组件并引用_Vue 实现创建全局组件,并且使用Vue.use() 载入方式
自定义vue组件,一般是局部引用的方式载入,使用的时候,在应用的组件中使用 import moduleName from 'module' 导入,在components中注册 {{info.title ...
vue 项目总结一组件开发的配置和例子
原文地址:https://segmentfault.com/a/1190000012410259?_ea=2993723 先上 src 文件夹的结构图: 文件及文件夹作用 App.vue App.vu ...
Vue第二天学习总结—— Vue全家桶之组件化开发(组件化开发思想、组件注册、Vue调试工具用法、组件间数据交互传递、组件插槽、基于组件的案例——购物车)
(一) 组件化开发思想 1. 现实中的组件化思想体现组件化即是对某些可以进行复用的功能进行封装的标准化工作标准:要想组件能够成功组合在一起,每个组件必须要有标准分治:将不同的功能封装到不同的组件 ...
oracle应付账款凭证编号查找,记账凭证的编号方式
记账凭证的录入是总账模块中极为重要的数据接收部分 ,这部分数据接收的质量直接影响系统的完成质量.下面学习啦小编就为大家解开记账凭证的编号方式,希望能帮到你. 记账凭证的编号方式为了便于查找和与账簿核 ...

Vue 记账凭证模块组件

Vue 记账凭证模块组件相关推荐

最新文章

热门文章