Commit 6e137f66 authored by 柳 佳乐's avatar 柳 佳乐
Browse files

first

parents
Pipeline #20 failed with stages
in 0 seconds
<template>
<div class="container">
<el-button type="primary" @click="billPrintClick">打印</el-button>
<div id="printBill" class="printTable">
<table class="table show-border" cellspacing="0" cellpadding="0" border="2">
<caption class="table_title" id="caption">
{{company.companyName}}日常报销单
</caption>
<thead style="height: 100px; padding: 10px">
<tr class="table-header">
<th class="show-border" colspan="10">
<div class="herder-title clearfloat">
<div class="title" style="width: 60%; margin-bottom: 10px">
实际报销人:<input type="text" class="input"/>
</div>
<div class="title" style="width: 40%; margin-bottom: 10px">
联系电话:<input type="text" class="input"/>
</div>
<div class="title" style="width: 60%">
摘要:<input type="text" class="input"/>
</div>
<div class="title" style="width: 40%">
附件张数:<input type="text" class="input"/>
</div>
</div>
</th>
</tr>
<tr class="table-header-title">
<th class="show-border" style="width: 30%" colspan="3">报销项</th>
<th class="show-border" style="width: 20%" colspan="2">金额</th>
<th class="show-border" style="width: 50%" colspan="5">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td class="items" colspan="3">办公费</td>
<td colspan="2">
<input type="text" class="td-input" />
</td>
<td colspan="5">办公用品、报刊杂志费等</td>
</tr>
<tr>
<td class="items" colspan="3">版面复印打印费</td>
<td colspan="2">
<input type="text" class="td-input" />
</td>
<td colspan="5">图书资料版面复印打印费、印刷费</td>
</tr>
<tr>
<td class="items" colspan="3">咨询费</td>
<td colspan="2">
<input type="text" class="td-input" />
</td>
<td colspan="5">
支付给外单位咨询方面的费用。(凭咨询费发票结算)
</td>
</tr>
<tr>
<td class="items" colspan="3">手续费</td>
<td colspan="2">
<input type="text" class="td-input" />
</td>
<td colspan="5">
单位支付的各类手续费支出。(如:通过银行、邮局发生的汇款手续费)
</td>
</tr>
<tr>
<td class="items" colspan="3">邮电费</td>
<td colspan="2"></td>
<td colspan="5">
设备维修费、公共设施维修费、室内装修改造、网络系统维护费、房屋建筑物维修费
</td>
</tr>
<tr>
<td class="items" colspan="3">租赁费</td>
<td colspan="2">
<input type="text" class="td-input" />
</td>
<td colspan="5">租赁费、固定资产使用费</td>
</tr>
<tr>
<td class="items" colspan="3">会议费</td>
<td colspan="2">
<input type="text" class="td-input" />
</td>
<td colspan="5">
承办各类会议发生的房租费、伙食补助费以及文件资料的印刷费、会议场地租用费等、承办各类会议发生的房租费、伙食补助费以及文件资料的印刷费、会议场地租用费等
</td>
</tr>
<tr>
<td class="items" colspan="3">培训费</td>
<td colspan="2">
<input type="text" class="td-input" />
</td>
<td colspan="5">其他经费中开支的培训费</td>
</tr>
<tr>
<td class="items" colspan="3">招待费</td>
<td colspan="2">
<input type="text" class="td-input" />
</td>
<td colspan="5">公务接待费</td>
</tr>
<tr>
<td class="items" colspan="3">专用材料费</td>
<td colspan="2">
<input type="text" class="td-input" />
</td>
<td colspan="5">单位购买实验专用材料、单位购买常用设备耗材等</td>
</tr>
<tr>
<td class="items" colspan="3">劳务费</td>
<td colspan="2">
<input type="text" class="td-input" />
</td>
<td colspan="5">激励费、评审劳务费、其他劳务费</td>
</tr>
<tr>
<td class="items" colspan="3">差旅费</td>
<td colspan="2">
<input type="text" class="td-input" />
</td>
<td colspan="5">
是指出差期间因办理公务而产生的交通费、住宿费和公杂费等各项费用。
</td>
</tr>
<tr>
<td class="items" colspan="3">其他</td>
<td colspan="2">
<input type="text" class="td-input" />
</td>
<td colspan="5">
宣传广告费、专利申请费、审计费、外事活动费、管理费支出、税费支出
</td>
</tr>
<tr>
<td class="items" colspan="3">委托业务费</td>
<td colspan="2">
<input type="text" class="td-input" />
</td>
<td colspan="5">科研测试加工费、科研协作费、科研出版费</td>
</tr>
</tbody>
<tfoot>
<tr style="font-weight: 600">
<td class="items" colspan="3">申请报销总金额(大写)</td>
<td colspan="3">
<input type="text" class="td-input" />
</td>
<td colspan="2">(小写)¥</td>
<td colspan="2">
<input type="text" class="td-input" />
</td>
</tr>
<tr style="font-weight: 600">
<td class="items" colspan="3">核报总金额(大写)</td>
<td colspan="3">
<input type="text" class="td-input" />
</td>
<td colspan="2">(小写)¥</td>
<td colspan="2">
<input type="text" class="td-input" />
</td>
</tr>
<tr style="font-weight: 600">
<td class="items" colspan="1">支付<br/>方式</td>
<td colspan="9">
<input type="text" class="td-input" />
</td>
</tr>
<tr style="font-weight: 600">
<td style="width:10%;height:0px;padding: 0px;" class="no-border" ></td>
<td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
<td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
<td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
<td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
<td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
<td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
<td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
<td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
<td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
</tr>
</tfoot>
</table>
<div>
<div class="clearfloat sign">
<div class="">负责人签字:</div>
<div class="">报销人签字:</div>
<div class="">经办人签字:</div>
</div>
<div class="clearfloat">
<div class="data">填报日期:</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {selectById} from "@/api/company"
export default {
data() {
return {
company:{},
};
},
created() {
this.getCompany()
},
methods: {
//获取公司名称
getCompany(){
selectById({companyId:this.$store.getters.companyId}).then((res)=>{
if(res.status == "success"){
this.company = res.data
}else{
this.$message.error(res.data)
}
}).catch((error)=>{
this.$message.error("获取公司名称失败")
})
},
//打印
billPrintClick() {
const style = "@page {margin:0 10mm};"; //打印时去掉眉页眉尾
//打印为什么要去掉眉页眉尾?因为眉页title时打印当前页面的title,相当于是获取html中title标签里面的内容,但是比如我打印的内容只是一个弹框里面的内容,是没有title的,这时候就会出现undefined,为了避免出现这种情况,就可以隐藏眉页眉尾
printJS({
printable: "printBill", // 标签元素id
type: "html",
headerStyle: "font-size:22px;text-align: center;",
header: this.company.companyName + "日常报销单",
ignoreElements:['caption'],
targetStyles: ["*"],
style,
});
},
},
};
</script>
<style scoped>
.container {
padding: 20px;
}
</style>
<style scoped>
.clearfloat:after {
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.no-border {
border: none;
}
.show-border {
border: 1px solid black;
}
.printTable {
width: 794px;
height: 1123px;
padding: 20px 80px;
box-sizing: border-box;
font-size: 14px;
}
.table {
margin-bottom: 20px;
}
.table td {
height: 46px;
padding: 4px;
}
.table_title {
font-size: 22px;
font-weight: 900;
margin-bottom: 10px;
}
.table-header {
text-align: left;
}
.table-header > th {
height: 50px;
padding: 10px;
}
.herder-title {
width: 100%;
}
.herder-title .title {
float: left;
text-align: left;
}
.sign {
width: 100%;
margin-bottom: 15px;
padding-left: 10px;
}
.sign > div {
width: 33%;
float: left;
font-size: 14px;
font-weight: 900;
}
.data {
width: 34%;
float: right;
font-size: 14px;
font-weight: 900;
}
.items {
text-align: center;
}
.td-input{
display: inline-block;
width: 100%;
height: 100%;
outline: none;
border: none;
}
.input{
outline: none;
border: none;
}
</style>
\ No newline at end of file
<template>
<div class="container">
<el-button type="primary" @click="billPrintClick">打印</el-button>
<div id="printBill" class="printTable">
<table class="table show-border" cellspacing="0" cellpadding="0" border="2">
<caption class="table_title" id="caption">
{{company.companyName}}出差审批单
</caption>
<tbody>
<tr>
<td rowspan="2">
项目<br/>名称
</td>
<td colspan="2" rowspan="2">
<input type="text" class="td-input" />
</td>
<td colspan="2" >
出差人
</td>
<td>
<input type="text" class="td-input" />
</td>
<td>
<input type="text" class="td-input" />
</td>
<td>
<input type="text" class="td-input" />
</td>
<td>
<input type="text" class="td-input" />
</td>
<td>
<input type="text" class="td-input" />
</td>
</tr>
<tr>
<td colspan="2" >
职务/职称
</td>
<td>
<input type="text" class="td-input" />
</td>
<td>
<input type="text" class="td-input" />
</td>
<td>
<input type="text" class="td-input" />
</td>
<td>
<input type="text" class="td-input" />
</td>
<td>
<input type="text" class="td-input" />
</td>
</tr>
<tr>
<td rowspan="4">出差<br/>地点</td>
<td colspan="5">
<input type="text" class="td-input" />
</td>
<td rowspan="4">出差<br/>事由</td>
<td colspan="3">
<input type="text" class="td-input" />
</td>
</tr>
<tr>
<td colspan="5">
<input type="text" class="td-input" />
</td>
<td colspan="3">
<input type="text" class="td-input" />
</td>
</tr>
<tr>
<td colspan="5">
<input type="text" class="td-input" />
</td>
<td colspan="3">
<input type="text" class="td-input" />
</td>
</tr>
<tr>
<td colspan="5">
<input type="text" class="td-input" />
</td>
<td colspan="3">
<input type="text" class="td-input" />
</td>
</tr>
<tr>
<td>出差<br/>时间</td>
<td colspan="5">
<input type="text" class="td-input" />
</td>
<td>
拟乘坐的交通工具
</td>
<td colspan="3">
<input type="text" class="td-input" />
</td>
</tr>
<tr>
<td>审批人</td>
<td colspan="9">
<input type="text" class="td-input" />
</td>
</tr>
</tbody>
<tfoot>
<tr style="font-weight: 600">
<td style="width:10%;height:0px;padding: 0px;" class="no-border" ></td>
<td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
<td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
<td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
<td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
<td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
<td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
<td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
<td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
<td style="width:10%;height:0px;padding: 0px;" class="no-border"></td>
</tr>
</tfoot>
</table>
<div>
<div class="clearfloat sign">
<div class="man">填表人:{{user.userName}}</div>
<div class="data">填报日期:{{dateNow}}</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {selectById} from "@/api/company"
export default {
data() {
return {
company:{},
user:{},
dateNow:null,
};
},
created() {
this.user = this.$store.getters.info
console.log(this.user)
this.getCompany()
this.time()
},
methods: {
//获取公司名称
getCompany(){
selectById({companyId:this.$store.getters.companyId}).then((res)=>{
if(res.status == "success"){
this.company = res.data
}else{
this.$message.error(res.data)
}
}).catch((error)=>{
this.$message.error("获取公司名称失败")
})
},
//打印
billPrintClick() {
const style = "@page {margin:0 10mm};"; //打印时去掉眉页眉尾
//打印为什么要去掉眉页眉尾?因为眉页title时打印当前页面的title,相当于是获取html中title标签里面的内容,但是比如我打印的内容只是一个弹框里面的内容,是没有title的,这时候就会出现undefined,为了避免出现这种情况,就可以隐藏眉页眉尾
printJS({
printable: "printBill", // 标签元素id
type: "html",
headerStyle: "font-size:22px;text-align: center;",
header: this.company.companyName + "出差审批单",
ignoreElements:['caption'],
targetStyles: ["*"],
style,
});
},
//获取现在时间
time(){
let date = new Date();
var Y = date.getFullYear() + ''
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + ''
var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ''
this.dateNow = Y+M+D
}
},
};
</script>
<style scoped>
.container {
padding: 20px;
}
</style>
<style scoped>
.clearfloat:after {
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.no-border {
border: none;
}
.show-border {
border: 1px solid black;
}
.printTable {
width: 794px;
height: 1123px;
padding: 20px 80px;
box-sizing: border-box;
font-size: 14px;
}
.table {
margin-bottom: 20px;
width: 100%;
}
.table td {
height: 46px;
padding: 4px;
text-align: center;
}
.table_title {
font-size: 22px;
font-weight: 900;
margin-bottom: 10px;
}
.table-header {
text-align: left;
}
.table-header > th {
height: 50px;
padding: 10px;
}
.herder-title {
width: 100%;
}
.herder-title .title {
float: left;
text-align: left;
}
.sign {
width: 100%;
margin-bottom: 15px;
padding-left: 20px;
}
.data {
width: 34%;
float: right;
font-size: 14px;
font-weight: 900;
}
.man{
width: 50%;
float: left;
font-size: 14px;
font-weight: 900;
}
.items {
text-align: center;
}
.td-input{
display: inline-block;
width: 100%;
height: 100%;
outline: none;
border: none;
}
.input{
outline: none;
border: none;
}
</style>
\ No newline at end of file
<template>
<div class="app-container">
<p>管理动态路由</p>
<el-button type="primary" @click="addFirst">添加第一级路由</el-button>
<el-tree
:data="data"
node-key="id"
default-expand-all
:props="defaultProps"
:expand-on-click-node="false">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<span>
<svg-icon v-if="!convertToBool(data.hidden)" icon-class="eye-open" />
<svg-icon v-else icon-class="eye" />
<el-button
type="text"
size="mini"
@click="() => append(data)"
v-if="!data.parentId || data.parentId == 0">
添加子路由
</el-button>
<el-button
type="text"
size="mini"
@click="() => edit(data)">
修改路由
</el-button>
<el-button
type="text"
size="mini"
@click="() => remove(data)">
删除路由
</el-button>
</span>
</span>
</el-tree>
<!--新建一级路由,新建子路由,编辑路由-->
<el-dialog :visible.sync="dialogVisible" :title="dialogTitle">
<el-form ref="form" :model="permission" label-width="100px" label-position="left" :rules="rules">
<el-form-item label="路径" prop="path">
<el-input v-model="permission.path" placeholder="路由path" />
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="permission.name" placeholder="路由名称" />
</el-form-item>
<el-form-item label="组件名称" prop="component">
<el-input v-model="permission.component" placeholder="组件名称" />
</el-form-item>
<el-form-item label="重定向路径" >
<el-input v-model="permission.redirect" placeholder="重定向路径" />
</el-form-item>
<el-form-item label="主题" prop="meta.title">
<el-input v-model="permission.meta.title" placeholder="路由主题" />
</el-form-item>
<el-form-item label="图标" >
<el-input v-model="permission.meta.icon" placeholder="路由图标" />
</el-form-item>
<el-form-item label="高亮菜单">
<el-input v-model="permission.meta.activeMenu" placeholder="高亮菜单" />
</el-form-item>
<el-checkbox v-model="permission.hidden" label="隐藏"></el-checkbox>
<el-checkbox v-model="permission.alwaysShow" label="显示"></el-checkbox>
<el-checkbox v-model="permission.meta.noCache" label="显示缓存"></el-checkbox>
<el-checkbox v-model="permission.meta.affix" label="affix"></el-checkbox>
<el-checkbox v-model="permission.meta.breadcrumb" label="面包屑"></el-checkbox>
</el-form>
<br/>
<div style="text-align:right;">
<el-button type="danger" @click="dialogVisible=false" >取消</el-button>
<el-button type="primary" @click="comfirmMenu">提交</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getMenuTree, addMenu, editMenu, deleteMenu } from '@/api/menu'
import { deepClone } from '@/utils'
import { pathValid } from '@/utils/myValidate'
let id = 1000;
const defaultPermisson = {
id: '',
parentId: 0,
path: '',
name: '',
component: 'layout',
redirect: '',
hidden: false,
alwaysShow: true,
meta: {
id: '',
title: '',
icon: '',
noCache: false,
affix: false,
breadcrumb: false,
activeMenu: '',
mnId: ''
}
}
export default {
data() {
return {
permission: Object.assign({}, defaultPermisson),
data: [],
dialogVisible: false,
dialogType: 'new',
dialogTitle: '新增一级菜单',
defaultProps: {
children: 'children',
label: 'title'
},
rules:{
path:[{
required: true, validator:pathValid, trigger: "blur"
}],
name:[{ required: true, message: "请输入名称", trigger: "blur" }],
component:[{ required: true, message: "请输入组件名称", trigger: "blur" }],
'meta.title':[{required: true, message: "请输入主题", trigger: "blur"}]
}
}
},
created(){
this.getMenuData()
},
methods: {
append(data) {
console.log(this.dialogTyp)
this.dialogType = 'new'
this.dialogTitle = '新增<' + data.title + '>的子菜单'
this.dialogVisible = true
this.permission = deepClone(defaultPermisson)
this.permission.parentId = data.id
},
remove(data) {
this.$confirm('确定要删除该菜单吗(子菜单会一起删除)?', 'Warning', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteMenu(data.id).then(res=>{
if(res.status == 'success'){
this.getMenuData()
this.$message({
type: 'success',
message: '删除成功!'
})
}else{
this.$message.error(res.data)
}
})
})
.catch(err => { console.error(err) })
},
edit(data) {
this.dialogType = 'edit'
this.dialogTitle = '修改<' + data.title + '>菜单'
this.permission = data;
this.dialogVisible = true
},
addFirst(){
this.permission = deepClone(defaultPermisson)
this.dialogType = 'new'
this.dialogVisible = true
this.dialogTitle = '新增一级菜单'
},
async comfirmMenu(){
this.$refs.form.validate((valid)=>{
if(valid){
if ( this.dialogType === 'edit') {
// 修改菜单信息
// 整理boolean属性
let submitMenu = deepClone(this.permission)
// 删除子菜单(子菜单不一起更新)
delete submitMenu.children
submitMenu.hidden = this.convertToNumber(submitMenu.hidden)
submitMenu.alwaysShow = this.convertToNumber(submitMenu.alwaysShow)
submitMenu.meta.noCache = this.convertToNumber(submitMenu.meta.noCache)
submitMenu.meta.affix = this.convertToNumber(submitMenu.meta.affix)
submitMenu.meta.breadcrumb = this.convertToNumber(submitMenu.meta.breadcrumb)
editMenu(submitMenu).then((res)=>{
if(res.status=="success"){
this.$message({
type: 'success',
message: '修改成功!'
})
}else{
this.$message({
type: 'error',
message: res.data
})
}
}).catch(err=>{
this.$message({
type: 'error',
message: '修改失败!'
})
})
this.dialogVisible = false
this.getMenuData()
this.permission = defaultPermisson
} else {
// 添加菜单信息
// 整理boolean属性
let submitMenu = deepClone(this.permission)
submitMenu.hidden = this.convertToNumber(submitMenu.hidden)
submitMenu.alwaysShow = this.convertToNumber(submitMenu.alwaysShow)
submitMenu.meta.noCache = this.convertToNumber(submitMenu.meta.noCache)
submitMenu.meta.affix = this.convertToNumber(submitMenu.meta.affix)
submitMenu.meta.breadcrumb = this.convertToNumber(submitMenu.meta.breadcrumb)
addMenu(submitMenu).then((res)=>{
if(res.status == "success"){
this.$message({
type: 'success',
message: '添加成功!'
})
this.getMenuData()
}else{
this.$message({
type: 'error',
message: res.data
})
}
}).catch(err=>{
this.$message({
type: 'error',
message: '添加失败!'
})
})
this.dialogVisible = false
this.permission = defaultPermisson
}
}
})
},
async getMenuData(){
// 请求后端,获取动态路由tree
let res = await getMenuTree()
// 按el-tree组件的要求,整理数据结构
this.data = this.generateRoutes(res.data)
},
generateRoutes(routes) {
const res = []
for (let route of routes) {
const data = route
// 将路由里面的title元数据,赋给data的title属性
data.title = route.meta && route.meta.title
// 将路由里面的相关属性的值,改成boolean类型
data.hidden = this.convertToBool(data.hidden)
data.alwaysShow = this.convertToBool(data.alwaysShow)
data.meta.noCache = this.convertToBool(data.meta.noCache)
data.meta.affix = this.convertToBool(data.meta.affix)
data.meta.breadcrumb = this.convertToBool(data.meta.breadcrumb)
// 递归子路由
if (route.children) {
data.children = this.generateRoutes(route.children)
}
res.push(data)
}
return res
},
convertToBool(v){
return v==0?false:true
},
convertToNumber(v){
return v?1:0
}
}
};
</script>
<style lang="scss" scoped>
.app-container {
.roles-table {
margin-top: 30px;
}
.permission-tree {
margin-bottom: 30px;
}
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
</style>
<template>
<div class="app-container">
<el-button type="primary" @click="handleAddRole" v-if="companyId != ''">新建角色</el-button>
<el-table :data="rolesList" style="width: 100%;margin-top:30px;" border>
<el-table-column align="center" label="序号" width="80">
<template slot-scope="scope">
{{
(roleQuery.pageNum - 1) * roleQuery.pageSize + scope.$index + 1
}}
</template>
</el-table-column>
<el-table-column align="center" label="角色名称" width="220">
<template slot-scope="scope">
{{ scope.row.rlName }}
</template>
</el-table-column>
<el-table-column align="header-center" label="角色描述">
<template slot-scope="scope">
{{ scope.row.rlDesc }}
</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="handleEdit(scope)" >编辑角色信息和分配角色路由</el-button>
<el-button type="danger" size="small" @click="handleDelete(scope)" >删除角色</el-button>
</template>
</el-table-column>
</el-table>
<div class="footer">
<el-pagination
:current-page.sync="roleQuery.pageNum"
:page-size="roleQuery.pageSize"
layout="total, prev, pager, next"
:total="total"
@current-change="handleCurrentChange"
/>
</div>
<el-dialog :visible.sync="dialogVisible" :title="dialogType">
<el-form :model="role" label-width="80px" label-position="left">
<el-form-item label="角色名称">
<el-input v-model="role.rlName" placeholder="角色名称" />
</el-form-item>
<el-form-item label="角色描述">
<el-input
v-model="role.rlDesc"
:autosize="{ minRows: 2, maxRows: 4}"
type="textarea"
placeholder="角色描述"
/>
</el-form-item>
<el-form-item label="路由树">
<el-tree
ref="tree"
:check-strictly="checkStrictly"
:data="routesData"
:props="defaultProps"
@check="checkTree"
show-checkbox
default-expand-all
node-key="id"
class="permission-tree"
/>
</el-form-item>
</el-form>
<div style="text-align:right;">
<el-button type="danger" @click="dialogVisible=false">取消</el-button>
<el-button type="primary" @click="confirmRole">提交</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import path from 'path'
import { deepClone } from '@/utils'
import { getRoles,addRole,deleteRole, updateRole} from '@/api/role'
import { getRoutes} from '@/api/auth'
const defaultRole = {
rlId: 0,
rlName: '',
rlDesc: '',
routes: [],
companyId:'',
}
export default {
data(){
return{
roleQuery: {
companyId: null,
pageNum: 1,
pageSize: 10
},
total: 0,
role: Object.assign({}, defaultRole),
rolesList:[],
routes:null,
dialogType:"新增角色",
dialogVisible:false,
checkStrictly: true,// 父子节点 checkbox的选择是否关联
defaultProps: { // 角色树
children: 'children',
label: 'title'
},
companyId:'',
}
},
created() {
this.roleQuery.companyId = this.$store.getters.companyId
this.companyId=this.$store.getters.companyId;
this.getRoutes()
this.getRoles()
},
computed: {
routesData() {
return this.routes
},
},
methods:{
//handleCurrentChange
handleCurrentChange(val){
this.roleQuery.pageNum = val
this.getRoles()
},
//获取角色
getRoles() {
getRoles (this.roleQuery).then((res)=>{
if(res.status == "success"){
this.rolesList = res.data.list
this.total = res.data.total
}else{
this.$message.error(res.data)
}
}).catch((error)=>{
this.$message.error("查询数据失败")
})
},
//获取路由
getRoutes() {
getRoutes().then((res)=>{
if(res.status == "success"){
this.serviceRoutes = res.data
this.routes = this.generateRoutes(res.data)
}
})
},
//处理路由数据
generateRoutes(routes, basePath = '/') {
const res = []
for (let route of routes) {
if(route.id != 1){
const data = {
path: path.resolve(basePath, route.path),
title: route.meta && route.meta.title,
id: route.id
}
if (route.children.length>0) {
data.children = this.generateRoutes(route.children, data.path)
}
res.push(data)
}
}
return res
},
//新增角色
handleAddRole(){
this.role = Object.assign({}, defaultRole)
this.role.companyId = this.$store.getters.companyId
if (this.$refs.tree) {
this.$refs.tree.setCheckedNodes([])
}
this.dialogType = '添加角色'
this.dialogVisible = true
},
//编辑角色
handleEdit(scope){
this.dialogType = '编辑角色'
this.dialogVisible = true
console.log(scope)
this.role = deepClone(scope.row)
this.$nextTick(() => {
const selectedKeys = this.generateArr(this.role.routes)
this.$refs.tree.setCheckedKeys(selectedKeys)
})
},
generateArr(routes) {
let data = []
routes.forEach(route => {
if (route.children) {
const temp = this.generateArr(route.children)
if (temp.length > 0) {
data = [...data, ...temp]
}
}else{
data.push(route.id)
}
})
return data
},
//删除角色
handleDelete({ $index, row }){
this.$confirm('确定要删除该角色吗?', 'Warning', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
deleteRole(row.rlId).then((res)=>{
if(res.status == 'success'){
this.$message.success("删除成功")
this.rolesList.splice($index, 1)
}else{
this.$message.error(res.data)
}
}).catch((error)=>{
this.$message.error("删除失败")
})
})
.catch(err => { console.error(err) })
},
//提交
confirmRole(){
const isEdit = this.dialogType === '编辑角色'
// 获取选中权限树id
const checkedKeys = this.$refs.tree.getCheckedKeys()
if (checkedKeys){
let routes = []
checkedKeys.forEach(key => {
let obj = {id:key}
routes.push(obj)
})
// 将menu对象数组,赋给要添加的role
this.role.routes = routes
}
if (isEdit) { // 修改角色
updateRole(this.role).then((res)=>{
if(res.status=="success"){
this.$message.success("修改成功")
this.getRoles()
}else{
this.$message.error(res.data)
}
}).catch((error)=>{
this.$message.error("修改失败")
})
}else{
//新增角色
addRole(this.role).then((res)=>{
if(res.status=="success"){
this.$message.success("添加成功")
this.getRoles()
}else{
this.$message.error(res.data)
}
}).catch((error)=>{
this.$message.error("添加失败")
})
}
this.dialogVisible = false
},
//点击树
checkTree(data){
const node = this.$refs.tree.getNode(data.id);
this.setNode(node);
},
setNode(node) {
if (node.checked) {
//如果当前是选中checkbox,则递归设置父节点和父父节点++选中
this.setParentNode(node);
} else {
//当前是取消选中,将所有子节点都取消选中
this.setChildenNode(node);
}
},
setParentNode(node) {
if (node.parent) {
for (const key in node) {
if (key === "parent") {
node[key].checked = true;
this.setParentNode(node[key]);
}
}
}
},
setChildenNode(node) {
let len = node.childNodes.length;
for (let i = 0; i < len; i++) {
node.childNodes[i].checked = false;
this.setChildenNode(node.childNodes[i]);
}
},
}
}
</script>
<style scoped>
.footer {
text-align: right;
}
</style>
\ No newline at end of file
<template>
<div class="container">
<el-tabs v-model="activeName" @tab-click="handleClick()">
<el-tab-pane label="个人信息" name="first">
<el-row>
<el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="20">
<el-form ref="userform" :model="userData" :rules="rules" label-width="120px">
<el-form-item label="姓名" prop="userName">
<el-input v-model="userData.userName" :disabled="userupdata"></el-input>
</el-form-item>
<el-form-item label="性别" prop="userSex">
<el-select v-model="userData.userSex" placeholder="请选择" :disabled="userupdata">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="账号" prop="userAdmin">
<el-input v-model="userData.userAdmin" :disabled="userupdata"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="userPhone">
<el-input v-model="userData.userPhone" :disabled="userupdata"></el-input>
</el-form-item>
<el-form-item label="身份证号" prop="userIdentification">
<el-input v-model="userData.userIdentification" :disabled="userupdata"></el-input>
</el-form-item>
<el-form-item label="银行卡号">
<el-input v-model="userData.userBankNumber" disabled></el-input>
</el-form-item>
<el-form-item label="开户银行">
<el-input v-model="userData.userBankAddress" disabled></el-input>
</el-form-item>
<el-form-item label="现任角色">
<template>
<el-tag v-for="item in userData.roleList" :key="item.rlId">{{item.rlName}}</el-tag>
</template>
</el-form-item>
</el-form>
<el-button type="info" v-if="userupdata" icon="el-icon-edit" @click="userupdata = false">修改</el-button>
<el-button type="warning" v-if="!userupdata" @click="cancelUpdateUser">取消</el-button>
<el-button type="success" v-if="!userupdata" icon="el-icon-upload2" @click="updateUser">提交</el-button>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="修改密码" name="second">
<el-row>
<el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="20">
<el-form ref="passwordform" :model="passwordData" label-width="120px" :rules="rules">
<el-form-item label="原密码" prop="originalPassword">
<el-input type="password" show-password v-model="passwordData.originalPassword"></el-input>
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input type="password" show-password v-model="passwordData.newPassword"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input type="password" show-password v-model="passwordData.confirmPassword"></el-input>
</el-form-item>
</el-form>
<el-button type="primary" icon="el-icon-refresh-left" @click="passReset">重置信息</el-button>
<el-button type="success" icon="el-icon-upload2" @click="changePassword">更换密码</el-button>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import {chinaIdentityValid,checkPhone} from '@/utils/myValidate'
import {getOneself,update,passwordReset} from "@/api/user"
export default {
name:"PersonalVue",
data(){
return{
activeName:'first',
userData:{
userId:null,
userName:null,
userSex:null,
userAdmin:null,
userPhone:null,
userIdentification:null,
userBankNumber:null,
userBankAddress:null,
roleList:null,
},
backupsData:{},
userupdata:true,
passwordData:{
originalPassword:null,
newPassword:null,
confirmPassword:null,
},
options: [
{
value: '1',
label: ''
},
{
value: '0',
label: ''
},
],
rules:{
userName:[
{ required: true, message: '请输入管理员名称', trigger: 'blur' },
],
userSex:[
{ required: true, message: '请选择性别', trigger: 'change' },
],
userAdmin:[
{ required: true, message: '请输入账号', trigger: 'blur' },
],
userPhone:[
{required:true, validator:checkPhone, trigger: ['blur', 'change']},
],
userIdentification:[
{required:true, validator:chinaIdentityValid, trigger:'blur'},
],
originalPassword:[
{ required: true, message: '请输入原密码', trigger: 'blur' },
],
newPassword:[
{ required: true, message: '请输入新密码', trigger: 'blur' },
],
confirmPassword:[
{ required: true, message: '请输入确认密码', trigger: 'blur' },
]
}
}
},
created(){
this.userData.userId = this.$store.getters.urId
this.getUser()
},
methods:{
//切换
handleClick(tab, event){
console.log(tab, event)
this.userupdata = true
this.userData = this.backupsData
this.passReset()
},
//密码重置信息
passReset(){
this.passwordData={
originalPassword:null,
newPassword:null,
confirmPassword:null,
}
},
//获取个人信息
getUser(){
getOneself(this.userData).then((res)=>{
if(res.status == "success"){
this.userData = res.data
this.backupsData = Object.assign({}, res.data)
}else{
this.$message.error(res.data)
}
}).catch((error)=>{
this.$message.error("获取个人信息失败")
})
},
//修改个人信息
updateUser(){
this.$refs.userform.validate((valida)=>{
if(valida){
update(this.userData).then((res)=>{
if(res.status == "success"){
this.$message.success("修改成功")
this.getUser()
this.userupdata = true
}else{
this.$message.error(res.data)
}
}).catch((error)=>{
this.$message.error("修改失败")
})
}
})
},
//取消修改个人信息
cancelUpdateUser(){
this.userupdata = true
this.userData = Object.assign({}, this.backupsData)
},
//更换密码
changePassword(){
this.$refs.passwordform.validate((valida)=>{
if(valida){
//先判断确认密码是都等于新密码
if(this.passwordData.newPassword == this.passwordData.confirmPassword){
let param = {
userId:this.userData.userId,
originalPassword:this.passwordData.originalPassword,
newPassword:this.passwordData.newPassword
}
passwordReset(param).then((res)=>{
if(res.status == "success"){
this.$message.success("修改成功")
this.$store.dispatch('user/logout').then(res=>{
this.$router.push('/login')
})
}else{
this.$message.error(res.data)
}
}).catch((error)=>{
this.$message.error("修改失败")
})
}else{
this.$message.error("新密码和确认密码不一样")
}
}
})
}
}
}
</script>
<style scoped>
.container{
padding: 10px;
}
</style>
\ No newline at end of file
<template>
<!-- 负责项目 -->
<div class="container">
<div class="header">
<el-form :inline="true" :model="projectQurey">
<el-form-item label="项目名称">
<el-input
v-model="projectQurey.projectName"
placeholder="项目名称"
></el-input>
</el-form-item>
<el-form-item label="项目编号">
<el-input
v-model="projectQurey.projectNumber"
placeholder="项目编号"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="qurey()"
>查询</el-button
>
<el-button
type="primary"
icon="el-icon-refresh-right"
@click="reset()"
>重置</el-button
>
<el-button
type="success"
icon="el-icon-circle-plus-outline"
@click="addproject()"
v-show="false"
>添加项目</el-button
>
</el-form-item>
</el-form>
</div>
<div class="conter">
<el-table
:data="projectList"
style="width: 100%; text-align: center"
border
>
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" class="demo-table-expand">
<el-form-item label="合作方:">
<span>{{ props.row.projectPartyb }}</span>
</el-form-item>
<el-form-item label="项目详情:">
<span>{{ props.row.projectInformation }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="序号" width="50px">
<template slot-scope="scope">
{{
(projectQurey.pageNum - 1) * projectQurey.pageSize + scope.$index + 1
}}
</template>
</el-table-column>
<el-table-column prop="projectName" label="项目名称" />
<el-table-column prop="projectNumber" label="项目编号" />
<el-table-column label="项目合同金额" >
<template slot-scope="scope" >
<p class="amounttext">{{scope.row.projectAmount}}</p>
</template>
</el-table-column>
<el-table-column label="项目总收入金额" align="center">
<el-table-column label="金额">
<template slot-scope="scope" >
<p class="incometext">{{scope.row.projectIncome}}</p>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope" >
<el-button size="mini" type="success" @click="showIncome(scope.row)">查看详情</el-button>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="项目总支出金额" align="center">
<el-table-column label="金额">
<template slot-scope="scope" >
<p class="expendtext">{{scope.row.projectExpend}}</p>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope" >
<el-button size="mini" type="danger" @click="showExpend(scope.row)">查看详情</el-button>
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="projectExpense" label="项目总报销金额" >
<template slot-scope="scope" >
<p class="expendtext">{{scope.row.projectExpense}}</p>
</template>
</el-table-column>
<el-table-column prop="projectStartTime" label="项目开始时间" align="center" :formatter="timestampToTime"/>
<el-table-column prop="projectEndTime" label="项目结束时间" align="center" :formatter="timestampToTime"/>
<el-table-column prop="projectAmount" label="操作" align="center">
<template slot-scope="scope">
<el-button style="margin:5px" size="mini" icon="el-icon-edit" type="info" @click="updataProject(scope.row)">修改信息</el-button>
<el-button style="margin:5px" size="mini" icon="el-icon-coin" type="primary" @click="member(scope.row)">成员管理</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="footer">
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="projectQurey.pageNum"
:page-size="projectQurey.pageSize"
layout="total, prev, pager, next"
:total="total"
>
</el-pagination>
</div>
</div>
</template>
<script>
import { selectBYPression } from '@/api/project'
export default {
data(){
return{
projectQurey:{
projectName:null,
projectNumber:null,
pageNum: 1,
pageSize: 10,
userId:null,
memberPression:0
},
projectList:[],
total:null,
}
},
created(){
this.projectQurey.userId = this.$store.getters.urId
this.getProjectList();
},
methods:{
//获取项目列表
getProjectList(){
selectBYPression(this.projectQurey).then((res)=>{
if(res.success){
//请求成功,获取到了数据
this.projectList = res.data.list
this.total = res.data.total
}else{
this.$message.error(res.msg)
}
}).catch((error)=>{
this.$message.error("获取数据失败")
})
},
//查询
qurey(){
this.projectQurey.pageNum = 1
this.getProjectList()
},
//重置
reset(){
this.projectQurey = {
projectName:null,
projectNumber:null,
pageNum: 1,
pageSize: 10,
userId:null,
memberPression:0
}
this.projectQurey.userId = this.$store.getters.urId
this.getProjectList()
},
//添加项目
addproject(){
this.$router.push('/projectAdd')
},
//分页
handleCurrentChange(val){
this.projectQurey.pageNum = val
this.getProjectList()
},
//修改项目
updataProject(data){
this.$router.push({
path: '/projectUpdata',
query:{
id:data.projectId,
}
})
},
//时间处理
timestampToTime(row,column,cellValue) {
return cellValue.split(' ')[0]
},
//查看收入详情列表
showIncome(data){
this.$router.push({
path: '/incomeList',
query:{
id:data.projectId,
backid:1
}
})
},
//成员管理
member(data){
this.$store.dispatch("settings/setMemberId",1)
this.$router.push({
path: '/memberList',
query:{
id:data.projectId,
}
})
},
//查看支出详情列表
showExpend(data){
this.$router.push({
path: '/expendList',
query:{
id:data.projectId,
backlistid:1
}
})
}
}
};
</script>
<style scoped>
.container {
padding: 10px;
}
.conter {
margin-bottom: 10px;
}
.footer {
text-align: right;
}
.incometext{
color: #13ce66;
font-weight: 600;
font-size: 15px;
}
.amounttext{
color: #1890ff;
font-weight: 600;
font-size: 15px;
}
.expendtext{
color: rgb(255, 0, 0);
font-weight: 600;
font-size: 15px;
}
</style>
\ No newline at end of file
<template>
<div class="container">
<el-row>
<el-col :xl="8" :lg="10" :md="8" :sm="12" :xs="24">
<el-form ref="form" :model="expendFrom" label-width="120px" :rules="rules">
<el-form-item label="项目名称" prop="projectName">
<el-input v-model="expendFrom.projectName" disabled></el-input>
</el-form-item>
<el-form-item label="支出类别" prop="expendType">
<el-select v-model="expendFrom.expendType" placeholder="请选择">
<el-option
v-for="item in typeList"
:key="item.typeId"
:label="item.typeName"
:value="item.typeId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="发票编号" prop="incomebaoxioa">
<el-select
v-model="invoiceListAdd"
multiple
filterable
allow-create
default-first-option
placeholder="请选择发票编号"
>
<el-option
v-for="item in getinvoivelist"
:key="item.invoiceId"
:label="item.number"
:value="item.invoiceId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="支出金额" prop="expendMoney">
<el-input v-model="expendFrom.expendMoney"></el-input>
</el-form-item>
<el-form-item label="支出时间" prop="expendTime">
<el-date-picker
v-model="expendFrom.expendTime"
type="datetime"
placeholder="选择日期时间"
@change="timestampToTime()"
></el-date-picker>
</el-form-item>
<el-form-item label="支出对象" prop="expendObject">
<el-input v-model="expendFrom.expendObject"></el-input>
</el-form-item>
<el-form-item label="支出内容" prop="expendBody">
<el-input v-model="expendFrom.expendBody"></el-input>
</el-form-item>
<el-form-item label="支出备注" prop="expendRemarks">
<el-input v-model="expendFrom.expendRemarks"></el-input>
</el-form-item>
<el-form-item label="支出详情" prop="expendInformation">
<el-input
type="textarea"
:autosize="{ minRows: 4, maxRows: 8 }"
v-model="expendFrom.expendInformation"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" icon="el-icon-upload2" @click="submitForm()">提交</el-button>
<el-button type="info" icon="el-icon-refresh-left" @click="resetForm()">重置信息</el-button>
<el-button type="primary" @click="drawerAdd()">添加报销单</el-button>
<el-button @click="back()">返回</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<!-- 报销单 -->
<el-drawer title="发票单列表" :visible.sync="drawer" size="100%">
<!-- 表格区域 -->
<div class="drawer" v-show="isgetid==0" style="margin-left:5%">
<el-button type="primary" @click="Reimbursement()" style="margin:20px 0px">添加报销单</el-button>
<el-table :data="invoicegetList.list" border style="width:90%">
<el-table-column prop="invoiceId" label="序号" width="80"></el-table-column>
<el-table-column prop="number" label="发票号码" width="width"></el-table-column>
<el-table-column prop="code" label="发票代码"></el-table-column>
<el-table-column prop="time" label="发票时间"></el-table-column>
<el-table-column prop="category" label="发票类型">
<template slot-scope="scope">
<el-tag
:type="scope.row.category == '0' ? 'info':'primary' "
>{{scope.row.category== '0' ? '普票':'专票'}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="type" label="发票类别">
<template slot-scope="scope">
<el-tag
:type="scope.row.type== '0' ? 'success' : scope.row.type == '1' ? 'danger':'warning' "
>{{scope.row.type == '0' ? '收入' : scope.row.type == '1' ? '支出':'报销'}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="mone" label="发票金额"></el-table-column>
<el-table-column prop="status" label="发票状态">
<template slot-scope="scope">
<el-tag
:type="scope.row.status == '0' ? 'info':'warning' "
>{{ scope.row.status==0 ? '未报销': "已报销"}}</el-tag>
</template>
</el-table-column>
</el-table>
<!-- 分页-->
<el-pagination
style="margin:0px auto"
@current-change="getincomeSelectlist"
layout="total, prev, pager, next"
:total="invoicegetList.total"
></el-pagination>
</div>
<!-- 添加区域 -->
<div class="getadd" v-show="isgetid==1" style="margin-left:5%">
<el-row>
<el-col :xl="8" :lg="10" :md="8" :sm="12" :xs="24">
<el-form
style="width:100%;margin:30px 0px"
:model="addTO"
:rules="rules"
ref="addTO"
label-width="80px"
class="demo-ruleForm"
>
<el-form-item label="发票号码" prop="number">
<el-input v-model="addTO.number" oninput="value=value.replace(/^\.+|[^\d.]/g,'')"></el-input>
</el-form-item>
<el-form-item label="发票代码" prop="code">
<el-input v-model="addTO.code"></el-input>
</el-form-item>
<el-form-item label="发票时间" required>
<el-date-picker
v-model="addTO.time"
type="datetime"
placeholder="选择日期时间"
@change="timestampToTime1()"
></el-date-picker>
</el-form-item>
<el-form-item label="发票类型" prop="category">
<el-select v-model="addTO.category" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.category"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="发票金额" prop="mone">
<el-input v-model="addTO.mone"></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" icon="el-icon-folder-checked" @click="getlistForm()">立即创建</el-button>
<el-button type="info" icon="el-icon-refresh" @click="delectdd">重置信息</el-button>
<el-button type="primary" icon="el-icon-refresh-left" @click="cancel()">取消</el-button>
</el-form-item>
</el-form>
</el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="10" :xl="11">
<el-upload
class="upload-demo"
ref="upload"
:file-list="fileList"
action="http://192.168.10.109:7080/file/uploadFile"
:auto-upload="false"
:data="proutlist"
style="margin-left:90px;"
>
<el-button
slot="trigger"
size="small"
type="primary"
style="margin-left:20px;margin-top:40px;"
>选取文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</el-col>
</el-row>
</div>
</el-drawer>
</div>
</template>
<script>
import {
selectByProjectId,
insertList,
queryBypageIncomeAdd,
selectAllBystatus,
updatesubmit
} from "@/api/project";
import { selectAll } from "@/api/type";
import { insert } from "@/api/expend";
export default {
data() {
return {
expendFrom: {
expendBody: null,
expendInformation: null,
expendMoney: null,
expendObject: null,
expendRemarks: null,
expendTime: null,
expendType: null,
projectId: null,
userId: null,
projectName: null
},
typeList: [],
projectData: {},
rules: {
projectName: [
{ required: true, message: "请选择项目", trigger: "change" }
],
expendType: [
{ required: true, message: "请选择支出类型", trigger: "change" }
],
expendMoney: [
{ required: true, message: "请输入支出金额", trigger: "blur" }
],
expendTime: [
{ required: true, message: "请选择支出时间", trigger: "change" }
]
},
companyId: 0,
isgetid: 0,
drawer: false, //抽屉的显示与隐藏
typeList: [],
projectData: {},
options: [
{
value: 0,
category: "普票"
},
{
value: 1,
category: "专票"
}
],
//添加发票的数组
addTO: {
category: 0,
code: null,
companyId: null,
mone: null,
number: null,
status: 0,
time: null,
type: 1
},
//表单验证内容
rules: {
number: [
{ required: true, message: "请输入发票号码", trigger: "change" }
],
code: [
{ required: true, message: "请输入发票代码", trigger: "change" }
],
category: [
{
required: true,
message: "请至少选择一个发票类型",
trigger: "change"
}
],
type: [
{
required: true,
message: "请至少选择一个发票类别",
trigger: "change"
}
],
mone: [{ required: true, message: "请输入发票金额", trigger: "change" }]
},
//查询发票数据
invoiceList: {
category: null,
code: null,
companyId: null,
invoiceId: null,
mone: null,
number: null,
orders: [
{
asc: null,
column: null
}
],
pageNum: 1,
pageSize: 10,
searchCount: null,
status: null,
time: null,
type: null
},
//发票状态
status: 0,
//发票的数组
invoicegetList: [],
//发票编号数组
getinvoivelist: [],
//收集发票编号
invoiceListAdd: {},
//查询发票编号的数组
getinvoiveId: {
companyId: null,
type: 1
},
pageNum: 10,
total: 1,
//收集数据
newList: [],
//保存图片
proutlist: {
Id: 1,
status: 1
},
fileList:[]
};
},
computed: {
projectId() {
return this.$route.query.id;
}
},
created() {
this.expendFrom.userId = this.$store.getters.urId;
this.addTO.companyId = this.$store.getters.companyId;
this.invoiceList.companyId = this.$store.getters.companyId;
this.getinvoiveId.companyId = this.$store.getters.companyId;
this.getTypeList();
this.getProject();
this.Selectinsertlsit();
},
methods: {
//获取支出类型
getTypeList() {
let param = {
companyId: this.$store.getters.companyId,
typeCategory: 1
};
selectAll(param)
.then(res => {
if (res.success) {
this.typeList = res.data;
} else {
this.$message.error(res.msg);
this.back();
}
})
.catch(error => {
this.$message.error("获取类型失败");
this.back();
});
},
//获取项目
getProject() {
let param = {
projectId: this.projectId
};
selectByProjectId(param)
.then(res => {
if (res.success) {
this.projectData = res.data;
this.expendFrom.projectName = res.data.projectName;
this.expendFrom.projectId = res.data.projectId;
} else {
this.$message.error(res.msg);
this.back();
}
})
.catch(error => {
this.$message.error("获取项目失败");
this.back();
});
},
//提交
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
if (this.invoiceListAdd.length < 0) {
insert(this.expendFrom)
.then(res => {
if (res.success) {
this.$message.success(res.msg);
this.$store.dispatch("tagsView/delView", this.$route);
this.$router.push({
path: "/expendList",
query: {
id: this.$route.query.id
}
});
} else {
this.$message.error(res.msg);
}
})
.catch(error => {
this.$message.error("新建失败");
});
} else {
insert(this.expendFrom)
.then(res => {
if (res.success) {
let list = [];
this.invoiceListAdd.forEach(item => {
list.push({
invoiceId: item,
expendId: res.data,
status: 1
});
});
updatesubmit(list)
.then(res => {
if (res.success) {
this.$message.success(res.msg);
this.$store.dispatch("tagsView/delView", this.$route);
this.$router.push({
path: "/expendList",
query: {
id: this.$route.query.id
}
});
} else {
this.$message.error(res.msg);
}
})
.catch(error => {
this.$message.error("新建失败");
});
} else {
this.$message.error(res.msg);
}
})
.catch(error => {
this.$message.error("新建失败");
});
}
}
});
},
//重置
resetForm() {
this.$refs.form.resetFields();
this.expendFrom.projectName = this.projectData.projectName;
this.expendFrom.projectId = this.projectData.projectId;
},
//返回
back() {
this.$store.dispatch("tagsView/delView", this.$route);
this.$router.push({
path: "/expendList",
query: {
id: this.$route.query.id,
backlistid:this.$route.query.backlistid
}
});
},
//时间处理 yyyy-MM-dd hh:mm:ss
timestampToTime() {
var date = this.expendFrom.expendTime;
var Y = date.getFullYear() + "-";
var M =
(date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
var D =
(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
var h =
(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
var m =
(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
":";
var s =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
this.expendFrom.expendTime = Y + M + D + h + m + s;
},
timestampToTime1() {
var date = this.addTO.time;
var Y = date.getFullYear() + "-";
var M =
(date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
var D =
(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
var h =
(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
var m =
(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
":";
var s =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
this.addTO.time = Y + M + D + h + m + s;
},
//发票页面的按钮事件
drawerAdd() {
this.drawer = true;
this.getincomeSelectlist();
},
//发票的分页查询
getincomeSelectlist(pager = 1) {
this.invoiceList.pageNum = pager
queryBypageIncomeAdd(this.invoiceList)
.then(res => {
if (res.success) {
this.invoicegetList = res.data;
this.total = res.data.total;
} else {
this.$message.errror(res.msg);
}
})
.catch(error => {
this.$message.error("查询发票数据失败");
});
},
//分页
handleSizeChange(val) {
this.invoicegetList.pageSize = pageSize;
},
handleCurrentChange(currentPage) {
this.invoicegetList.pageNum = currentPage;
},
//取消隐藏tatle
cancel() {
console.log(this.isgetid);
this.isgetid = 0;
this.getincomeSelectlist();
},
//显示报销单添加页面
Reimbursement() {
this.isgetid = 1;
},
//发票提交页面的提交
getlistForm() {
this.$refs.addTO.validate(valid => {
if (valid) {
insertList(this.addTO)
.then(res => {
if (res.success) {
this.proutlist.Id = res.data;
//提交图片
this.$refs.upload.submit();
this.$message.success(res.msg);
this.isgetid = 0;
this.delectdd()
this.getincomeSelectlist();
} else {
this.$message.error(res.msg);
}
})
.catch(error => {
this.$message.error("新建失败");
});
}
});
},
//数据清除
delectdd() {
this.addTO ={
category: 0,
code: null,
companyId: null,
mone: null,
number: null,
status: 0,
time: null,
type: 1
}
},
//查询发票编号
Selectinsertlsit() {
selectAllBystatus(this.getinvoiveId)
.then(res => {
if (res.success) {
this.getinvoivelist = res.data;
} else {
this.$message.error(res.msg);
this.back();
}
})
.catch(error => {
this.$message.error("获取发票编号失败");
this.back();
});
}
}
};
</script>
<style scoped>
.container {
padding: 10px;
}
</style>
\ No newline at end of file
<template>
<div class="container">
<div class="header">
<el-form :inline="true" :model="expendQurey">
<el-form-item label="收入对象">
<el-input v-model="expendQurey.expendObject" placeholder="收入对象"></el-input>
</el-form-item>
<el-form-item label="收入类别">
<el-select v-model="expendQurey.expendType">
<el-option
v-for="item in options"
:key="item.typeId"
:label="item.typeName"
:value="item.typeId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="收入内容">
<el-input v-model="expendQurey.expendBody" placeholder="收入内容"></el-input>
</el-form-item>
<el-form-item label="收入时间">
<el-date-picker
v-model="mainTime"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="time"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="qurey()">查询</el-button>
<el-button type="primary" icon="el-icon-refresh-right" @click="reset()">重置</el-button>
<el-button
type="success"
icon="el-icon-circle-plus-outline"
@click="addexpend()"
v-if="state != 0"
>新增支出</el-button>
<el-button @click="back()">返回</el-button>
</el-form-item>
</el-form>
</div>
<div class="conter">
<el-table :data="expendList" style="width: 100%; text-align: center" border>
<el-table-column label="序号" width="50px">
<template slot-scope="scope">
{{
(expendQurey.pageNum - 1) * expendQurey.pageSize +
scope.$index +
1
}}
</template>
</el-table-column>
<el-table-column prop="projectName" label="项目名称" />
<el-table-column prop="expendObject" label="支出对象" />
<el-table-column prop="expendMoney" label="支出金额" />
<el-table-column prop="typeName" label="支出类别">
<template slot-scope="scope">
<el-tag effect="dark">{{ scope.row.typeName }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="expendBody" label="支出内容" />
<el-table-column prop="expendTime" label="支出时间" />
<el-table-column prop="expendInformation" label="支出详情" />
<el-table-column prop="expendRemarks" label="支出备注" />
<el-table-column prop="prop" label="发票图片">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="ReviseImage(scope.row)">点击查看</el-button>
</template>
</el-table-column>
<el-table-column label="操作人员">
<template slot-scope="scope">
<el-tag effect="plain">{{ scope.row.userName }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="projectAmount" label="操作" v-if="state != 0">
<template slot-scope="scope">
<el-button
style="margin: 5px"
size="mini"
icon="el-icon-edit"
type="info"
@click="updatain(scope.row)"
>修改信息</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="footer">
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="expendQurey.pageNum"
:page-size="expendQurey.pageSize"
layout="total, prev, pager, next"
:total="total"
></el-pagination>
</div>
<div>
<!--抽屉-->
<el-drawer
title="发票详情"
:visible.sync="drawer"
:direction="direction"
size="40%"
>
<!-- filePath-->
<el-table :data="getinvoivelist" style="width: 100%; text-align: center" border>
<el-table-column type="index" label="序号" width="40"></el-table-column>
<el-table-column prop="prop" label="发票详情">
<template slot-scope="scope">
<el-image
style="width: 100px; height: 100px"
:src="scope.row.filePath"
:preview-src-list="[scope.row.filePath]"
></el-image>
</template>
</el-table-column>
</el-table>
</el-drawer>
</div>
</div>
</template>
<script>
import { selectAll } from "@/api/type";
import { selectByProjectId } from "@/api/expend";
import { selectAllById } from "@/api/project";
export default {
data() {
return {
expendQurey: {
projectId: null,
pageNum: 1,
pageSize: 10,
expendObject: null,
expendType: null,
expendBody: null,
expendTimeStart: null,
expendTimeEnd: null
},
expendList: [],
options: [],
mainTime: null,
total: 0,
//抽屉
drawer: false,
direction: "rtl",
//查询图片给的值
getinvoiveId: {
companyId: null,
expendId: 0
},
//图片的数组
getinvoivelist: [],
//图片数组
srcList: [],
//返回的标记
backlistid:null
};
},
computed: {
state: function() {
return this.$route.query.state;
}
},
created() {
this.getinvoiveId.companyId = this.$store.getters.companyId;
this.expendQurey.projectId = this.$route.query.id;
this.backlistid=this.$route.query.backlistid
this.getexpend();
this.getTypeList();
},
methods: {
//获取支出情况
getexpend() {
selectByProjectId(this.expendQurey)
.then(res => {
if (res.success) {
this.expendList = res.data.list;
this.total = res.data.total;
} else {
this.$message.errror(res.msg);
}
})
.catch(error => {
this.$message.error("查询数据失败");
});
},
//获取支出类型
getTypeList() {
let param = {
companyId: this.$store.getters.companyId,
typeCategory: 1
};
selectAll(param)
.then(res => {
if (res.success) {
this.options = res.data;
} else {
this.$message.error(res.msg);
this.back();
}
})
.catch(error => {
this.$message.error("获取类型失败");
this.back();
});
},
//换页
handleCurrentChange(val) {
this.expendQurey.pageNum = val;
},
//新增支出信息
addexpend() {
this.$router.push({
path: "/expendAdd",
query: {
id: this.$route.query.id,
backlistid:this.backlistid
}
});
},
//修改支出信息
updatain(data) {
this.$router.push({
path: "/expendUpdata",
query: {
id: data.expendId,
projectId: this.$route.query.id
}
});
},
//时间处理
time(val) {
if (val == null) {
this.expendQurey.expendTimeStart = null;
this.expendQurey.expendTimeEnd = null;
} else {
this.expendQurey.expendTimeStart = this.timestampToTime(val[0]);
this.expendQurey.expendTimeEnd = this.timestampToTime(val[1]);
}
},
//时间处理
timestampToTime(date) {
var Y = date.getFullYear() + "-";
var M =
(date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
var D =
(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
var h =
(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
var m =
(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
":";
var s =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return Y + M + D + h + m + s;
},
//查询
qurey() {
this.expendQurey.pageNum = 1;
this.getexpend();
},
//重置
reset() {
this.expendQurey.expendTimeStart = null;
this.expendQurey.expendTimeEnd = null;
this.mainTime = null;
this.expendQurey.expendObject = null;
this.expendQurey.expendType = null;
this.expendQurey.expendBody = null;
this.qurey();
},
//查看图片的方法
ReviseImage(row) {
this.drawer = true;
this.getinvoiveId.expendId = row.expendId;
//console.log(process.env.VUE_APP_BASE_API);
this.Selectinsertlsit();
},
//查询发票图片
Selectinsertlsit() {
console.log(selectAllById(this.getinvoiveId));
selectAllById(this.getinvoiveId)
.then(res => {
if (res.success) {
this.getinvoivelist = res.data;
this.getinvoivelist.forEach(e => {
e.filePath = process.env.VUE_APP_BASE_API + e.filePath;
});
console.log(this.getinvoivelist);
} else {
this.$message.error(res.msg);
this.back();
}
})
.catch(error => {
this.$message.error("获取发票图片失败");
this.back();
});
},
back(){
if(this.backlistid==0){
this.$router.push({
path: "/projectList",
query: {
id: this.$route.query.id
}
});
}else if (this.backlistid==1) {
this.$router.push({
path: "/beresponsibleforList",
query: {
id: this.$route.query.id
}
});
}else{
this.$router.push({
path: "/participateinList",
query: {
id: this.$route.query.id
}
});
}
}
}
};
</script>
<style scoped>
.container {
padding: 10px;
}
.conter {
margin-bottom: 10px;
}
.footer {
text-align: right;
}
</style>
\ No newline at end of file
<template>
<div class="container">
<el-row>
<el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
<el-form
ref="form"
:model="expendFrom"
label-width="120px"
:rules="rules"
>
<el-form-item label="项目名称" prop="projectName">
<el-input v-model="expendFrom.projectName" disabled></el-input>
</el-form-item>
<el-form-item label="支出类别" prop="expendType">
<el-select v-model="expendFrom.expendType" placeholder="请选择">
<el-option
v-for="item in typeList"
:key="item.typeId"
:label="item.typeName"
:value="item.typeId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="支出金额" prop="expendMoney">
<el-input v-model="expendFrom.expendMoney"></el-input>
</el-form-item>
<el-form-item label="支出时间" prop="expendTime">
<el-date-picker
v-model="expendFrom.expendTime"
type="datetime"
placeholder="选择日期时间"
@change="timestampToTime()"
>
</el-date-picker>
</el-form-item>
<el-form-item label="支出对象" prop="expendObject">
<el-input v-model="expendFrom.expendObject"></el-input>
</el-form-item>
<el-form-item label="支出内容" prop="expendBody">
<el-input v-model="expendFrom.expendBody"></el-input>
</el-form-item>
<el-form-item label="支出备注" prop="expendRemarks">
<el-input v-model="expendFrom.expendRemarks"></el-input>
</el-form-item>
<el-form-item label="支出详情" prop="expendInformation">
<el-input
type="textarea"
:autosize="{ minRows: 4, maxRows: 8 }"
v-model="expendFrom.expendInformation"
></el-input>
</el-form-item>
<el-form-item>
<el-button
type="success"
icon="el-icon-upload2"
@click="submitForm()"
>提交</el-button
>
<el-button
type="danger"
icon="el-icon-delete-solid"
@click="deleteExpend()"
>删除</el-button
>
<el-button @click="back()">返回</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
import { selectAll } from "@/api/type";
import { update,selectById,del} from "@/api/expend";
export default {
data() {
return {
expendFrom: {
expendBody: null,
expendInformation: null,
expendMoney: null,
expendObject: null,
expendRemarks: null,
expendTime: null,
expendType: null,
projectId: null,
userId: null,
projectName: null,
},
typeList: [],
projectData: {},
rules: {
projectName: [
{ required: true, message: "请选择项目", trigger: "change" },
],
expendType: [
{ required: true, message: "请选择支出类型", trigger: "change" },
],
expendMoney: [
{ required: true, message: "请输入支出金额", trigger: "blur" },
],
expendTime: [
{ required: true, message: "请选择支出时间", trigger: "change" },
],
},
};
},
computed: {
expendId() {
return this.$route.query.id;
},
},
created() {
this.expendFrom.userId = this.$store.getters.urId;
this.getTypeList();
this.getexpend();
},
methods: {
//获取支出类型
getTypeList() {
let param = {
companyId: this.$store.getters.companyId,
typeCategory: 1,
};
selectAll(param)
.then((res) => {
if (res.success) {
this.typeList = res.data;
} else {
this.$message.error(res.msg);
this.back()
}
})
.catch((error) => {
this.$message.error("获取类型失败");
this.back()
});
},
//获取支出信息
getexpend(){
selectById({expendId:this.expendId}).then((res)=>{
if(res.success){
this.expendFrom = res.data;
this.expendFrom.userId = this.$store.getters.urId
}else{
this.$message.error(res.msg);
this.back()
}
}).catch((error)=>{
this.$message.error("获取信息失败")
this.back()
})
},
//提交
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
update(this.expendFrom)
.then((res) => {
if (res.success) {
this.$message.success(res.msg);
this.back()
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("新建失败");
});
}
});
},
//返回
back() {
this.$store.dispatch("tagsView/delView", this.$route);
this.$router.push({
path: "/expendList",
query: {
id: this.$route.query.projectId,
},
});
},
//时间处理 yyyy-MM-dd hh:mm:ss
timestampToTime() {
var date = this.expendFrom.expendTime;
var Y = date.getFullYear() + "-";
var M =
(date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
var D =
(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
var h =
(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
var m =
(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
":";
var s =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
this.expendFrom.expendTime = Y + M + D + h + m + s;
},
//删除
deleteExpend(){
this.$confirm("确定要删除此收入记录吗", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
del(this.expendFrom)
.then((res) => {
if (res.success) {
this.$message.success("删除成功");
this.back();
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("删除失败");
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
}
},
};
</script>
<style scoped>
.container {
padding: 10px;
}
</style>
\ No newline at end of file
<template>
<div class="container">
<el-row>
<el-col :xl="8" :lg="10" :md="8" :sm="12" :xs="24">
<el-form ref="form" :model="incomeFrom" label-width="120px" :rules="rules">
<el-form-item label="项目名称" prop="projectName">
<el-input v-model="incomeFrom.projectName" disabled></el-input>
</el-form-item>
<el-form-item label="收入类别" prop="incomeType">
<el-select v-model="incomeFrom.incomeType" placeholder="请选择">
<el-option
v-for="item in typeList"
:key="item.typeId"
:label="item.typeName"
:value="item.typeId"
></el-option>
</el-select>
</el-form-item>
<!--发票编号-->
<el-form-item label="发票编号" prop="incomebaoxioa">
<el-select
v-model="invoiceListAdd"
multiple
filterable
allow-create
default-first-option
placeholder="请选择发票编号"
>
<el-option
v-for="item in getinvoivelist"
:key="item.invoiceId"
:label="item.number"
:value="item.invoiceId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="收入金额" prop="incomeMoney">
<el-input v-model="incomeFrom.incomeMoney"></el-input>
</el-form-item>
<el-form-item label="收到时间" prop="incomeTime">
<el-date-picker
v-model="incomeFrom.incomeTime"
type="datetime"
placeholder="选择日期时间"
@change="timestampToTime()"
></el-date-picker>
</el-form-item>
<el-form-item label="收入对象" prop="incomeObject">
<el-input v-model="incomeFrom.incomeObject"></el-input>
</el-form-item>
<el-form-item label="收入内容" prop="incomeBody">
<el-input v-model="incomeFrom.incomeBody"></el-input>
</el-form-item>
<el-form-item label="收入备注" prop="incomeRemarks">
<el-input v-model="incomeFrom.incomeRemarks"></el-input>
</el-form-item>
<el-form-item label="收入详情" prop="incomeInformation">
<el-input
type="textarea"
:autosize="{ minRows: 4, maxRows: 8 }"
v-model="incomeFrom.incomeInformation"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" icon="el-icon-upload2" @click="submitForm()">提交</el-button>
<el-button type="info" icon="el-icon-refresh-left" @click="resetForm()">重置信息</el-button>
<el-button type="primary" @click="drawerAdd()">添加发票单</el-button>
<el-button @click="back()">返回</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<!-- 抽屉 -->
<el-drawer title="发票单列表" :visible.sync="drawer" size="100%">
<!-- 表格区域 -->
<div class="drawer" v-show="isgetid==0" style="margin-left:5%">
<el-button type="primary" @click="Reimbursement()" style="margin:20px 0px">添加发票单</el-button>
<el-table :data="invoicegetList.list" border style="width:90%">
<el-table-column prop="invoiceId" label="序号" width="80"></el-table-column>
<el-table-column prop="number" label="发票号码" width="width"></el-table-column>
<el-table-column prop="code" label="发票代码"></el-table-column>
<el-table-column prop="time" label="发票时间"></el-table-column>
<el-table-column prop="category" label="发票类型">
<template slot-scope="scope">
<el-tag
:type="scope.row.category == '0' ? 'info':'primary' "
>{{scope.row.category== '0' ? '普票':'专票'}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="type" label="发票类别">
<template slot-scope="scope">
<el-tag
:type="scope.row.type== '0' ? 'success' : scope.row.type == '1' ? 'danger':'warning' "
>{{scope.row.type == '0' ? '收入' : scope.row.type == '1' ? '支出':'报销'}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="mone" label="发票金额"></el-table-column>
<el-table-column prop="status" label="发票状态">
<template slot-scope="scope">
<el-tag
:type="scope.row.status == '0' ? 'info':'warning' "
>{{ scope.row.status==0 ? '未报销': "已报销"}}</el-tag>
</template>
</el-table-column>
</el-table>
<!-- 分页部分有问题 -->
<el-pagination
style="margin:0px auto"
@current-change="getincomeSelectlist"
layout="total, prev, pager, next"
:total="invoicegetList.total"
></el-pagination>
</div>
<!-- 添加区域 -->
<div class="getadd" v-show="isgetid==1" style="margin-left:5%">
<el-row>
<el-col :xl="8" :lg="10" :md="8" :sm="12" :xs="24">
<el-form
style="width:100%;margin:30px 0px"
:model="addTO"
:rules="rules"
ref="addTO"
label-width="80px"
class="demo-ruleForm"
>
<el-form-item label="发票号码" prop="number">
<el-input v-model="addTO.number" oninput="value=value.replace(/^\.+|[^\d.]/g,'')"></el-input>
</el-form-item>
<el-form-item label="发票代码" prop="code">
<el-input v-model="addTO.code"></el-input>
</el-form-item>
<el-form-item label="发票时间" required>
<el-date-picker
v-model="addTO.time"
type="datetime"
placeholder="选择日期时间"
@change="timestampToTime1()"
></el-date-picker>
</el-form-item>
<el-form-item label="发票类型" prop="category">
<el-select v-model="addTO.category" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.category"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="发票金额" prop="mone">
<el-input v-model="addTO.mone"></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" icon="el-icon-folder-checked" @click="getlistForm()">立即创建</el-button>
<el-button type="info" icon="el-icon-refresh" @click="delectdd">重置信息</el-button>
<el-button type="primary" icon="el-icon-refresh-left" @click="cancel()">取消</el-button>
</el-form-item>
</el-form>
</el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="10" :xl="11">
<el-upload
class="upload-demo"
ref="upload"
:file-list="fileList"
action="http://192.168.10.109:7080/file/uploadFile"
:auto-upload="false"
:data="proutlist"
style="margin-left:90px;"
>
<el-button
slot="trigger"
size="small"
type="primary"
style="margin-left:20px;margin-top:40px;"
>选取文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</el-col>
</el-row>
</div>
</el-drawer>
</div>
</template>
<script>
import {
selectByProjectId,
insertList,
queryBypageIncomeAdd,
selectAllBystatus,
updatesubmit
} from "@/api/project";
import { selectAll } from "@/api/type";
import { insert } from "@/api/imcome";
export default {
data() {
return {
fileList: [],
proutlist: {
Id: 1,
status: 0
},
companyId: 0,
isgetid: 0,
drawer: false, //抽屉的显示与隐藏
incomeFrom: {
incomeBody: null,
incomeInformation: null,
incomeMoney: null,
incomeObject: null,
incomeRemarks: null,
incomeTime: null,
incomeType: null,
projectId: null,
userId: null,
projectName: null,
incomebaoxioa: null //报销的字段
},
typeList: [],
projectData: {},
rules: {
projectName: [
{ required: true, message: "请选择项目", trigger: "change" }
],
incomeType: [
{ required: true, message: "请选择收入类型", trigger: "change" }
],
incomeMoney: [
{ required: true, message: "请输入收入金额", trigger: "blur" }
],
incomeTime: [
{ required: true, message: "请选择收入时间", trigger: "change" }
]
},
options: [
{
value: 0,
category: "普票"
},
{
value: 1,
category: "专票"
}
],
//添加发票的数组
addTO: {
category: 0,
code: null,
companyId: null,
mone: null,
number: null,
status: 0,
time: null,
type: 0
},
//抽屉的临时数据
//表单验证内容
rules: {
number: [
{ required: true, message: "请输入发票号码", trigger: "change" }
],
code: [
{ required: true, message: "请输入发票代码", trigger: "change" }
],
category: [
{
required: true,
message: "请至少选择一个发票类型",
trigger: "change"
}
],
type: [
{
required: true,
message: "请至少选择一个发票类别",
trigger: "change"
}
],
mone: [{ required: true, message: "请输入发票金额", trigger: "change" }]
},
//查询发票数据
invoiceList: {
category: null,
code: null,
companyId: null,
invoiceId: null,
mone: null,
number: null,
orders: [
{
asc: null,
column: null
}
],
pageNum: 1,
pageSize: 10,
searchCount: null,
status: null,
time: null,
type: null
},
//发票状态
status: 0,
//发票的数组
invoicegetList: [],
//发票编号数组
getinvoivelist: [],
//收集发票编号
invoiceListAdd: {},
//查询发票编号的数组
getinvoiveId: {
companyId: null,
type: 0
},
pageNum: 10,
total: 10,
currentPage: 1,
//收集数据
newList: []
};
},
computed: {
projectId() {
return this.$route.query.id;
}
},
created() {
this.incomeFrom.userId = this.$store.getters.urId;
this.addTO.companyId = this.$store.getters.companyId;
this.invoiceList.companyId = this.$store.getters.companyId;
this.getinvoiveId.companyId = this.$store.getters.companyId;
this.getTypeList();
this.getProject();
this.Selectinsertlsit();
},
methods: {
//获取收入类型
getTypeList() {
let param = {
companyId: this.$store.getters.companyId,
typeCategory: 0
};
selectAll(param)
.then(res => {
if (res.success) {
this.typeList = res.data;
} else {
this.$message.error(res.msg);
this.back();
}
})
.catch(error => {
this.$message.error("获取类型失败");
this.back();
});
},
//获取项目
getProject() {
let param = {
projectId: this.projectId
};
selectByProjectId(param)
.then(res => {
if (res.success) {
this.projectData = res.data;
this.incomeFrom.projectName = res.data.projectName;
this.incomeFrom.projectId = res.data.projectId;
} else {
this.$message.error(res.msg);
this.back();
}
})
.catch(error => {
this.$message.error("获取项目失败");
this.back();
});
},
//查询发票编号
Selectinsertlsit() {
selectAllBystatus(this.getinvoiveId)
.then(res => {
if (res.success) {
this.getinvoivelist = res.data;
} else {
this.$message.error(res.msg);
this.back();
}
})
.catch(error => {
this.$message.error("获取发票编号失败");
this.back();
});
},
//提交
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
if (this.invoiceListAdd.length < 0) {
insert(this.incomeFrom)
.then(res => {
if (res.success) {
this.$message.success(res.msg);
this.$store.dispatch("tagsView/delView", this.$route);
this.$router.push({
path: "/incomeList",
query: {
id: this.$route.query.id
}
});
} else {
this.$message.error(res.msg);
}
})
.catch(error => {
this.$message.error("新建失败");
});
} else {
insert(this.incomeFrom)
.then(res => {
if (res.success) {
let list = [];
this.invoiceListAdd.forEach(item => {
list.push({
invoiceId: item,
incomeId: res.data,
status: 1
});
});
updatesubmit(list)
.then(res => {
if (res.success) {
this.$message.success(res.msg);
this.$store.dispatch("tagsView/delView", this.$route);
this.$router.push({
path: "/incomeList",
query: {
id: this.$route.query.id
}
});
} else {
this.$message.error(res.msg);
}
})
.catch(error => {
this.$message.error("新建失败");
});
} else {
this.$message.error(res.msg);
}
})
.catch(error => {
this.$message.error("新建失败");
});
}
}
});
},
//重置
resetForm() {
this.$refs.form.resetFields();
this.incomeFrom.projectName = this.projectData.projectName;
this.incomeFrom.projectId = this.projectData.projectId;
},
//返回
back() {
this.$store.dispatch("tagsView/delView", this.$route);
this.$router.push({
path: "/incomeList",
query: {
id: this.$route.query.id,
backid:this.$route.query.backid
}
});
},
//时间处理 yyyy-MM-dd hh:mm:ss
timestampToTime1() {
var date = this.addTO.time;
var Y = date.getFullYear() + "-";
var M =
(date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
var D =
(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
var h =
(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
var m =
(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
":";
var s =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
this.addTO.time = Y + M + D + h + m + s;
},
timestampToTime() {
var date = this.incomeFrom.incomeTime;
var Y = date.getFullYear() + "-";
var M =
(date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
var D =
(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
var h =
(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
var m =
(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
":";
var s =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
this.incomeFrom.incomeTime = Y + M + D + h + m + s;
},
//发票页面的按钮事件
drawerAdd() {
this.drawer = true;
this.getincomeSelectlist();
},
//发票的分页查询
getincomeSelectlist(pager = 1) {
this.invoiceList.pageNum = pager;
queryBypageIncomeAdd(this.invoiceList)
.then(res => {
if (res.success) {
this.invoicegetList = res.data;
this.total = res.data.total;
} else {
this.$message.errror(res.msg);
}
})
.catch(error => {
this.$message.error("查询发票数据失败");
});
},
//分页
handleSizeChange(val) {
this.invoicegetList.pageSize = pageSize;
},
handleCurrentChange: function(currentPage) {
this.total = this.invoicegetList.length;
this.currentPage = currentPage;
},
//取消隐藏tatle
cancel() {
console.log(this.isgetid);
this.isgetid = 0;
this.getincomeSelectlist();
},
//显示报销单添加页面
Reimbursement() {
this.isgetid = 1;
this.$refs.addTO.resetFields();
},
//发票提交页面的提交
getlistForm() {
this.$refs.addTO.validate(valid => {
if (valid) {
insertList(this.addTO)
.then(res => {
if (res.success) {
this.proutlist.Id = res.data;
//提交图片
this.$refs.upload.submit();
this.$message.success(res.msg);
this.isgetid = 0;
this.addTO.time = "";
this.$refs.addTO.resetFields();
this.getincomeSelectlist();
} else {
this.$message.error(res.msg);
}
})
.catch(error => {
this.$message.error("新建失败");
});
}
});
},
//数据清除
delectdd() {
this.$refs.addTO.resetFields();
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
}
//图片上传
}
};
</script>
<style scoped>
.container {
padding: 10px;
}
</style>
\ No newline at end of file
<template>
<div class="container">
<div class="header">
<el-form :inline="true" :model="incomeQurey">
<el-form-item label="收入对象">
<el-input v-model="incomeQurey.incomeObject" placeholder="收入对象"></el-input>
</el-form-item>
<el-form-item label="收入类别">
<el-select v-model="incomeQurey.incomeType">
<el-option
v-for="item in options"
:key="item.typeId"
:label="item.typeName"
:value="item.typeId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="收入内容">
<el-input v-model="incomeQurey.incomeBody" placeholder="收入内容"></el-input>
</el-form-item>
<el-form-item label="收入时间">
<el-date-picker
v-model="mainTime"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="time"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="qurey()">查询</el-button>
<el-button type="primary" icon="el-icon-refresh-right" @click="reset()">重置</el-button>
<el-button type="success" icon="el-icon-circle-plus-outline" @click="addincome()" v-if="state != 0">新增收入</el-button>
<el-button @click="back()">返回</el-button>
</el-form-item>
</el-form>
</div>
<div class="conter">
<el-table :data="incomeList" style="width: 100%; text-align: center" border>
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" class="demo-table-expand">
<el-form-item label="收入详情:">
<span>{{ props.row.incomeInformation }}</span>
</el-form-item>
<el-form-item label="收入备注:">
<span>{{ props.row.incomeRemarks }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="序号" width="50px">
<template slot-scope="scope">
{{
(incomeQurey.pageNum - 1) * incomeQurey.pageSize +
scope.$index +
1
}}
</template>
</el-table-column>
<el-table-column prop="projectName" label="项目名称" />
<el-table-column prop="incomeObject" label="收入对象" />
<el-table-column prop="typeName" label="收入类别">
<template slot-scope="scope">
<el-tag effect="dark">{{ scope.row.typeName }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="incomeMoney" label="收入金额" />
<el-table-column prop="incomeBody" label="收入内容" />
<el-table-column prop="incomeTime" label="收入时间" />
<el-table-column prop="prop" label="发票图片">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="ReviseImage(scope.row)">点击查看</el-button>
</template>
</el-table-column>
<el-table-column label="操作人员">
<template slot-scope="scope">
<el-tag effect="plain">{{ scope.row.userName }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="projectAmount" label="操作" v-if="state != 0">
<template slot-scope="scope">
<el-button
style="margin: 5px"
size="mini"
icon="el-icon-edit"
type="info"
@click="updatain(scope.row)"
>修改信息</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="footer">
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="incomeQurey.pageNum"
:page-size="incomeQurey.pageSize"
layout="total, prev, pager, next"
:total="total"
></el-pagination>
</div>
<div>
<!--抽屉-->
<el-drawer
title="发票详情"
:visible.sync="drawer"
:direction="direction"
size="40%"
>
<!-- filePath-->
<el-table :data="getinvoivelist" style="width: 100%; text-align: center" border>
<el-table-column type="index" label="序号" width="40"></el-table-column>
<el-table-column prop="prop" label="发票详情">
<template slot-scope="scope">
<el-image style="width: 100px; height: 100px" :src="scope.row.filePath" :preview-src-list="[scope.row.filePath]" ></el-image>
</template>
</el-table-column>
</el-table>
</el-drawer>
</div>
</div>
</template>
<script>
import { selectByProjectId } from "@/api/imcome";
import { selectAll } from "@/api/type";
import { selectAllById } from "@/api/project";
const InitialData = {
incomeBody: null,
incomeInformation: null,
incomeMoney: null,
incomeObject: null,
incomeRemarks: null,
incomeTime: null,
incomeType: null,
projectId: null,
userId: null,
projectName: null
};
export default {
data() {
return {
incomeQurey: {
projectId: null,
pageNum: 1,
pageSize: 10,
incomeObject: null,
incomeType: null,
incomeBody: null,
incomeTimeStart: null,
incomeTimeEnd: null
},
incomeList: [],
options: [],
mainTime: null,
total: 0,
dialogVisible: false,
incomeFrom: {},
//抽屉
drawer: false,
direction: "rtl",
//查询图片给的值
getinvoiveId: {
companyId: null,
incomeId: 0
},
//图片的数组
getinvoivelist: [],
//图片数组
srcList:[],
backid:null,
};
},
computed:{
state:function(){
return this.$route.query.state
}
},
created() {
this.getinvoiveId.companyId = this.$store.getters.companyId;
this.incomeQurey.projectId = this.$route.query.id;
this.backid=this.$route.query.backid
this.getIncome();
this.getTypeList();
},
methods: {
//获取收入类型
getTypeList() {
let param = {
companyId: this.$store.getters.companyId,
typeCategory: 0
};
selectAll(param)
.then(res => {
if (res.success) {
this.options = res.data;
} else {
this.$message.error(res.msg);
}
})
.catch(error => {
this.$message.error("获取类型失败");
});
},
//获取收入情况
getIncome() {
selectByProjectId(this.incomeQurey)
.then(res => {
if (res.success) {
this.incomeList = res.data.list;
this.total = res.data.total;
} else {
this.$message.errror(res.msg);
}
})
.catch(error => {
this.$message.error("查询数据失败");
});
},
//换页
handleCurrentChange(val) {
this.incomeQurey.pageNum = val;
this.getIncome();
},
//时间处理
time(val) {
if (val == null) {
this.incomeQurey.incomeTimeStart = null;
this.incomeQurey.incomeTimeEnd = null;
} else {
this.incomeQurey.incomeTimeStart = this.timestampToTime(val[0]);
this.incomeQurey.incomeTimeEnd = this.timestampToTime(val[1]);
}
},
//时间处理
timestampToTime(date) {
var Y = date.getFullYear() + "-";
var M =
(date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
var D =
(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
var h =
(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
var m =
(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
":";
var s =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return Y + M + D + h + m + s;
},
//查询
qurey() {
this.incomeQurey.pageNum = 1;
this.getIncome();
},
//重置
reset() {
this.incomeQurey.incomeTimeStart = null;
this.incomeQurey.incomeTimeEnd = null;
this.mainTime = null;
this.incomeQurey.incomeObject = null;
this.incomeQurey.incomeType = null;
this.incomeQurey.incomeBody = null;
this.qurey();
},
//时间处理 yyyy-MM-dd hh:mm:ss
timestampToTime2() {
var date = this.incomeFrom.incomeTime;
var Y = date.getFullYear() + "-";
var M =
(date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
var D =
(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
var h =
(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
var m =
(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
":";
var s =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
this.incomeFrom.incomeTime = Y + M + D + h + m + s;
},
//添加按钮事件
addincome() {
this.$router.push({
path: "/incomeAdd",
query: {
id: this.$route.query.id,
backid:this.backid
}
});
},
//查看图片的方法
ReviseImage(row) {
this.drawer = true;
this.getinvoiveId.incomeId = row.incomeId;
//console.log(process.env.VUE_APP_BASE_API);
this.Selectinsertlsit();
},
//查询发票图片
Selectinsertlsit() {
selectAllById(this.getinvoiveId)
.then(res => {
if (res.success) {
this.getinvoivelist = res.data;
this.getinvoivelist.forEach(e=>{
e.filePath = process.env.VUE_APP_BASE_API + e.filePath
})
console.log(this.getinvoivelist);
} else {
this.$message.error(res.msg);
this.back();
}
})
.catch(error => {
this.$message.error("获取发票图片失败");
this.back();
});
},
//修改方法
updatain(data) {
this.$router.push({
path: "/incomeUpdata",
query: {
id: data.incomeId,
projectId: this.$route.query.id
}
});
},
//返回开始
back(){
if(this.backid==0){
this.$router.push({
path: "/projectList",
query: {
id: this.$route.query.id
}
});
}else if (this.backid==1) {
this.$router.push({
path: "/beresponsibleforList",
query: {
id: this.$route.query.id
}
});
}else{
this.$router.push({
path: "/participateinList",
query: {
id: this.$route.query.id
}
});
}
}
}
};
</script>
<style scoped>
.container {
padding: 10px;
}
.conter {
margin-bottom: 10px;
}
.footer {
text-align: right;
}
</style>
\ No newline at end of file
<template>
<div class="container">
<el-row>
<el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
<el-form
ref="form"
:model="incomeFrom"
label-width="120px"
:rules="rules"
>
<el-form-item label="项目名称" prop="projectName">
<el-input v-model="incomeFrom.projectName" disabled></el-input>
</el-form-item>
<el-form-item label="收入类别" prop="incomeType">
<el-select v-model="incomeFrom.incomeType" placeholder="请选择">
<el-option
v-for="item in typeList"
:key="item.typeId"
:label="item.typeName"
:value="item.typeId"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="收入金额" prop="incomeMoney">
<el-input v-model="incomeFrom.incomeMoney"></el-input>
</el-form-item>
<el-form-item label="收到时间" prop="incomeTime">
<el-date-picker
v-model="incomeFrom.incomeTime"
type="datetime"
placeholder="选择日期时间"
@change="timestampToTime()"
>
</el-date-picker>
</el-form-item>
<el-form-item label="收入对象" prop="incomeObject">
<el-input v-model="incomeFrom.incomeObject"></el-input>
</el-form-item>
<el-form-item label="收入内容" prop="incomeBody">
<el-input v-model="incomeFrom.incomeBody"></el-input>
</el-form-item>
<el-form-item label="收入备注" prop="incomeRemarks">
<el-input v-model="incomeFrom.incomeRemarks"></el-input>
</el-form-item>
<el-form-item label="收入详情" prop="incomeInformation">
<el-input
type="textarea"
:autosize="{ minRows: 4, maxRows: 8 }"
v-model="incomeFrom.incomeInformation"
></el-input>
</el-form-item>
<el-form-item>
<el-button
type="success"
icon="el-icon-upload2"
@click="submitForm()"
>提交</el-button
>
<el-button
type="danger"
icon="el-icon-delete-solid"
@click="deleteIncome()"
>删除</el-button
>
<el-button @click="back()">返回</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
import { selectAll } from "@/api/type";
import { update, selectById, del } from "@/api/imcome";
export default {
data() {
return {
incomeFrom: {
incomeBody: null,
incomeInformation: null,
incomeMoney: null,
incomeObject: null,
incomeRemarks: null,
incomeTime: null,
incomeType: null,
projectId: null,
userId: null,
projectName: null,
},
typeList: [],
projectData: {},
rules: {
projectName: [
{ required: true, message: "请选择项目", trigger: "change" },
],
incomeType: [
{ required: true, message: "请选择收入类型", trigger: "change" },
],
incomeMoney: [
{ required: true, message: "请输入收入金额", trigger: "blur" },
],
incomeTime: [
{ required: true, message: "请选择收入时间", trigger: "change" },
],
},
};
},
computed: {
incomeId() {
return this.$route.query.id;
},
},
created() {
this.incomeFrom.userId = this.$store.getters.urId;
this.getTypeList();
this.getIncome();
},
methods: {
//获取收入类型
getTypeList() {
let param = {
companyId: this.$store.getters.companyId,
typeCategory: 0,
};
selectAll(param)
.then((res) => {
if (res.success) {
this.typeList = res.data;
} else {
this.$message.error(res.msg);
this.back();
}
})
.catch((error) => {
this.$message.error("获取类型失败");
this.back();
});
},
//获取收入信息
getIncome() {
selectById({ incomeId: this.incomeId })
.then((res) => {
if (res.success) {
this.incomeFrom = res.data;
this.incomeFrom.userId = this.$store.getters.urId;
} else {
this.$message.error(res.msg);
this.back();
}
})
.catch((error) => {
this.$message.error("获取信息失败");
this.back();
});
},
//提交
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
update(this.incomeFrom)
.then((res) => {
if (res.success) {
this.$message.success(res.msg);
this.back();
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("新建失败");
});
}
});
},
//返回
back() {
this.$store.dispatch("tagsView/delView", this.$route);
this.$router.push({
path: "/incomeList",
query: {
id: this.$route.query.projectId,
},
});
},
//时间处理 yyyy-MM-dd hh:mm:ss
timestampToTime() {
var date = this.incomeFrom.incomeTime;
var Y = date.getFullYear() + "-";
var M =
(date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
var D =
(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
var h =
(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
var m =
(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
":";
var s =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
this.incomeFrom.incomeTime = Y + M + D + h + m + s;
},
//删除
deleteIncome() {
this.$confirm("确定要删除此收入记录吗", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
del(this.incomeFrom)
.then((res) => {
if (res.success) {
this.$message.success("删除成功");
this.back();
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("删除失败");
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
},
};
</script>
<style scoped>
.container {
padding: 10px;
}
</style>
\ No newline at end of file
<template>
<div class="container">
<div class="header">
<el-form :inline="true" :model="memberQurey">
<el-form-item>
<el-button type="success" icon="el-icon-circle-plus-outline" @click="updataMember()">更新成员</el-button>
<el-button @click="back()">返回</el-button>
</el-form-item>
</el-form>
</div>
<div class="conter">
<el-table :data="memberList" style="width: 100%; text-align: center" border>
<el-table-column label="序号" width="50px">
<template slot-scope="scope">
{{
(memberQurey.pageNum - 1) * memberQurey.pageSize + scope.$index + 1
}}
</template>
</el-table-column>
<el-table-column prop="projectName" label="项目名称" />
<el-table-column prop="userName" label="员工姓名" />
<el-table-column prop="projectAmount" label="角色">
<template slot-scope="scope">
<el-tag
:type="scope.row.memberPression == 0 ? 'success':''"
effect="dark"
>{{ scope.row.memberPression == 0 ? '项目负责人':'普通成员' }}</el-tag>
</template>
</el-table-column>
</el-table>
</div>
<div class="footer">
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="memberQurey.pageNum"
:page-size="memberQurey.pageSize"
layout="total, prev, pager, next"
:total="total"
></el-pagination>
</div>
</div>
</template>
<script>
import { selectByProjectId } from "@/api/member";
export default {
data() {
return {
memberQurey: {
projectId: null,
pageNum: 1,
pageSize: 10
},
memberList: [],
total: 0
};
},
created() {
this.memberId = this.$store.getters.memberId;
this.memberQurey.projectId = this.$route.query.id;
this.getMember();
},
methods: {
//获取员工信息
getMember() {
console.log(selectByProjectId(this.memberQurey));
selectByProjectId(this.memberQurey)
.then(res => {
if (res.success) {
this.memberList = res.data.list;
this.total = res.data.total;
} else {
this.$message.error(res.data);
}
})
.catch(error => {
this.$message.error("获取项目成员失败");
});
},
//返回
back() {
this.$store.dispatch('tagsView/delView', this.$route)
if (this.$store.getters.memberId == 0) {
this.$router.push({
path: "/projectList",
});
} else {
this.$router.push({
path: "/beresponsibleforList",
});
}
},
//换页
handleCurrentChange(val) {
this.memberQurey.pageNum = val;
this.getMember();
},
//更新成员
updataMember() {
this.$router.push({
path: "/memberUpdata",
query: {
id: this.$route.query.id
}
});
}
}
};
</script>
<style scoped>
.container {
padding: 10px;
}
.conter {
margin-bottom: 10px;
}
.footer {
text-align: right;
}
</style>
\ No newline at end of file
<template>
<div class="container">
<el-row>
<el-col :span="22">
<el-form ref="form" :model="memberFrom" label-width="120px" :rules="rules">
<el-form-item label="普通成员" prop="ordinary">
<el-checkbox-group v-model="memberFrom.ordinary">
<el-checkbox v-for="city in datalist" :label="city.userId" :key="city.userId">
{{
city.userName
}}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-button type="success" icon="el-icon-upload2" @click="submitForm()">提交</el-button>
<el-button type="info" icon="el-icon-refresh-left" @click="resetForm()">清空选择</el-button>
<el-button @click="back()">返回</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
import { secletAllStaff } from "@/api/user";
import {
selectAllByProjectId,
insertBatch,
selectByProjectId
} from "@/api/member";
export default {
data() {
return {
memberFrom: {
ordinary: []
},
staffList: [],
rules: {
ordinary: [
{
type: "array",
required: true,
message: "请至少选择一个普通成员",
trigger: "change"
}
]
},
memberQurey: {
projectId: null,
pageNum: 1,
pageSize: 10
},
memberList: [],
//过滤后面的数组
datalist: [],
//过滤后的新数组
queryList: [],
memberId: null,
};
},
computed: {
projectId() {
return this.$route.query.id;
}
},
created() {
this.memberQurey.projectId = this.$route.query.id;
this.memberId = this.$store.getters.memberId;
//查询员工
//this.getStaffList();
//查询项目的成员信息
this.getPeojectMember();
this.getselectlist();
},
methods: {
getselectlist() {
//查询员工,得到初始员工值
secletAllStaff({ companyId: this.$store.getters.companyId })
.then(res => {
if (res.status == "success") {
this.staffList = res.data;
//数据整理,排除项目负责人
selectAllByProjectId({ projectId: this.projectId })
.then(res => {
if (res.success) {
let queryList = res.data;
console.log(queryList);
if (this.memberId != 0) {
let list = [];
//查出来是项目负责人组成一个数组
list = queryList.filter(a => {
return a.memberPression == 0;
});
const datalistyou = list;;
//将项目负责人与查询员工分离整理
let datalist1 = this.staffList.filter(
a => !datalistyou.some(b => a.userId === b.userId)
);
this.datalist = datalist1;
} else {
//排除普通成员
let list = [];
//查出来是项目成员组成一个数组
list = queryList.filter(a => {
return a.memberPression == 1;
});
const datalistyou = list;
//console.log(list);
console.log(this.$route.query.memberId);
//将项目负责人与查询员工分离整理
let datalist1 = this.staffList.filter(
a => !datalistyou.some(b => a.userId === b.userId)
);
this.datalist = datalist1;
}
}
})
.catch(error => {
this.$message.error("获取员工信息失败");
});
} else {
this.$message.error(res.data);
this.back();
}
})
.catch(error => {
this.$message.error("获取员工信息失败");
//this.back();
});
},
//查询项目的成员信息
getPeojectMember() {
selectAllByProjectId({ projectId: this.projectId })
.then(res => {
if (res.success) {
//处理数据
if (res.data.length > 0) {
if (this.memberId != 0) {
let ordinary = [];
res.data.forEach(e => {
if (e.memberPression != 0) {
//普通员工
ordinary.push(e.userId);
}
});
this.memberFrom.ordinary = ordinary;
} else {
let ordinary = [];
res.data.forEach(e => {
if (e.memberPression == 0) {
//项目负责人
ordinary.push(e.userId);
}
});
this.memberFrom.ordinary = ordinary;
}
} else {
this.memberFrom.ordinary = [];
}
} else {
this.$message.error(res.msg);
this.back();
}
})
.catch(error => {
this.$message.error("获取项目的成员信息失败");
this.back();
});
},
//提交
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
//处理数据
let memberList = this.handleMember();
insertBatch(memberList)
.then(res => {
if (res.success) {
this.$message.success(res.msg);
this.$store.dispatch("tagsView/delView", this.$route);
this.$router.push({
path: "/memberList",
query: {
id: this.$route.query.id
}
});
} else {
this.$message.error(res.msg);
}
})
.catch(error => {
this.$message.error("添加失败");
});
}
});
},
//清空选择
resetForm() {
this.$refs.form.resetFields();
},
//返回
back() {
this.$store.dispatch("tagsView/delView", this.$route);
this.$router.push({
path: "/memberList",
query: {
id: this.$route.query.id,
memberId:this.memberId
}
});
},
//处理成员数据
handleMember() {
//0负责人,1普通员工
let member = [];
if (this.memberId != 0) {
this.memberFrom.ordinary.forEach(e => {
member.push({
projectId: this.projectId,
userId: e,
memberPression: 1
});
});
}else{
this.memberFrom.ordinary.forEach(e => {
member.push({
projectId: this.projectId,
userId: e,
memberPression: 0
});
});
}
return member;
}
}
};
</script>
<style scoped>
.container {
padding: 10px;
}
</style>
\ No newline at end of file
<template>
<!-- 参与项目 -->
<div class="container">
<div class="header">
<el-form :inline="true" :model="projectQurey">
<el-form-item label="项目名称">
<el-input v-model="projectQurey.projectName" placeholder="项目名称"></el-input>
</el-form-item>
<el-form-item label="项目编号">
<el-input v-model="projectQurey.projectNumber" placeholder="项目编号"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="qurey()">查询</el-button>
<el-button type="primary" icon="el-icon-refresh-right" @click="reset()">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="conter">
<el-table :data="projectList" style="width: 100%; text-align: center" border>
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" class="demo-table-expand">
<el-form-item label="合作方:">
<span>{{ props.row.projectPartyb }}</span>
</el-form-item>
<el-form-item label="项目详情:">
<span>{{ props.row.projectInformation }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="序号" width="50px">
<template slot-scope="scope">
{{
(projectQurey.pageNum - 1) * projectQurey.pageSize + scope.$index + 1
}}
</template>
</el-table-column>
<el-table-column prop="projectName" label="项目名称" />
<el-table-column prop="projectNumber" label="项目编号" />
<el-table-column label="项目合同金额">
<template slot-scope="scope">
<p class="amounttext">{{scope.row.projectAmount}}</p>
</template>
</el-table-column>
<el-table-column label="项目总收入金额" align="center">
<el-table-column label="金额">
<template slot-scope="scope">
<p class="incometext">{{scope.row.projectIncome}}</p>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button size="mini" type="success" @click="showIncome(scope.row)">查看详情</el-button>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="项目总支出金额" align="center">
<el-table-column label="金额">
<template slot-scope="scope">
<p class="expendtext">{{scope.row.projectExpend}}</p>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button size="mini" type="danger" @click="showExpend(scope.row)">查看详情</el-button>
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="projectExpense" label="项目总报销金额">
<template slot-scope="scope">
<p class="expendtext">{{scope.row.projectExpense}}</p>
</template>
</el-table-column>
<el-table-column
prop="projectStartTime"
label="项目开始时间"
align="center"
:formatter="timestampToTime"
/>
<el-table-column
prop="projectEndTime"
label="项目结束时间"
align="center"
:formatter="timestampToTime"
/>
</el-table>
</div>
<div class="footer">
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="projectQurey.pageNum"
:page-size="projectQurey.pageSize"
layout="total, prev, pager, next"
:total="total"
></el-pagination>
</div>
</div>
</template>
<script>
import { selectBYPression } from "@/api/project";
export default {
data() {
return {
projectQurey: {
projectName: null,
projectNumber: null,
pageNum: 1,
pageSize: 10,
userId: null,
memberPression:1
},
projectList: [],
total: null
};
},
created() {
this.projectQurey.userId = this.$store.getters.urId;
this.getProjectList();
},
methods: {
//获取项目列表
getProjectList() {
selectBYPression(this.projectQurey)
.then(res => {
if (res.success) {
//请求成功,获取到了数据
this.projectList = res.data.list;
this.total = res.data.total;
} else {
this.$message.error(res.msg);
}
})
.catch(error => {
this.$message.error("获取数据失败");
});
},
//查询
qurey() {
this.projectQurey.pageNum = 1;
this.getProjectList();
},
//重置
reset() {
this.projectQurey = {
projectName: null,
projectNumber: null,
pageNum: 1,
pageSize: 10,
userId: null,
memberPression:1
};
this.projectQurey.userId = this.$store.getters.urId;
this.getProjectList();
},
//添加项目
addproject() {
this.$router.push("/projectAdd");
},
//分页
handleCurrentChange(val) {
this.projectQurey.pageNum = val;
this.getProjectList();
},
//修改项目
updataProject(data) {
this.$router.push({
path: "/projectUpdata",
query: {
id: data.projectId
}
});
},
//时间处理
timestampToTime(row, column, cellValue) {
return cellValue.split(" ")[0];
},
//查看收入详情列表
showIncome(data) {
this.$router.push({
path: "/incomeList",
query: {
id: data.projectId,
state:0
}
});
},
//成员管理
member(data) {
this.$router.push({
path: "/memberList",
query: {
id: data.projectId
}
});
},
//查看支出详情列表
showExpend(data) {
this.$router.push({
path: "/expendList",
query: {
id: data.projectId,
state:0
}
});
}
}
};
</script>
<style scoped>
.container {
padding: 10px;
}
.conter {
margin-bottom: 10px;
}
.footer {
text-align: right;
}
.incometext {
color: #13ce66;
font-weight: 600;
font-size: 15px;
}
.amounttext {
color: #1890ff;
font-weight: 600;
font-size: 15px;
}
.expendtext {
color: rgb(255, 0, 0);
font-weight: 600;
font-size: 15px;
}
</style>
\ No newline at end of file
<template>
<div class="container">
<el-row :gutter="20">
<el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="24">
<el-form ref="form" :model="projectFrom" label-width="120px" :rules="rules">
<el-form-item label="项目名称" prop="projectName">
<el-input v-model="projectFrom.projectName"></el-input>
</el-form-item>
<el-form-item label="项目编号" prop="projectNumber">
<el-input v-model="projectFrom.projectNumber"></el-input>
</el-form-item>
<el-form-item label="项目合同金额" prop="projectAmount">
<el-input v-model="projectFrom.projectAmount"></el-input>
</el-form-item>
<el-form-item label="项目总收入" prop="projectIncome">
<el-input v-model="projectFrom.projectIncome" disabled></el-input>
</el-form-item>
<el-form-item label="项目总支出" prop="projectExpend">
<el-input v-model="projectFrom.projectExpend" disabled></el-input>
</el-form-item>
<el-form-item label="项目总报销" prop="projectExpense">
<el-input v-model="projectFrom.projectExpense" disabled></el-input>
</el-form-item>
<el-form-item label="项目合作方" prop="projectPartyb">
<el-input v-model="projectFrom.projectPartyb"></el-input>
</el-form-item>
<el-form-item label="项目时间" prop="timeSlot">
<el-date-picker
v-model="projectFrom.timeSlot"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="time"
></el-date-picker>
</el-form-item>
<el-form-item label="项目详情" prop="projectInformation">
<el-input
type="textarea"
:autosize="{ minRows: 4, maxRows: 6}"
placeholder="请输入内容"
v-model="projectFrom.projectInformation"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" icon="el-icon-upload2" @click="submitForm()">提交</el-button>
<el-button type="info" icon="el-icon-refresh-left" @click="resetForm()">重置信息</el-button>
<el-button @click="back()">返回</el-button>
</el-form-item>
</el-form>
</el-col>
<el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="24">
<div>
负责人:
<el-tag
:key="projectLeader"
v-for="(projectLeader,index) in projectLeaderList"
closable
:disable-transitions="false"
@close="delectTag(index)"
style="margin:0px 10px"
>{{projectLeader}}</el-tag>
</div>
<div class="projectLeader">
<div style="marrgin">选择区:</div>
<div style="padding:20px">
角色:
<el-select v-model="personListForm.rlId" placeholder="请选择" @change="selsetperson()">
<el-option
v-for="item in rolesList"
:key="item.rlId"
:label="item.rlName"
:value="item.rlId"
></el-option>
</el-select>
<!--<el-button type="primary" @click="selsetperson()" :disabled="isgetrules">搜索</el-button>-->
<div class="personList">
<el-checkbox-group v-model="projectLeaderList">
<el-checkbox
:label="ch.userName"
v-for="ch in checkList"
:key="ch.userId"
:value="ch.userId"
@change="AddSelect(ch.userId)"
></el-checkbox>
</el-checkbox-group>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import { insert } from "@/api/project";
import { selectAllByCompanyId, insertBatch, secletAllByRlid } from "@/api/role";
export default {
data() {
return {
//查询员工的数组
checkList: [],
//收集查询员工数据
list: {
rlId: 0,
companyId: 0
},
//添加负责人数组
insertBatch: [],
projectFrom: {
projectName: null,
projectNumber: null,
projectAmount: null,
projectIncome: 0,
projectExpend: 0,
projectExpense: 0,
projectStartTime: null,
projectEndTime: null,
projectFile: null,
userId: null,
companyId: null,
projectPartyb: null,
projectInformation: null,
timeSlot: null
},
rules: {
projectName: [
{ required: true, message: "请输入项目名称", trigger: "blur" }
],
projectNumber: [
{ required: true, message: "请输入项目编号", trigger: "blur" }
],
projectAmount: [
{
required: true,
message: "请输入项目合同金额(起始金额)",
trigger: "blur"
}
],
timeSlot: [
{ required: true, message: "请选择日期", trigger: "change" }
],
projectPartyb: [
{
required: true,
message: "请输入项目合作方",
trigger: "blur"
}
]
},
isgetrules: false,
//显示tag
projectLeaderList: [],
rolesList: [], //角色列表
personList: [], //员工列表
//收集userId
userIdAdd: [],
personListForm: {
rlId: null
}
};
},
created() {
this.projectFrom.userId = this.$store.getters.urId;
this.projectFrom.companyId = this.$store.getters.companyId;
this.getRoleList();
},
methods: {
//获取公司全部角色
getRoleList() {
selectAllByCompanyId({ companyId: this.$store.getters.companyId })
.then(res => {
if (res.status == "success") {
this.rolesList = res.data;
} else {
this.$message.error(res.data);
}
})
.catch(error => {
this.$message.error("查询数据失败");
});
//添加负责人
},
//查询员工
async selsetperson() {
this.list.rlId = this.personListForm.rlId;
this.list.companyId = this.$store.getters.companyId;
let result = await secletAllByRlid(this.list);
if (result.code == 20000) {
this.checkList = result.data;
}
},
//删除
delectTag(index) {
this.projectLeaderList.splice(index, 1);
this.userIdAdd.splice(index, 1);
},
//projectId:0,
//userId:this.checkList.userId,
//memberId: 0
AddSelect(row) {
//定义一个对象
let attr = {};
this.projectLeaderList.forEach((item, index) => {
attr.userId = row;
attr.projectId = 0;
attr.memberPression = 0;
});
this.userIdAdd.push(attr);
},
//时间处理
time(val) {
if (val == null) {
this.projectFrom.projectStartTime = null;
this.projectFrom.projectEndTime = null;
} else {
this.projectFrom.projectStartTime = this.timestampToTime(val[0]);
this.projectFrom.projectEndTime = this.timestampToTime(val[1]);
}
},
//重置数据
resetForm() {
this.$refs.form.resetFields();
},
//提交数据
submitForm() {
//第一步校验数据完整性
this.$refs.form.validate(valid => {
if (this.projectLeaderList.length < 1) {
this.$message.warning("请选择项目负责人");
} else if (valid) {
//第四步提交
console.log(this.projectFrom);
insert(this.projectFrom)
.then(res => {
if (res.success) {
let dateadd = [];
this.userIdAdd.forEach(item => {
dateadd.push({
userId: item.userId,
projectId:res.data,
memberPression: 0
});
});
console.log(dateadd);
let restle = insertBatch(dateadd);
if (restle.success = true) {
console.log("保存成功");
this.$message.success("新建成功");
this.back();
} else {
this.$message.success("发生错误");
}
} else {
this.$message.error(res.msg);
}
})
.catch(error => {
this.$message.error("插入失败");
});
}
});
},
//返回
back() {
this.$store.dispatch("tagsView/delView", this.$route);
this.$router.push("/projectList");
},
//时间处理
timestampToTime(date) {
var Y = date.getFullYear() + "-";
var M =
(date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
var D =
(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
var h =
(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
var m =
(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
":";
var s =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return Y + M + D + h + m + s;
}
}
};
</script>
<style scoped>
.container {
padding: 10px;
}
.projectLeader {
width: 100%;
border: 1px solid black;
margin: 20px 0px;
padding: 20px;
border-radius: 20px;
box-shadow: 1px 1px 1px black;
}
.personList {
margin-top: 20px;
}
</style>
\ No newline at end of file
<template>
<!-- 公司项目 -->
<div class="container">
<div class="header">
<el-form :inline="true" :model="projectQurey">
<el-form-item label="项目名称">
<el-input v-model="projectQurey.projectName" placeholder="项目名称"></el-input>
</el-form-item>
<el-form-item label="项目编号">
<el-input v-model="projectQurey.projectNumber" placeholder="项目编号"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="qurey()">查询</el-button>
<el-button type="primary" icon="el-icon-refresh-right" @click="reset()">重置</el-button>
<el-button type="success" icon="el-icon-circle-plus-outline" @click="addproject()">添加项目</el-button>
</el-form-item>
</el-form>
</div>
<div class="conter">
<el-table :data="projectList" style="width: 100%; text-align: center" border>
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" class="demo-table-expand">
<el-form-item label="合作方:">
<span>{{ props.row.projectPartyb }}</span>
</el-form-item>
<el-form-item label="项目详情:">
<span>{{ props.row.projectInformation }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="序号" width="50px">
<template slot-scope="scope">
{{
(projectQurey.pageNum - 1) * projectQurey.pageSize + scope.$index + 1
}}
</template>
</el-table-column>
<el-table-column prop="projectName" label="项目名称" />
<el-table-column prop="projectNumber" label="项目编号" />
<el-table-column label="项目合同金额">
<template slot-scope="scope">
<p class="amounttext">{{scope.row.projectAmount}}</p>
</template>
</el-table-column>
<el-table-column label="项目总收入金额" align="center">
<el-table-column label="金额">
<template slot-scope="scope">
<p class="incometext">{{scope.row.projectIncome}}</p>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="200">
<template slot-scope="scope">
<el-button size="mini" type="success" @click="showIncome(scope.row)">查看详情</el-button>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="项目总支出金额" align="center">
<el-table-column label="金额">
<template slot-scope="scope">
<p class="expendtext">{{scope.row.projectExpend}}</p>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button size="mini" type="danger" @click="showExpend(scope.row)">查看详情</el-button>
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="projectExpense" label="项目总报销金额">
<template slot-scope="scope">
<p class="expendtext">{{scope.row.projectExpense}}</p>
</template>
</el-table-column>
<el-table-column
prop="projectStartTime"
label="项目开始时间"
align="center"
:formatter="timestampToTime"
/>
<el-table-column
prop="projectEndTime"
label="项目结束时间"
align="center"
:formatter="timestampToTime"
/>
<el-table-column prop="projectAmount" label="操作" align="center">
<template slot-scope="scope">
<el-button
style="margin:5px"
size="mini"
icon="el-icon-edit"
type="info"
@click="updataProject(scope.row)"
>修改信息</el-button>
<el-button
style="margin:5px"
size="mini"
icon="el-icon-coin"
type="primary"
@click="member(scope.row)"
>负责人管理</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="footer">
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="projectQurey.pageNum"
:page-size="projectQurey.pageSize"
layout="total, prev, pager, next"
:total="total"
></el-pagination>
</div>
</div>
</template>
<script>
import { selectByCompanyId } from "@/api/project";
export default {
data() {
return {
projectQurey: {
projectName: null,
projectNumber: null,
pageNum: 1,
pageSize: 10,
companyId: null
},
projectList: [],
total: null
};
},
created() {
this.projectQurey.companyId = this.$store.getters.companyId;
this.getProjectList();
},
methods: {
//获取项目列表
getProjectList() {
selectByCompanyId(this.projectQurey)
.then(res => {
if (res.success) {
//请求成功,获取到了数据
this.projectList = res.data.list;
this.total = res.data.total;
} else {
this.$message.error(res.msg);
}
})
.catch(error => {
this.$message.error("获取数据失败");
});
},
//查询
qurey() {
this.projectQurey.pageNum = 1;
this.getProjectList();
},
//重置
reset() {
this.projectQurey = {
projectName: null,
projectNumber: null,
pageNum: 1,
pageSize: 10,
companyId: null
};
this.projectQurey.companyId = this.$store.getters.companyId;
this.getProjectList();
},
//添加项目
addproject() {
this.$router.push("/projectAdd");
},
//分页
handleCurrentChange(val) {
this.projectQurey.pageNum = val;
this.getProjectList();
},
//修改项目
updataProject(data) {
this.$router.push({
path: "/projectUpdata",
query: {
id: data.projectId
}
});
},
//时间处理
timestampToTime(row, column, cellValue) {
return cellValue.split(" ")[0];
},
//查看收入详情列表
showIncome(data) {
this.$router.push({
path: "/incomeList",
query: {
id: data.projectId,
backid:0,
state:0
}
});
},
//成员管理
member(data) {
this.$store.dispatch("settings/setMemberId", 0);
this.$router.push({
path: "/memberList",
query: {
id: data.projectId
}
});
},
//查看支出详情列表
showExpend(data) {
this.$router.push({
path: "/expendList",
query: {
id: data.projectId,
backlistid:0,
state:0
}
});
}
}
};
</script>
<style scoped>
.container {
padding: 10px;
}
.conter {
margin-bottom: 10px;
}
.footer {
text-align: right;
}
.incometext {
color: #13ce66;
font-weight: 600;
font-size: 15px;
}
.amounttext {
color: #1890ff;
font-weight: 600;
font-size: 15px;
}
.expendtext {
color: rgb(255, 0, 0);
font-weight: 600;
font-size: 15px;
}
</style>
\ No newline at end of file
<template>
<div class="container">
<el-row>
<el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="24">
<el-form
ref="form"
:model="projectFrom"
label-width="120px"
:rules="rules"
>
<el-form-item label="项目名称" prop="projectName">
<el-input v-model="projectFrom.projectName"></el-input>
</el-form-item>
<el-form-item label="项目编号" prop="projectNumber">
<el-input v-model="projectFrom.projectNumber"></el-input>
</el-form-item>
<el-form-item label="项目合同金额" prop="projectAmount">
<el-input v-model="projectFrom.projectAmount"></el-input>
</el-form-item>
<el-form-item label="项目总收入" prop="projectIncome">
<el-input v-model="projectFrom.projectIncome" disabled></el-input>
</el-form-item>
<el-form-item label="项目总支出" prop="projectExpend">
<el-input v-model="projectFrom.projectExpend" disabled></el-input>
</el-form-item>
<el-form-item label="项目总报销" prop="projectExpense">
<el-input v-model="projectFrom.projectExpense" disabled></el-input>
</el-form-item>
<el-form-item label="项目合作方" prop="projectPartyb">
<el-input v-model="projectFrom.projectPartyb" ></el-input>
</el-form-item>
<el-form-item label="项目时间" prop="timeSlot">
<el-date-picker
v-model="projectFrom.timeSlot"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="time"
>
</el-date-picker>
</el-form-item>
<el-form-item label="项目详情" prop="projectInformation">
<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6}" placeholder="请输入内容" v-model="projectFrom.projectInformation" ></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" icon="el-icon-upload2" @click="submitForm()">提交</el-button>
<el-button type="info" icon="el-icon-refresh-left" @click="resetForm()">重置信息</el-button>
<el-button @click="back()">返回</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
import {update,selectByProjectId} from '@/api/project'
export default {
data() {
return {
projectFrom: {
projectName: null,
projectNumber: null,
projectAmount: null,
projectIncome: 0,
projectExpend: 0,
projectExpense:0,
projectStartTime: null,
projecteEndTime: null,
projectFile: null,
userId: null,
companyId: null,
projectPartyb:null,
projectInformation:null,
timeSlot: null,
},
rules: {
projectName: [
{ required: true, message: "请输入项目名称", trigger: "blur" },
],
projectNumber: [
{ required: true, message: "请输入项目编号", trigger: "blur" },
],
projectAmount: [
{
required: true,
message: "请输入项目合同金额(起始金额)",
trigger: "blur",
},
],
timeSlot: [
{ required: true, message: "请选择日期", trigger: "change" },
],
projectPartyb:[{
required: true,
message: "请输入项目合作方",
trigger: "blur",
}]
},
};
},
computed: {
projectId() {
return this.$route.query.id;
},
},
created() {
this.getProject()
},
methods: {
//查询项目信息
getProject(){
selectByProjectId({projectId:this.projectId}).then((res)=>{
if(res.success){
this.projectFrom = res.data
this.projectFrom.timeSlot = this.Stime(res.data)
}else{
this.$message.error(res.msg)
this.back()
}
}).catch((errpr)=>{
this.$message.error("查询数据错误")
this.back()
})
},
//时间处理
time(val) {
if (val == null) {
this.projectFrom.projectStartTime = null;
this.projectFrom.projecteEndTime = null;
} else {
this.projectFrom.projectStartTime = val[0];
this.projectFrom.projecteEndTime = val[1];
}
},
Stime(value){
return [value.projectStartTime,value.projectEndTime]
},
//重置数据
resetForm(){
this.$refs.form.resetFields()
},
//提交数据
submitForm(){
//第一步校验数据完整性
this.$refs.form.validate((valid)=>{
if(valid){
update(this.projectFrom).then((res)=>{
if(res.success){
this.$message.success("修改成功")
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.push("/projectList")
}else{
this.$message.error(res.msg)
}
}).catch((error)=>{
this.$message.error("插入失败")
})
}
})
},
//返回
back(){
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.push("/projectList")
},
},
};
</script>
<style scoped>
.container {
padding: 10px;
}
</style>
\ No newline at end of file
<template>
<div class="container">
<div>
<el-form :inline="true" :model="reimbursementQurey">
<el-form-item>
<!-- <el-button
type="success"
icon="el-icon-circle-plus-outline"
@click="addreimbursement()"
>申请报销</el-button
> -->
</el-form-item>
</el-form>
</div>
<div class="conter">
<el-table
:data="reimbursementList"
style="width: 100%; text-align: center"
border
>
<el-table-column type="expand">
<template slot-scope="props">
<div style="padding: 10px">
<el-descriptions title="报销详情" :column="5" border>
<el-descriptions-item label="支付方式" :span="5">{{
props.row.paymentMethod
}}</el-descriptions-item>
<el-descriptions-item label="组长审批状态" :span="2"
><el-tag
:type="
props.row.reimbursementState == 0
? 'info'
: props.row.reimbursementState == 2
? 'danger'
: 'success'
"
>
{{
props.row.reimbursementState == 0
? "待审批"
: props.row.reimbursementState == 2
? "驳回"
: "通过"
}}
</el-tag></el-descriptions-item
>
<el-descriptions-item label="组长审批时间" :span="3">{{
props.row.headmanTime
}}</el-descriptions-item>
<el-descriptions-item label="组长驳回缘由" :span="5">{{
props.row.headmanRefute || ""
}}</el-descriptions-item>
<el-descriptions-item label="财务审批状态" :span="2"
><el-tag
:type="
props.row.reimbursementState == 4
? 'danger'
: props.row.reimbursementState == 3
? 'success'
: 'info'
"
>
{{
props.row.reimbursementState == 4
? "驳回"
: props.row.reimbursementState == 3
? "通过"
: "待审批"
}}
</el-tag></el-descriptions-item
>
<el-descriptions-item label="财务审批时间" :span="3">{{
props.row.financeTime
}}</el-descriptions-item>
<el-descriptions-item label="财务驳回缘由" :span="5">{{
props.row.finaceRefute || ""
}}</el-descriptions-item>
<el-descriptions-item label="查看详情" :span="5">
<el-button
@click="getdetails(props.row)"
type="primary"
style="margin: 5px"
size="mini"
>查看详情</el-button>
</el-descriptions-item>
</el-descriptions>
</div>
</template>
</el-table-column>
<el-table-column label="序号" width="50px">
<template slot-scope="scope">
{{
(reimbursementQurey.pageNum - 1) * reimbursementQurey.pageSize +
scope.$index +
1
}}
</template>
</el-table-column>
<el-table-column prop="userName" label="报销人" />
<el-table-column prop="projectName" label="项目" />
<el-table-column prop="typeName" label="报销类别">
<template slot-scope="scope">
<el-tag>{{ scope.row.typeName }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="applyTotalAmountSmall" label="申报总金额" />
<el-table-column label="核报总金额">
<template slot-scope="props">
{{ props.row.verifyTotalAmountSmall || "还未核实金额" }}
</template>
</el-table-column>
<el-table-column label="组长审批人">
<template slot-scope="props">
{{ props.row.headmanName || "暂无" }}
</template>
</el-table-column>
<el-table-column label="财务审批人">
<template slot-scope="props">
{{ props.row.financeName || "暂无" }}
</template>
</el-table-column>
<el-table-column
prop="fillingTime"
label="报销日期"
:formatter="timestampToTime"
/>
<el-table-column prop="prop" label="发票图片">
<template slot-scope="scope">
<el-button
type="primary"
size="mini"
@click="ReviseImage(scope.row)"
>点击查看</el-button
>
</template>
</el-table-column>
<el-table-column prop="reimbursementState" label="状态">
<template slot-scope="props">
<el-tag
:type="
props.row.reimbursementState == 0
? 'info'
: props.row.reimbursementState == 1 ||
props.row.reimbursementState == 3
? 'success'
: 'danger'
"
>
{{
props.row.reimbursementState == 0
? "待小组长通过"
: props.row.reimbursementState == 1
? "待财务长通过"
: props.row.reimbursementState == 2
? "小组长驳回"
: props.row.reimbursementState == 3
? "财务长通过"
: "财务长驳回"
}}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right">
<template slot-scope="scope">
<div v-if="scope.row.reimbursementState == 1">
<el-button
style="margin: 5px"
type="primary"
@click="agreeandrefuse(scope.row)"
>同意和驳回</el-button
>
</div>
<div
v-else-if="scope.row.reimbursementState == 0"
style="width:100%;text-align: center"
>
待小组长审批
</div>
<div
v-else-if="scope.row.reimbursementState == 2"
style="width:100%;text-align: center"
>
小组长已驳回
</div>
<div v-else style="width:100%;text-align: center;color:#13ce66">
已操作
</div>
</template>
</el-table-column>
</el-table>
<el-drawer title="查看详情" :visible.sync="drawer" :direction="direction">
<el-form :inline="true" label-width="80px">
<el-row>
<el-col
v-for="(item, index) in reimbursementDetails.list"
:key="index"
>
<el-form-item :label="item.name">
<el-input v-model="item.money"></el-input>
</el-form-item>
<el-form-item label="说明">
<el-input v-model="item.remarks"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-drawer>
</div>
<div class="footer">
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="reimbursementQurey.pageNum"
:page-size="reimbursementQurey.pageSize"
layout="total, prev, pager, next"
:total="total"
></el-pagination>
</div>
<el-drawer
title="核实金额"
:visible.sync="dialogVisible"
direction="btt"
:size="'100%'"
>
<div style="padding: 10px; width: 100%">
<el-row :gutter="20">
<el-col :xl="12" :lg="12" :md="24" :sm="24" style="margin: 10px 0px">
<el-descriptions title="报销详情" :column="3" border>
<el-descriptions-item label="报销人">{{
reimbursementData.userName
}}</el-descriptions-item>
<el-descriptions-item label="报销项目">{{
reimbursementData.projectName
}}</el-descriptions-item>
<el-descriptions-item label="报销类别">{{
reimbursementData.typeName
}}</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="3" border>
<el-descriptions-item :label="item.name" v-for="( item ,index ) in financeList.list" :key="index">
{{item.money}}
</el-descriptions-item>
</el-descriptions>
<el-descriptions border>
<el-descriptions-item :span="2" label="申请报销总金额(大写)">{{
reimbursementData.applyTotalAmountLarge
}}</el-descriptions-item>
<el-descriptions-item label="申请报销总金额(小写)">{{
reimbursementData.applyTotalAmountSmall
}}</el-descriptions-item>
<el-descriptions-item :span="2" label="核实报销总金额(大写)">{{
from.verifyTotalAmountLarge
}}</el-descriptions-item>
<el-descriptions-item label="核实报销总金额(小写)">{{
from.verifyTotalAmountSmall
}}</el-descriptions-item>
</el-descriptions>
</el-col>
<el-col :xl="12" :lg="12" :md="24" :sm="24" style="margin: 10px 0px">
<el-form
ref="form"
:model="from"
:inline="true"
label-width="200px"
:rules="rules"
>
<el-form-item
label="核实报销总金额(大写)"
prop="verifyTotalAmountLarge"
>
<el-input v-model="from.verifyTotalAmountLarge"></el-input>
</el-form-item>
<el-form-item
label="核实报销总金额(小写)"
prop="verifyTotalAmountSmall"
>
<el-input v-model="from.verifyTotalAmountSmall"></el-input>
</el-form-item>
</el-form>
<div style="width: 100%; text-align: right; padding: 0px 10%">
<el-button style="margin: 5px" type="success" @click="agree()"
>同意</el-button
>
<el-button style="margin: 5px" type="warning" @click="refuse()"
>驳回</el-button
>
</div>
</el-col>
</el-row>
</div>
</el-drawer>
<el-drawer
title="发票详情"
:visible.sync="invoiceShow"
:direction="direction"
size="40%"
>
<!-- filePath-->
<el-table
:data="getinvoivelist"
style="width: 100%; text-align: center"
border
>
<el-table-column
type="index"
label="序号"
width="40"
></el-table-column>
<el-table-column prop="prop" label="发票详情">
<template slot-scope="scope">
<el-image
style="width: 100px; height: 100px"
:src="scope.row.filePath"
:preview-src-list="[scope.row.filePath]"
></el-image>
</template>
</el-table-column>
</el-table>
</el-drawer>
</div>
</template>
<script>
import { money } from "@/utils/myValidate";
import { selectByReimbursementId } from "@/api/reimbursementDetails";
import { selectByFinance,financeApproval} from "@/api/reimbursement";
import { selectAllById } from "@/api/project";
export default {
data() {
return {
//抽屉
drawer: false,
direction: "rtl",
reimbursementDetails: {
list: [],
},
financeList: {
list: [],
},
dialogVisible: false,
reimbursementData: {},
reimbursementQurey: {
companyId: null,
userId: null,
pageNum: 1,
pageSize: 10,
},
total: 0,
reimbursementList: [],
from: {
reimbursementId: null,
financeId: null,
finaceRefute: null,
financeTime: null,
reimbursementState: null, //0待审批 1小组长通过 2小组长驳回 3财务通过 4财务驳回
verifyTotalAmountLarge: null,
verifyTotalAmountSmall: null,
},
rules: {
verifyTotalAmountLarge: [
{
required: true,
message: "请输入申请报销总金额(大写)",
trigger: "blur",
},
],
verifyTotalAmountSmall: [
{ required: true, validator: money, trigger: "blur" },
],
},
invoiceShow: false,
getinvoivelist:[],
//查询图片给的值
getinvoiveId: {
companyId: null,
reimbursementId: 0
},
};
},
created() {
this.reimbursementQurey.userId = this.$store.getters.urId;
this.reimbursementQurey.companyId = this.$store.getters.companyId;
this.getinvoiveId.companyId = this.$store.getters.companyId;
this.getReimbursement();
},
methods: {
//查看详情
getdetails(data) {
this.drawer = true;
let param = {
reimbursementId: data.reimbursementId,
};
selectByReimbursementId(param)
.then((res) => {
if (res.success) {
//获取数据
this.reimbursementDetails.list = res.data;
this.$message.success(res.msg);
}
})
.catch((error) => {
this.$message.error("查询失败");
});
},
//获取报销项
getgetdetails(data) {
console.log(data);
let param = {
reimbursementId: data.reimbursementId,
};
selectByReimbursementId(param)
.then((res) => {
console.log(res)
if (res.success) {
//获取数据
this.financeList.list = res.data;
// this.$message.success(res.msg);
}
})
.catch((error) => {
this.$message.error("查询失败");
});
},
//获取申请报销列表
getReimbursement() {
// console.log(this.reimbursementQurey)
let param = {
companyId: this.reimbursementQurey.companyId,
pageNum: this.reimbursementQurey.pageNum,
pageSize: this.reimbursementQurey.pageSize,
};
selectByFinance(param)
.then((res) => {
// console.log(res)
if (res.success) {
this.reimbursementList = res.data.list;
// console.log(this.reimbursementList)
this.total = res.data.total;
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("回去数据失败");
});
},
//换页
handleCurrentChange(val) {
this.reimbursementQurey.pageNum = val;
this.getReimbursement();
},
//agreeandrefuse
agreeandrefuse(data) {
this.getgetdetails(data)
console.log(this.financeList)
this.reimbursementData = data;
this.dialogVisible = true;
},
agree() {
this.$refs.form.validate((valid) => {
if (valid) {
this.$confirm("是否同意此报销单?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
//处理数据
this.from.reimbursementId =
this.reimbursementData.reimbursementId;
this.from.financeId = this.$store.getters.urId;
this.from.financeTime = this.time();
this.from.reimbursementState = 3;
financeApproval(this.from)
.then((res) => {
if (res.success) {
this.$message.success("操作成功");
this.getReimbursement();
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("操作失败");
});
this.dialogVisible = false;
})
.catch(() => {
this.$message({
type: "info",
message: "取消操作",
});
this.dialogVisible = false;
});
}
});
},
//驳回
refuse() {
this.$prompt("驳回理由", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then((value) => {
//处理数据
this.from.reimbursementId = this.reimbursementData.reimbursementId;
this.from.financeId = this.$store.getters.urId;
this.from.finaceRefute = value.value;
this.from.financeTime = this.time();
this.from.reimbursementState = 4;
financeApproval(this.from)
.then((res) => {
if (res.success) {
this.$message.success("操作成功");
this.getReimbursement();
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("操作失败");
});
this.dialogVisible = false;
})
.catch(() => {
this.$message({
type: "info",
message: "取消操作",
});
this.dialogVisible = false;
});
},
//时间处理 yyyy-MM-dd hh:mm:ss
time() {
var date = new Date();
var Y = date.getFullYear() + "-";
var M =
(date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
var D =
(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
var h =
(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
var m =
(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
":";
var s =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return Y + M + D + h + m + s;
},
//时间处理
timestampToTime(row, column, cellValue) {
return cellValue.split(" ")[0];
},
//查看图片的方法
ReviseImage(row) {
this.invoiceShow = true;
this.getinvoiveId.reimbursementId = row.reimbursementId;
//console.log(process.env.VUE_APP_BASE_API);
this.Selectinsertlsit();
},
//查询发票图片
Selectinsertlsit() {
selectAllById(this.getinvoiveId)
.then((res) => {
if (res.success) {
this.getinvoivelist = res.data;
this.getinvoivelist.forEach((e) => {
e.filePath = process.env.VUE_APP_BASE_API + e.filePath;
});
console.log(this.getinvoivelist);
} else {
this.$message.error(res.msg);
this.back();
}
})
.catch((error) => {
this.$message.error("获取发票图片失败");
this.back();
});
},
},
};
</script>
<style scoped>
.container {
padding: 10px;
}
.conter {
margin-bottom: 10px;
}
.footer {
text-align: right;
}
</style>
\ No newline at end of file
<template>
<div class="container">
<div>
<el-form :inline="true" :model="reimbursementQurey">
<el-form-item>
<!-- <el-button
type="success"
icon="el-icon-circle-plus-outline"
@click="addreimbursement()"
>申请报销</el-button
> -->
</el-form-item>
</el-form>
</div>
<div class="conter">
<el-table
:data="reimbursementList"
style="width: 100%; text-align: center"
border
>
<el-table-column type="expand">
<template slot-scope="props">
<div style="padding: 10px">
<el-descriptions title="报销详情" :column="5" border>
<el-descriptions-item label="支付方式" :span="5">{{
props.row.paymentMethod
}}</el-descriptions-item>
<el-descriptions-item label="组长审批状态" :span="2"
><el-tag
:type="
props.row.reimbursementState == 0
? 'info'
: props.row.reimbursementState == 2
? 'danger'
: 'success'
"
>
{{
props.row.reimbursementState == 0
? "待审批"
: props.row.reimbursementState == 2
? "驳回"
: "通过"
}}
</el-tag></el-descriptions-item
>
<el-descriptions-item label="组长审批时间" :span="3">{{
props.row.headmanTime
}}</el-descriptions-item>
<el-descriptions-item label="组长驳回缘由" :span="5">{{
props.row.headmanRefute || ""
}}</el-descriptions-item>
<el-descriptions-item label="财务审批状态" :span="2"
><el-tag
:type="
props.row.reimbursementState == 4
? 'danger'
: props.row.reimbursementState == 3
? 'success'
: 'info'
"
>
{{
props.row.reimbursementState == 4
? "驳回"
: props.row.reimbursementState == 3
? "通过"
: "待审批"
}}
</el-tag></el-descriptions-item
>
<el-descriptions-item label="财务审批时间" :span="3">{{
props.row.financeTime
}}</el-descriptions-item>
<el-descriptions-item label="财务驳回缘由" :span="5">{{
props.row.finaceRefute || ""
}}</el-descriptions-item>
<el-descriptions-item label="查看详情" :span="5">
<el-button
@click="getdetails(props.row)"
type="primary"
style="margin: 5px"
size="mini"
>查看详情</el-button
>
</el-descriptions-item>
</el-descriptions>
</div>
</template>
</el-table-column>
<el-table-column label="序号" width="50px">
<template slot-scope="scope">
{{
(reimbursementQurey.pageNum - 1) * reimbursementQurey.pageSize +
scope.$index +
1
}}
</template>
</el-table-column>
<el-table-column prop="userName" label="报销人" />
<el-table-column prop="projectName" label="项目" />
<el-table-column prop="typeName" label="报销类别">
<template slot-scope="scope">
<el-tag>{{ scope.row.typeName }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="applyTotalAmountSmall" label="申报总金额" />
<el-table-column label="核报总金额">
<template slot-scope="props">
{{ props.row.verifyTotalAmountSmall || "还未核实金额" }}
</template>
</el-table-column>
<el-table-column label="组长审批人">
<template slot-scope="props">
{{ props.row.headmanName || "暂无" }}
</template>
</el-table-column>
<el-table-column label="财务审批人">
<template slot-scope="props">
{{ props.row.financeName || "暂无" }}
</template>
</el-table-column>
<el-table-column
prop="fillingTime"
label="报销日期"
:formatter="timestampToTime"
/>
<el-table-column prop="prop" label="发票图片">
<template slot-scope="scope">
<el-button
type="primary"
size="mini"
@click="ReviseImage(scope.row)"
>点击查看</el-button
>
</template>
</el-table-column>
<el-table-column prop="reimbursementState" label="状态">
<template slot-scope="props">
<el-tag
:type="
props.row.reimbursementState == 0
? 'info'
: props.row.reimbursementState == 1 ||
props.row.reimbursementState == 3
? 'success'
: 'danger'
"
>
{{
props.row.reimbursementState == 0
? "待小组长通过"
: props.row.reimbursementState == 1
? "待财务长通过"
: props.row.reimbursementState == 2
? "小组长驳回"
: props.row.reimbursementState == 3
? "财务长通过"
: "财务长驳回"
}}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" fixed="right">
<template slot-scope="scope">
<div v-if="scope.row.reimbursementState == 0">
<el-button
style="margin: 5px"
size="mini"
type="success"
@click="agree(scope.row)"
>同意</el-button
>
<el-button
style="margin: 5px"
size="mini"
type="warning"
@click="refuse(scope.row)"
>驳回</el-button
>
</div>
<div v-else style="width:100%;text-align: center;color:#13ce66">
已操作
</div>
</template>
</el-table-column>
</el-table>
<el-drawer title="查看详情" :visible.sync="drawer" :direction="direction">
<el-form :inline="true" label-width="80px">
<el-row>
<el-col
v-for="(item, index) in reimbursementDetails.list"
:key="index"
>
<el-form-item :label="item.name">
<el-input v-model="item.money"></el-input>
</el-form-item>
<el-form-item label="说明">
<el-input v-model="item.remarks"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-drawer>
<el-drawer
title="发票详情"
:visible.sync="invoiceShow"
:direction="direction"
size="40%"
>
<!-- filePath-->
<el-table
:data="getinvoivelist"
style="width: 100%; text-align: center"
border
>
<el-table-column
type="index"
label="序号"
width="40"
></el-table-column>
<el-table-column prop="prop" label="发票详情">
<template slot-scope="scope">
<el-image
style="width: 100px; height: 100px"
:src="scope.row.filePath"
:preview-src-list="[scope.row.filePath]"
></el-image>
</template>
</el-table-column>
</el-table>
</el-drawer>
</div>
<div class="footer">
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="reimbursementQurey.pageNum"
:page-size="reimbursementQurey.pageSize"
layout="total, prev, pager, next"
:total="total"
></el-pagination>
</div>
</div>
</template>
<script>
import { selectByHeadman, headamApproval } from "@/api/reimbursement";
import { selectByReimbursementId } from "@/api/reimbursementDetails";
import { selectAllById } from "@/api/project";
export default {
data() {
return {
//抽屉
drawer: false,
direction: "rtl",
reimbursementDetails: {
list: [],
},
reimbursementQurey: {
userId: null,
pageNum: 1,
pageSize: 10,
},
total: 0,
reimbursementList: [],
from: {
reimbursementId: null,
headmanId: null,
headmanRefute: null,
headmanTime: null,
reimbursementState: null, //0待审批 1小组长通过 2小组长驳回 3财务通过 4财务驳回
},
invoiceShow: false,
getinvoivelist: [],
//查询图片给的值
getinvoiveId: {
companyId: null,
reimbursementId: 0,
},
};
},
created() {
this.getinvoiveId.companyId = this.$store.getters.companyId;
this.reimbursementQurey.userId = this.$store.getters.urId;
this.getReimbursement();
},
methods: {
//查看详情
getdetails(data) {
this.drawer = true;
let param = {
reimbursementId: data.reimbursementId,
};
selectByReimbursementId(param)
.then((res) => {
if (res.success) {
//获取数据
this.reimbursementDetails.list = res.data;
this.$message.success(res.msg);
}
})
.catch((error) => {
this.$message.error("查询失败");
});
},
//获取申请报销列表
getReimbursement() {
selectByHeadman(this.reimbursementQurey)
.then((res) => {
if (res.success) {
this.reimbursementList = res.data.list;
this.total = res.data.total;
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("回去数据失败");
});
},
//换页
handleCurrentChange(val) {
this.reimbursementQurey.pageNum = val;
this.getReimbursement();
},
agree(data) {
this.$confirm("是否同意此报销单?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
//处理数据
this.from.reimbursementId = data.reimbursementId;
this.from.headmanId = this.$store.getters.urId;
this.from.headmanTime = this.time();
this.from.reimbursementState = 1;
headamApproval(this.from)
.then((res) => {
if (res.success) {
this.$message.success("操作成功");
this.getReimbursement();
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("操作失败");
});
})
.catch(() => {
this.$message({
type: "info",
message: "取消操作",
});
});
},
//驳回
refuse(data) {
this.$prompt("驳回理由", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then((value) => {
//处理数据
this.from.reimbursementId = data.reimbursementId;
this.from.headmanId = this.$store.getters.urId;
this.from.headmanRefute = value.value;
this.from.headmanTime = this.time();
this.from.reimbursementState = 2;
headamApproval(this.from)
.then((res) => {
if (res.success) {
this.$message.success("操作成功");
this.getReimbursement();
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("操作失败");
});
})
.catch((error) => {
console.log(error);
this.$message({
type: "info",
message: "取消操作",
});
});
},
//时间处理 yyyy-MM-dd hh:mm:ss
time() {
var date = new Date();
var Y = date.getFullYear() + "-";
var M =
(date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
var D =
(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
var h =
(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
var m =
(date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
":";
var s =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return Y + M + D + h + m + s;
},
//时间处理
timestampToTime(row, column, cellValue) {
return cellValue.split(" ")[0];
},
//查看图片的方法
ReviseImage(row) {
this.invoiceShow = true;
this.getinvoiveId.reimbursementId = row.reimbursementId;
//console.log(process.env.VUE_APP_BASE_API);
this.Selectinsertlsit();
},
//查询发票图片
Selectinsertlsit() {
selectAllById(this.getinvoiveId)
.then((res) => {
if (res.success) {
this.getinvoivelist = res.data;
this.getinvoivelist.forEach((e) => {
e.filePath = process.env.VUE_APP_BASE_API + e.filePath;
});
console.log(this.getinvoivelist);
} else {
this.$message.error(res.msg);
this.back();
}
})
.catch((error) => {
this.$message.error("获取发票图片失败");
this.back();
});
},
},
};
</script>
<style scoped>
.container {
padding: 10px;
}
.conter {
margin-bottom: 10px;
}
.footer {
text-align: right;
}
</style>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment