|
@@ -46,15 +46,17 @@
|
|
|
</div>
|
|
|
<!-- 内容主体区域 -->
|
|
|
<div class="contents">
|
|
|
+ <div v-if="!displayTable" class="headine" ref="headine">
|
|
|
+ <h3 ref="headHe" style="padding-left: 220px">{{shuz[ins]}}</h3>
|
|
|
+ <p style="float: right;margin-right: 25px;"><el-button type="primary" @click="submits" size="mini">提交</el-button></p>
|
|
|
+ </div>
|
|
|
<!-- 上面部分 -->
|
|
|
- <div ref="staff" style="margin: 20px 20px 0 220px; width: 69%" >
|
|
|
+ <div ref="staff" style="margin: 20px 20px 0 220px; width: 81.5%" >
|
|
|
<div class="staff" v-if="!displayTable">
|
|
|
<!-- 公共 -->
|
|
|
<div class="public">
|
|
|
<el-form :model="addForm" label-width="80px">
|
|
|
<!-- <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> -->
|
|
|
- <h3 style="margin: 0;padding: 25px 0 0 25px;color: #20A0FF;display: block">{{shuz[ins]}}</h3>
|
|
|
- <span class="pu_bu_t" @click="submits"> <i class="el-icon-circle-check"></i> 提交</span>
|
|
|
<!-- 填报人 -->
|
|
|
<el-form-item label="填报人">
|
|
|
<el-select v-model="addForm.ownerId" placeholder="请选择填报人" style="width: 150px">
|
|
@@ -87,14 +89,14 @@
|
|
|
<el-input type="textarea" v-model="addForm.remark"></el-input>
|
|
|
</el-form-item>
|
|
|
<!-- 总成本 -->
|
|
|
- <div style="float: left; line-height: 55px;margin-left:20px">总成本 <el-link disabled v-model="addForm.totalAmount">{{addForm.totalAmount}}</el-link> 元</div>
|
|
|
+ <!-- <div style="float: left; line-height: 55px;margin-left:20px">总成本 <el-link disabled v-model="addForm.totalAmount">{{addForm.totalAmount}}</el-link> 元</div> -->
|
|
|
</el-form>
|
|
|
</div>
|
|
|
<!-- 按钮 -->
|
|
|
<div class="pu_button">
|
|
|
- <!-- <el-button type="primary" @click="addxz">新增</el-button> -->
|
|
|
<span class="pu_bu_x" @click="addxz"> <i class="el-icon-circle-plus-outline"></i> 新增填报</span>
|
|
|
- <!-- <span class="pu_bu_t" @click="submits"> <i class="el-icon-circle-check"></i> 提交</span> -->
|
|
|
+ <span v-if="this.addForm.totalAmount <= 0">总成本 {{this.addForm.totalAmount}} 元</span>
|
|
|
+ <span v-else>总成本 ¥{{this.addForm.totalAmount | numberToCurrency}} 元</span>
|
|
|
</div>
|
|
|
|
|
|
<!-- 表格 -->
|
|
@@ -127,7 +129,7 @@
|
|
|
</el-table-column>
|
|
|
<el-table-column label="费用金额" width="135px">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model.number="scope.row.amount"></el-input>
|
|
|
+ <el-input v-enter-number v-model.number="scope.row.amount" @change="shiqu(scope.row.amount)"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="invoiceNo" label="发票号" width="135px">
|
|
@@ -137,12 +139,12 @@
|
|
|
</el-table-column>
|
|
|
<el-table-column label="税率%" width="135px">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model.number="scope.row.taxPercent"></el-input>
|
|
|
+ <el-input v-enter-number v-model.number="scope.row.taxPercent"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="税额" width="135px">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model.number="scope.row.taxValue"></el-input>
|
|
|
+ <el-input v-enter-number v-model.number="scope.row.taxValue"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="备注" width="135px">
|
|
@@ -240,12 +242,18 @@
|
|
|
<el-form :model="ParticularsList" label-width="80px">
|
|
|
<el-form-item label="填报人">
|
|
|
<el-input v-model="ParticularsList.ownerName" :disabled="flg"></el-input>
|
|
|
+ <!-- <el-select v-model="ParticularsList.ownerId" placeholder="请选择填报人" style="width: 150px" :disabled="flg">
|
|
|
+ <span v-for="(item, index) in users" :key="index">
|
|
|
+ <el-option :label="item.name" :value="item.id"></el-option>
|
|
|
+ </span>
|
|
|
+ </el-select> -->
|
|
|
</el-form-item>
|
|
|
<el-form-item label="填报日期">
|
|
|
- <el-input v-model="ParticularsList.createDate" :disabled="flg"></el-input>
|
|
|
+ <!-- <el-input v-model="ParticularsList.createDate" :disabled="flg"></el-input> -->
|
|
|
+ <el-date-picker type="date" :disabled="flg" placeholder="选择日期" v-model="ParticularsList.createDate" value-format="yyyy-MM-dd" style="width: 200px;"></el-date-picker>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="发票张数">
|
|
|
- <el-input v-model="ParticularsList.ticketNum" :disabled="flg"></el-input>
|
|
|
+ <el-input v-enter-number v-model="ParticularsList.ticketNum" :disabled="flg"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="费用类型">
|
|
|
<el-select v-model="ParticularsList.type" placeholder="请选择" :disabled="flg">
|
|
@@ -258,13 +266,18 @@
|
|
|
<el-input v-model="ParticularsList.remark" :disabled="flg"></el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="总成本">
|
|
|
- <el-input v-model="ParticularsList.totalAmount" :disabled="flg"></el-input>
|
|
|
+ ¥{{ParticularsList.totalAmount | numberToCurrency}} 元
|
|
|
</el-form-item>
|
|
|
+
|
|
|
+ <!-- <template slot-scope="scope">
|
|
|
+ <el-input v-model="scope.row.totalAmount" v-if="!flg"></el-input> 元
|
|
|
+ <span v-else>{{scope.row.totalAmount}} 元</span>
|
|
|
+ </template> -->
|
|
|
</el-form>
|
|
|
<el-table :data="ParticularsList.invoiceList" border style="width: 100%">
|
|
|
- <el-table-column prop="projectId" label="项目" width="130">
|
|
|
+ <el-table-column prop="projectId" label="项目" width="155">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-select v-if="!flg" v-model="scope.row.projectId" placeholder="项目" style="width: 150px">
|
|
|
+ <el-select v-if="!flg" v-model="scope.row.projectId" placeholder="项目" style="width: 130px">
|
|
|
<el-option v-for="(item, index) in projectList" :key="index" :label="item.projectName" :value="item.id" @click="ok(item)"></el-option>
|
|
|
</el-select>
|
|
|
<span v-else>{{projectIdName[scope.$index].projectName}}</span>
|
|
@@ -286,31 +299,31 @@
|
|
|
<span v-else>{{typeInvoic[scope.row.invoiceType]}}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="amount" label="费用金额">
|
|
|
+ <el-table-column prop="amount" label="费用金额" width="172">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-if="!flg" v-model.number="scope.row.amount"></el-input>
|
|
|
+ <el-input v-enter-number v-if="!flg" v-model.number="scope.row.amount" @change="kan"></el-input>
|
|
|
<span v-else>{{scope.row.amount}}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="invoiceNo" label="发票号">
|
|
|
+ <el-table-column prop="invoiceNo" label="发票号" width="172">
|
|
|
<template slot-scope="scope">
|
|
|
<el-input v-if="!flg" v-model.number="scope.row.invoiceNo"></el-input>
|
|
|
<span v-else>{{scope.row.invoiceNo}}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="taxPercent" label="税率%">
|
|
|
+ <el-table-column prop="taxPercent" label="税率%" width="172">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-if="!flg" v-model.number="scope.row.taxPercent"></el-input>
|
|
|
+ <el-input v-enter-number v-if="!flg" v-model.number="scope.row.taxPercent"></el-input>
|
|
|
<span v-else>{{scope.row.taxPercent}}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="taxValue" label="税额">
|
|
|
+ <el-table-column prop="taxValue" label="税额" width="172">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-if="!flg" v-model.number="scope.row.taxValue"></el-input>
|
|
|
+ <el-input v-enter-number v-if="!flg" v-model.number="scope.row.taxValue"></el-input>
|
|
|
<span v-else>{{scope.row.taxValue}}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="remark" label="备注">
|
|
|
+ <el-table-column prop="remark" label="备注" width="300">
|
|
|
<template slot-scope="scope">
|
|
|
<el-input v-if="!flg" v-model.number="scope.row.remark"></el-input>
|
|
|
<span v-else>{{scope.row.remark}}</span>
|
|
@@ -388,6 +401,21 @@ export default {
|
|
|
this.getList() // 获取单据列表
|
|
|
this.getProjectList()
|
|
|
},
|
|
|
+ filters: {
|
|
|
+ numberToCurrency(value) {
|
|
|
+ if (!value) return '0.00'
|
|
|
+ value = value.toFixed(2)
|
|
|
+ const intPart = Math.trunc(value)
|
|
|
+ const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
|
|
|
+ let floatPart = '.00'
|
|
|
+ const valueArray = value.toString().split('.')
|
|
|
+ if (valueArray.length === 2) { // 有小数部分
|
|
|
+ floatPart = valueArray[1].toString() // 取得小数部分
|
|
|
+ return intPartFormat + '.' + floatPart
|
|
|
+ }
|
|
|
+ return intPartFormat + floatPart
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
// 单据查看
|
|
|
downloadByA(val) {
|
|
@@ -400,8 +428,11 @@ export default {
|
|
|
this.dialog = true,
|
|
|
this.flg = false,
|
|
|
delete val.invoiceList
|
|
|
- console.log(val, '将要传过去的数据');
|
|
|
this.getParticulars(val.id)
|
|
|
+ // this.getUsers() // 获取人员信息
|
|
|
+ // console.log(this.ParticularsList.ownerName, '看看打印的');
|
|
|
+ // console.log(this.users, '看看打印的');
|
|
|
+ // var k = this.users.filter(p => p.id == this.ParticularsList.ownerName)
|
|
|
},
|
|
|
staffs() { // 控制员工费用报表
|
|
|
this.displayTable = false;
|
|
@@ -412,8 +443,6 @@ export default {
|
|
|
},
|
|
|
present(){
|
|
|
this.dialog = false
|
|
|
- // delete this.ParticularsList.invoiceList
|
|
|
- console.log(this.ParticularsList, '传过去的数据');
|
|
|
this.adds();
|
|
|
},
|
|
|
|
|
@@ -421,7 +450,6 @@ export default {
|
|
|
// happenDate
|
|
|
this.ParticularsList.items = JSON.stringify(this.ParticularsList.invoiceList)//这里要传发票列表的json转string
|
|
|
delete this.ParticularsList.invoiceList
|
|
|
- console.log(this.ParticularsList, '998');
|
|
|
this.http.post('/expense-sheet/add', this.ParticularsList,
|
|
|
res => {
|
|
|
if (res.code == "ok") {
|
|
@@ -455,7 +483,6 @@ export default {
|
|
|
res => {
|
|
|
if (res.code == "ok") {
|
|
|
this.users = res.data.records;
|
|
|
- console.log(this.users, '得到的数据');
|
|
|
} else {
|
|
|
this.$message({
|
|
|
message: res.msg,
|
|
@@ -488,7 +515,6 @@ export default {
|
|
|
res => {
|
|
|
if (res.code == "ok") {
|
|
|
this.projectList = res.data;
|
|
|
- console.log(this.projectList, '打印过来的');
|
|
|
} else {
|
|
|
this.$message({
|
|
|
message: res.msg,
|
|
@@ -532,7 +558,6 @@ export default {
|
|
|
},
|
|
|
//删除单据
|
|
|
deletes(id) {
|
|
|
- console.log(id);
|
|
|
this.http.post('/expense-sheet/delete', {id: id},
|
|
|
res => {
|
|
|
if (res.code == "ok") {
|
|
@@ -559,7 +584,6 @@ export default {
|
|
|
add() {
|
|
|
// happenDate
|
|
|
this.addForm.items = JSON.stringify(this.invoiceList)//这里要传发票列表的json转string
|
|
|
- console.log(this.addForm, '传过去的数据');
|
|
|
this.http.post('/expense-sheet/add', this.addForm,
|
|
|
res => {
|
|
|
if (res.code == "ok") {
|
|
@@ -589,7 +613,6 @@ export default {
|
|
|
res => {
|
|
|
if (res.code == "ok") {
|
|
|
this.addForm.code = res.data;
|
|
|
- console.log(this.addForm.code, '获取到的单据编码');
|
|
|
} else {
|
|
|
this.$message({
|
|
|
message: res.msg,
|
|
@@ -617,8 +640,7 @@ export default {
|
|
|
}
|
|
|
this.projectIdName = this.projectList.filter( item => {return s.indexOf(item.id) !== -1})
|
|
|
// this.projectIdName = this.projectList.filter(p => p.id == this.ParticularsList.invoiceList[0].projectId)[0].projectName
|
|
|
- console.log(this.projectIdName);
|
|
|
- console.log(this.projectList);
|
|
|
+ console.log(res.data, '查看当前状态');
|
|
|
} else {
|
|
|
this.$message({
|
|
|
message: res.msg,
|
|
@@ -680,7 +702,6 @@ export default {
|
|
|
this.isOK = false
|
|
|
},
|
|
|
ssl(index) {
|
|
|
- console.log(index);
|
|
|
this.z = index
|
|
|
this.addForm.type = index
|
|
|
this.ins = index
|
|
@@ -696,25 +717,58 @@ export default {
|
|
|
this.$refs.staff.style.margin = '20px 20px 0 20px'
|
|
|
this.$refs.staff.style.width = '95%'
|
|
|
this.$refs.xiaomian.style.width = '100%'
|
|
|
+ this.$refs.headHe.style.paddingLeft = '20px'
|
|
|
} else {
|
|
|
this.$refs.sidebars.style.display = 'block'
|
|
|
this.$refs.sid.style.left = '430px'
|
|
|
this.$refs.side.style.left = '-19px'
|
|
|
this.$refs.sideI.className = 'el-icon-arrow-left'
|
|
|
this.$refs.staff.style.margin = '20px 20px 0 220px'
|
|
|
- this.$refs.staff.style.width = '69%'
|
|
|
+ this.$refs.staff.style.width = '81%'
|
|
|
this.$refs.xiaomian.style.width = '85%'
|
|
|
+ this.$refs.headHe.style.paddingLeft = '220px'
|
|
|
}
|
|
|
},
|
|
|
+ // 费用金额失去焦点时触发
|
|
|
+ shiqu(){
|
|
|
+ this.addForm.totalAmount = this.invoiceList.reduce((prev, next) => {
|
|
|
+ return prev + next.amount;
|
|
|
+ }, 0)
|
|
|
+ },
|
|
|
+ kan(){
|
|
|
+ this.ParticularsList.totalAmount = this.ParticularsList.invoiceList.reduce((prev, next) => {
|
|
|
+ return prev + next.amount
|
|
|
+ }, 0)
|
|
|
+ }
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
+/* 费用报销标题 */
|
|
|
+.headine {
|
|
|
+ width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ line-height: 70px;
|
|
|
+ background: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.headine h3 {
|
|
|
+ margin: 0;
|
|
|
+ display: inline-block;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #20A0FF;
|
|
|
+}
|
|
|
+.headine p {
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+/* /费用报销标题 */
|
|
|
.sidebars {
|
|
|
height: 100%;
|
|
|
position: absolute;
|
|
|
border-right: 1px solid #E6E6E6;
|
|
|
z-index: 2;
|
|
|
+ top: 0;
|
|
|
}
|
|
|
.sidebars h2 {
|
|
|
margin: 0;
|
|
@@ -845,11 +899,12 @@ export default {
|
|
|
height: 100%;
|
|
|
/* padding: 30px; */
|
|
|
background: #F7F7F7;
|
|
|
- position: absolute;
|
|
|
+ /* position: absolute; */
|
|
|
}
|
|
|
|
|
|
.submits {
|
|
|
margin-left: 50%;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
</style>
|