|
@@ -1,7 +1,8 @@
|
|
|
<template>
|
|
|
<section>
|
|
|
<div class="sidebars" ref="sidebars" style="width: 200px;display: block;background: #fff">
|
|
|
- <h2><i class="iconfont firerock-iconcaiwu" style="padding-right: 10px"></i>费用报销模块</h2>
|
|
|
+ <h3><i class="iconfont firerock-iconbaoxiao" style="padding-right: 10px"></i>费用报销模块</h3>
|
|
|
+ <el-divider ></el-divider>
|
|
|
<el-col :span="12">
|
|
|
<el-menu
|
|
|
default-active="1-1"
|
|
@@ -13,8 +14,8 @@
|
|
|
style="width:100%">
|
|
|
<el-submenu index="1">
|
|
|
<template slot="title">
|
|
|
- <i class="el-icon-location"></i>
|
|
|
- <span>员工费用报表</span>
|
|
|
+ <i class="iconfont firerock-icontianbao"></i>
|
|
|
+ <span>员工费用填报</span>
|
|
|
</template>
|
|
|
<el-menu-item index="1-1"><p @click="ssl(0)"> 一般费用填报</p></el-menu-item>
|
|
|
<el-menu-item index="1-2"><p @click="ssl(1)">差旅费用填报</p></el-menu-item>
|
|
@@ -34,8 +35,8 @@
|
|
|
active-text-color="#20A0FF"
|
|
|
style="width:100%">
|
|
|
<el-menu-item index="2" @select="bills">
|
|
|
- <i class="el-icon-setting"></i>
|
|
|
- <span slot="title">我的报销单据</span>
|
|
|
+ <i class="iconfont firerock-iconbaoxiaodan"></i>
|
|
|
+ <span slot="title">报销单据列表</span>
|
|
|
</el-menu-item>
|
|
|
</el-menu>
|
|
|
</el-col>
|
|
@@ -94,9 +95,9 @@
|
|
|
</div>
|
|
|
<!-- 按钮 -->
|
|
|
<div class="pu_button">
|
|
|
- <span class="pu_bu_x" @click="addxz"> <i class="el-icon-circle-plus-outline"></i> 新增填报</span>
|
|
|
- <span v-if="this.addForm.totalAmount <= 0">总成本 {{this.addForm.totalAmount}} 元</span>
|
|
|
- <span v-else>总成本 ¥{{this.addForm.totalAmount | numberToCurrency}} 元</span>
|
|
|
+ <span v-if="this.addForm.totalAmount <= 0" style="color:#606266;">总成本 {{this.addForm.totalAmount}} 元</span>
|
|
|
+ <span v-else style="color:#606266;">总成本 ¥{{this.addForm.totalAmount | numberToCurrency}} 元</span>
|
|
|
+ <span class="pu_bu_x" style="margin-left:10px;" @click="addxz"> <i class="el-icon-circle-plus-outline"></i> 新增发票</span>
|
|
|
</div>
|
|
|
|
|
|
<!-- 表格 -->
|
|
@@ -105,23 +106,24 @@
|
|
|
:data="invoiceList"
|
|
|
border
|
|
|
style="width: 100%;height: 100%"
|
|
|
+ max-height="300px"
|
|
|
@row-dblclick="dbclick">
|
|
|
- <el-table-column prop="projectName" label="项目" width="180">
|
|
|
+ <el-table-column prop="projectName" label="所属项目" width="180">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-select v-model="scope.row.projectId" placeholder="项目" style="width: 150px">
|
|
|
+ <el-select size="small" v-model="scope.row.projectId" placeholder="项目" style="width: 150px" >
|
|
|
<el-option v-for="(item, index) in projectList" :key="index" :label="item.projectName" :value="item.id" @click="ok(item)"></el-option>
|
|
|
</el-select>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="happenDate" label="费用日期" width="170px">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-date-picker v-model="scope.row.happenDate" type="date" style=" width: 145px" value-format="yyyy-MM-dd" placeholder="选择日期">
|
|
|
+ <el-date-picker size="small" v-model="scope.row.happenDate" type="date" style=" width: 145px" value-format="yyyy-MM-dd" placeholder="选择日期">
|
|
|
</el-date-picker>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="发票种类" width="175px">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-select v-model="scope.row.invoiceType" placeholder="请选择费用类型" style="width: 150px;">
|
|
|
+ <el-select size="small" v-model="scope.row.invoiceType" placeholder="请选择费用类型" style="width: 150px;">
|
|
|
<el-option label="增值税专用发票" value="0"></el-option>
|
|
|
<el-option label="增值税普通发票" value="1"></el-option>
|
|
|
</el-select>
|
|
@@ -129,33 +131,33 @@
|
|
|
</el-table-column>
|
|
|
<el-table-column label="费用金额" width="135px">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-enter-number v-model.number="scope.row.amount" @change="shiqu(scope.row.amount)"></el-input>
|
|
|
+ <el-input size="small" 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">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model.number="scope.row.invoiceNo"></el-input>
|
|
|
+ <el-input size="small" v-model.number="scope.row.invoiceNo"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="税率%" width="135px">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-enter-number v-model.number="scope.row.taxPercent"></el-input>
|
|
|
+ <el-input size="small" 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-enter-number v-model.number="scope.row.taxValue"></el-input>
|
|
|
+ <el-input size="small" v-enter-number v-model.number="scope.row.taxValue"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="备注" width="135px">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-model.number="scope.row.remark"></el-input>
|
|
|
+ <el-input size="small" v-model.number="scope.row.remark"></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
+ <el-table-column fixed="right"
|
|
|
label="操作">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-button type="danger" size="mini" style="display: inline-block;margin-left:0;margin-top: 3px" @click="chanc(scope.$index)">删除</el-button>
|
|
|
+ <el-button type="default" size="mini" style="display: inline-block;margin-left:0;margin-top: 3px" @click="chanc(scope.$index)">删除</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
@@ -168,27 +170,27 @@
|
|
|
<!-- 下面部分 -->
|
|
|
<div class="xiamian" ref="xiaomian" style="width: 85%;float:right;background: #fff;position: relative;">
|
|
|
<div v-if="displayTable">
|
|
|
- <div style="padding:10px;">
|
|
|
+ <div style="padding-left:10px;padding-right:10px;">
|
|
|
<div>
|
|
|
- <el-form label-width="80px" inline>
|
|
|
+ <el-form label-width="80px" inline >
|
|
|
<!-- 填报日期 -->
|
|
|
<el-form-item label="单据编号" >
|
|
|
- <el-input v-model="code" placeholder="单据编号" clearable="true"></el-input>
|
|
|
+ <el-input v-model="code" size="small" placeholder="单据编号" clearable="true"></el-input>
|
|
|
</el-form-item>
|
|
|
<!-- 填报日期 -->
|
|
|
<el-form-item label="填报日期" >
|
|
|
- <el-date-picker type="date" clearable="true" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="date" style="width: 200px;"></el-date-picker>
|
|
|
+ <el-date-picker type="date" size="small" clearable="true" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="date" style="width: 200px;"></el-date-picker>
|
|
|
</el-form-item>
|
|
|
<!-- 费用类型 -->
|
|
|
<el-form-item label="费用类型">
|
|
|
- <el-select v-model="type" placeholder="请选择费用类型" clearable="true" style="width: 150px">
|
|
|
+ <el-select v-model="type" size="small" placeholder="请选择费用类型" clearable="true" style="width: 150px">
|
|
|
<el-option label="一般费用" value="0"></el-option>
|
|
|
<el-option label="差旅费用" value="1"></el-option>
|
|
|
<el-option label="外包费用" value="2"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
- <el-button @click="getList">查找</el-button>
|
|
|
+ <el-button @click="getList" size="small">查找</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
@@ -196,7 +198,7 @@
|
|
|
<!--列表-->
|
|
|
<el-table :data="list" highlight-current-row v-loading="listLoading" :height="tableHeight" style="width: 100%;">
|
|
|
<el-table-column prop="code" label="票据编号"></el-table-column>
|
|
|
- <el-table-column prop="totalAmount" label="金额" ></el-table-column>
|
|
|
+ <el-table-column prop="totalAmount" label="金额(元)" ></el-table-column>
|
|
|
<el-table-column prop="ownerName" label="填报人" ></el-table-column>
|
|
|
<el-table-column prop="createDate" label="填报日期" ></el-table-column>
|
|
|
<el-table-column prop="ticketNum" label="发票张数" ></el-table-column>
|
|
@@ -236,7 +238,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 我的单据报销展示 -->
|
|
|
- <el-dialog title="提示" :visible.sync="dialog" width="1000px">
|
|
|
+ <el-dialog title="报销单据详情" :visible.sync="dialog" width="1000px">
|
|
|
<!-- 内容主体 -->
|
|
|
<div class="informant"><!-- 填报人 -->
|
|
|
<el-form :model="ParticularsList" label-width="80px">
|
|
@@ -277,7 +279,7 @@
|
|
|
<el-table :data="ParticularsList.invoiceList" border style="width: 100%">
|
|
|
<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: 130px">
|
|
|
+ <el-select size="small" 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>
|
|
@@ -285,47 +287,47 @@
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="happenDate" label="费用日期" width="172">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-date-picker v-if="!flg" v-model="scope.row.happenDate" type="date" style=" width: 145px" value-format="yyyy-MM-dd" placeholder="选择日期">
|
|
|
+ <el-date-picker size="small" v-if="!flg" v-model="scope.row.happenDate" type="date" style=" width: 145px" value-format="yyyy-MM-dd" placeholder="选择日期">
|
|
|
</el-date-picker>
|
|
|
<span v-else>{{scope.row.happenDate}}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="invoiceType" label="发票种类" width="172">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-select v-if="!flg" v-model="scope.row.invoiceType" placeholder="请选择费用类型" style="width: 150px;">
|
|
|
+ <el-select size="small" v-if="!flg" v-model="scope.row.invoiceType" placeholder="请选择费用类型" style="width: 150px;">
|
|
|
<el-option label="增值税专用发票" :value="0"></el-option>
|
|
|
<el-option label="增值税普通发票" :value="1"></el-option>
|
|
|
</el-select>
|
|
|
<span v-else>{{typeInvoic[scope.row.invoiceType]}}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="amount" label="费用金额" width="172">
|
|
|
+ <el-table-column prop="amount" label="费用金额(元)" width="172">
|
|
|
<template slot-scope="scope">
|
|
|
- <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>
|
|
|
+ <el-input size="small" 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="发票号" width="172">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-if="!flg" v-model.number="scope.row.invoiceNo"></el-input>
|
|
|
+ <el-input size="small" 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="税率%" width="172">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-enter-number v-if="!flg" v-model.number="scope.row.taxPercent"></el-input>
|
|
|
+ <el-input size="small" 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="税额" width="172">
|
|
|
+ <el-table-column prop="taxValue" label="税额(元)" width="172">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-enter-number v-if="!flg" v-model.number="scope.row.taxValue"></el-input>
|
|
|
- <span v-else>{{scope.row.taxValue}}</span>
|
|
|
+ <el-input size="small" 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="备注" width="300">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-input v-if="!flg" v-model.number="scope.row.remark"></el-input>
|
|
|
+ <el-input size="small" v-if="!flg" v-model.number="scope.row.remark"></el-input>
|
|
|
<span v-else>{{scope.row.remark}}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
@@ -747,8 +749,8 @@ export default {
|
|
|
/* 费用报销标题 */
|
|
|
.headine {
|
|
|
width: 100%;
|
|
|
- height: 70px;
|
|
|
- line-height: 70px;
|
|
|
+ height: 46.4px;
|
|
|
+ line-height: 46.4px;
|
|
|
background: #fff;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
@@ -756,7 +758,7 @@ export default {
|
|
|
margin: 0;
|
|
|
display: inline-block;
|
|
|
box-sizing: border-box;
|
|
|
- color: #20A0FF;
|
|
|
+ color: #999;
|
|
|
}
|
|
|
.headine p {
|
|
|
display: inline-block;
|
|
@@ -770,12 +772,12 @@ export default {
|
|
|
z-index: 2;
|
|
|
top: 0;
|
|
|
}
|
|
|
-.sidebars h2 {
|
|
|
+.sidebars h3 {
|
|
|
margin: 0;
|
|
|
line-height: 45px;
|
|
|
- background: #20A0FF;
|
|
|
+ background: #ffffff;
|
|
|
font-weight: normal;
|
|
|
- color: #fff;
|
|
|
+ color: #666;
|
|
|
padding-left: 20px;
|
|
|
}
|
|
|
.sidebars .el-col-12 {
|