Commit 2423ec69 authored by 柳 佳乐's avatar 柳 佳乐
Browse files

20221104

parent 344202ed
finance @ 6e137f66
Subproject commit 6e137f66e7646a55ebb0681483b9c502249d0d84
import request from '@/utils/request'
///fixedAssets/queryBypageAll 查询公司资产(分页)
export function queryBypageAll(data) {
return request({
url: '/fixedAssets/queryBypageAll',
method: 'post',
data
})
}
///fixedAssets/insert添加
export function insert(data) {
return request({
url: '/fixedAssets/insert',
method: 'post',
data
})
}
///fixedAssets/update修改管理者
export function update(data) {
return request({
url: '/fixedAssets/update',
method: 'post',
data
})
}
////fixedAssets/queryBypage管理者查询负责的资产
export function queryBypage(data) {
return request({
url: '/fixedAssets/queryBypage',
method: 'post',
data
})
}
///fixedAssets/selectByFixedId 查询单挑记录
export function selectByFixedId(data) {
return request({
url: '/fixedAssets/selectByFixedId',
method: 'post',
data
})
}
///fixedAssets/update 修改资产信息
export function updates(data) {
return request({
url: '/fixedAssets/update',
method: 'post',
data
})
}
///fixedUse/useRegistered 使用登记
export function useRegistered(data) {
return request({
url: '/fixedUse/useRegistered',
method: 'post',
data
})
}
////fixedUse/returnRegistration 归还登记
export function returnRegistration(data) {
return request({
url: '/fixedUse/returnRegistration',
method: 'post',
data
})
}
///fixedUse/queryByPageByFixedId
//分页查询(管理者查询固定资产的使用记录)
export function queryByPageByFixedId(data) {
return request({
url: '/fixedUse/queryByPageByFixedId',
method: 'post',
data
})
}
///fixedAssets/lose丢失
export function lose(data) {
return request({
url: '/fixedAssets/lose',
method: 'post',
data
})
}
////fixedUse/queryBypage查询自己的使用情况
export function queryBypageget(data) {
return request({
url: '/fixedUse/queryBypage',
method: 'post',
data
})
}
\ No newline at end of file
import request from '@/utils/request'
//分页查询(查询全公司的)
export function queryBypage(data) {
return request({
url: '/companyFile/queryBypage',
method: 'post',
data
})
}
//上传公司文件/file/companyFile
export function companyFile(data) {
return request({
url: '/file/companyFile',
method: 'post',
data
})
}
//上传本人文件/companyFile/queryBypageByuserId
export function queryBypageByuserId(data) {
return request({
url: '/companyFile/queryBypageByuserId',
method: 'post',
data
})
}
......@@ -52,59 +52,62 @@ export function selectByProjectId(data) {
})
}
//发票添加
export function insertList(data){
export function insertList(data) {
return request({
url:'/invoice/insert',
method:'post',
url: '/invoice/insert',
method: 'post',
data
})
}
//发票查询(带着分页)
///invoice/queryBypage
export function queryBypageIncomeAdd(data){
export function queryBypageIncomeAdd(data) {
return request({
url:'/invoice/queryBypage',
method:'post',
url: '/invoice/queryBypage',
method: 'post',
data
})
}
//查询发票编号
//POST/invoice/selectAllBystatus
export function selectAllBystatus(data){
export function selectAllBystatus(data) {
return request({
url:'/invoice/selectAllBystatus',
method:'post',
url: '/invoice/selectAllBystatus',
method: 'post',
data
})
}
///invoice/updatesubmit报销提交修改
export function updatesubmit(data){
export function updatesubmit(data) {
return request({
url:'/invoice/updatesubmit',
method:'post',
url: '/invoice/updatesubmit',
method: 'post',
data
})
}
//查询发票图片
export function selectAllById(data){
export function selectAllById(data) {
return request({
url:'/invoice/selectAllById',
method:'post',
url: '/invoice/selectAllById',
method: 'post',
data
})
}
//删除关系
export function deletBystatus(data) {
///enclosure/selectById附件查询
export function selectByIdF(data) {
return request({
url: '/invoice/deletBystatus',
url: '/enclosure/selectById',
method: 'post',
data
})
}
///enclosure/selectById附件查询
export function selectByIdF(data) {
///invoice/deletBystatus
//删除关系
export function deletBystatus(data) {
return request({
url: '/enclosure/selectById',
url: '/invoice/deletBystatus',
method: 'post',
data
})
......@@ -118,7 +121,7 @@ export function deleteById(data) {
})
}
///invoice/delete删除发票,彻底删除
export function deleteexpen(data) {
export function deleteexpen(data) {
return request({
url: '/invoice/delete',
method: 'post',
......
import request from '@/utils/request.js'
// 展示数据
// /trip/selectByUserId 分页查询(查询本人) post
export function queryBypage(data) {
return request({
url:'/trip/selectByUserId',
method:'post',
data
})
}
// /trip/selectByHeadman 分页查询(小组长查询) post
export function queryByheadman(data) {
return request({
url:'/trip/selectByHeadman',
method:'post',
data
})
}
// /trip/selectByFinance 分页查询(财务人员查询) post
export function queryBypagefinance(data) {
return request({
url:'/trip/selectByFinance',
method:'post',
data
})
}
// 查询报销类别
// /Type/selectAll 查询类别(不带分页) post
// 传的值 companyId typeCategory=0
export function selectTypeitem(data) {
return request({
url:'/Type/selectAll',
method:'post',
data
})
}
// 查询项目列表
// /project/selectAll 查询项目列表(不分页) post
export function selectProjectitem(data) {
return request({
url:'/project/selectAll',
method:'post',
data
})
}
// 添加随从人员
// /user/secletAllStaff 获取全部员工不带分页 post
export function selectProjectpeople(data) {
return request({
url:'/user/secletAllStaff',
method:'post',
data
})
}
// 添加数据
// /trip/insert post
export function insert(data) {
return request({
url:'/trip/insert',
method:'post',
data
})
}
// 添加随从人员 修改随从人员
// /tripPersonnel/insertBatch 添加和更改 post
export function insertId(data) {
return request({
url:'/tripPersonnel/insertBatch',
method:'post',
data
})
}
// 查询随从人员
// /tripPersonnel/selectAll post
export function selectAll(data) {
return request({
url:'/tripPersonnel/selectAll',
method:'post',
data
})
}
// 小组长审批
// /trip/headamApproval post
export function Approval(data) {
return request({
url:'/trip/headamApproval',
method:'post',
data
})
}
// 财务审批
// /trip/financeApproval post
export function finApproval(data) {
return request({
url:'/trip/financeApproval',
method:'post',
data
})
}
//撤回
export function reimbursementListid(tripId) {
return request({
url:`/trip/withdraw/${tripId}`,
method: 'post'
})
}
// /trip/resubmit 重新提交.
export function resubmit(data) {
return request({
//url: `/reimbursement/resubmit/${reimbursementId}`,
url:'/trip/resubmit',
method: 'post',
data
})
}
// 查看详情 /trip/selectByTripId post
export function selectByTripId(data) {
return request({
//url: `/reimbursement/resubmit/${reimbursementId}`,
url:'/trip/selectByTripId',
method: 'post',
data
})
}
// 修改 /trip/update post
export function update(data) {
return request({
//url: `/reimbursement/resubmit/${reimbursementId}`,
url:'/trip/update',
method: 'post',
data
})
}
// /invoice/updatesubmit 报销提交修改(添加发票)
export function Addinvoice(data) {
return request({
//url: `/reimbursement/resubmit/${reimbursementId}`,
url:'/invoice/updatesubmit',
method: 'post',
data
})
}
\ No newline at end of file
......@@ -7,90 +7,103 @@ import Layout from '@/layout'
/**
* 定义组件名称和组件对象的map对象
*/
*/
export const componentMap = {
'layout': require('@/layout').default,
'permission_menu': () => import('@/views/permission/menu').then(m=>m.default),
'permission_menu': () => import('@/views/permission/menu').then(m => m.default),
'permission_role': () => import('@/views/permission/role').then(m => m.default),
'permission_role': () => import('@/views/permission/role').then(m=>m.default),
'company_list':()=>import('@/views/company/index').then(m=>m.default),
'company_add':()=>import('@/views/company/addcompany').then(m=>m.default),
'company_list': () => import('@/views/company/index').then(m => m.default),
'company_add': () => import('@/views/company/addcompany').then(m => m.default),
'personal_vue': ()=>import('@/views/personal/personal').then(m=>m.default),
'personal_vue': () => import('@/views/personal/personal').then(m => m.default),
'staff_list':()=>import('@/views/staff/staffList').then(m=>m.default),
'staff_add':()=>import('@/views/staff/addStaff').then(m=>m.default),
'staff_updata':()=>import('@/views/staff/updataStaff').then(m=>m.default),
'staff_list': () => import('@/views/staff/staffList').then(m => m.default),
'staff_add': () => import('@/views/staff/addStaff').then(m => m.default),
'staff_updata': () => import('@/views/staff/updataStaff').then(m => m.default),
'type_list':()=>import('@/views/type/typeList').then(m=>m.default),
'type_add':()=>import('@/views/type/typeAdd').then(m=>m.default),
'type_updata':()=>import('@/views/type/typeUpdata').then(m=>m.default),
'type_list': () => import('@/views/type/typeList').then(m => m.default),
'type_add': () => import('@/views/type/typeAdd').then(m => m.default),
'type_updata': () => import('@/views/type/typeUpdata').then(m => m.default),
'project_list':()=>import('@/views/project/projectList').then(m=>m.default),
'project_add':()=>import('@/views/project/projectAdd').then(m=>m.default),
'project_updata':()=>import('@/views/project/projectUpdata').then(m=>m.default),
'project_list': () => import('@/views/project/projectList').then(m => m.default),
'project_add': () => import('@/views/project/projectAdd').then(m => m.default),
'project_updata': () => import('@/views/project/projectUpdata').then(m => m.default),
'project_member_list':()=>import('@/views/project/member/memberList').then(m=>m.default),
'project_member_updata':()=>import('@/views/project/member/memberUpdata').then(m=>m.default),
'project_member_list': () => import('@/views/project/member/memberList').then(m => m.default),
'project_member_updata': () => import('@/views/project/member/memberUpdata').then(m => m.default),
'project_income_list':()=>import('@/views/project/income/incomeList').then(m=>m.default),
'project_income_add':()=>import('@/views/project/income/incomeAdd').then(m=>m.default),
'project_income_updata':()=>import('@/views/project/income/incomeUpdata').then(m=>m.default),
'project_income_list': () => import('@/views/project/income/incomeList').then(m => m.default),
'project_income_add': () => import('@/views/project/income/incomeAdd').then(m => m.default),
'project_income_updata': () => import('@/views/project/income/incomeUpdata').then(m => m.default),
'project_expend_list':()=>import('@/views/project/expend/expendList').then(m=>m.default),
'project_expend_add':()=>import('@/views/project/expend/expendAdd').then(m=>m.default),
'project_expend_updata':()=>import('@/views/project/expend/expendUpdata').then(m=>m.default),
'project_expend_list': () => import('@/views/project/expend/expendList').then(m => m.default),
'project_expend_add': () => import('@/views/project/expend/expendAdd').then(m => m.default),
'project_expend_updata': () => import('@/views/project/expend/expendUpdata').then(m => m.default),
//报销单
'expense_list': () => import('@/views/expense/expenseList.vue').then(m => m.default),
//负责项目列表
'beresponsiblefor_List':()=>import('@/views/project/beresponsiblefor/beresponsibleforList').then(m => m.default),
'beresponsiblefor_List': () => import('@/views/project/beresponsiblefor/beresponsibleforList').then(m => m.default),
//参与项目列表
'participatein_List':()=>import('@/views/project/participatein/participateinList').then(m => m.default),
'participatein_List': () => import('@/views/project/participatein/participateinList').then(m => m.default),
'reimbursement_list':()=>import('@/views/reimbursement/reimbursementList').then(m=>m.default),
'reimbursement_add':()=>import('@/views/reimbursement/reimbursementAdd').then(m=>m.default),
'reimbursement_updata':()=>import('@/views/reimbursement/reimbursementUpdata').then(m=>m.default),
'reimbursement_list': () => import('@/views/reimbursement/reimbursementList').then(m => m.default),
'reimbursement_add': () => import('@/views/reimbursement/reimbursementAdd').then(m => m.default),
'reimbursement_updata': () => import('@/views/reimbursement/reimbursementUpdata').then(m => m.default),
//'reimbursement_print':()=>import('@/views/reimbursement/reimbursementPrint').then(m=>m.default),
'reimbursement_finance_list':()=>import('@/views/reimbursement/finance/financeList').then(m=>m.default),
'reimbursement_headman_list':()=>import('@/views/reimbursement/headman/headmanList').then(m=>m.default),
'reimbursement_finance_list': () => import('@/views/reimbursement/finance/financeList').then(m => m.default),
'reimbursement_headman_list': () => import('@/views/reimbursement/headman/headmanList').then(m => m.default),
'businessTravel_list':()=>import('@/views/businessTravel/businessTravelList').then(m=>m.default),
'businessTravel_add':()=>import('@/views/businessTravel/businessTravelAdd').then(m=>m.default),
'businessTravel_updata':()=>import('@/views/businessTravel/businessTravelUpdata').then(m=>m.default),
'businessTravel_list': () => import('@/views/businessTravel/businessTravelList').then(m => m.default),
'businessTravel_add': () => import('@/views/businessTravel/businessTravelAdd').then(m => m.default),
'businessTravel_updata': () => import('@/views/businessTravel/businessTravelUpdata').then(m => m.default),
'businessTravel_finance_list':()=>import('@/views/businessTravel/finance/financeList').then(m=>m.default),
'businessTravel_headman_list':()=>import('@/views/businessTravel/headman/headmanList').then(m=>m.default),
'businessTravel_finance_list': () => import('@/views/businessTravel/finance/financeList').then(m => m.default),
'businessTravel_headman_list': () => import('@/views/businessTravel/headman/headmanList').then(m => m.default),
'reimburtype_list': () => import('@/views/reimebursementItem/reimebursementItemList.vue').then(m => m.default),
'reimebursementItem_Add': () => import('@/views/reimebursementItem/reimebursementItemAdd.vue').then(m => m.default),
'reimebursementItem_Update': () => import('@/views/reimebursementItem/reimebursementItemUpdate.vue').then(m => m.default),
'apply_businessTravel_list':()=>import('@/views/businessTravel/apply/applyBusinessTravelList').then(m=>m.default),
'apply_businessTravel_add':()=>import('@/views/businessTravel/apply/applyBusinessTravelAdd').then(m=>m.default),
'apply_businessTravel_updata':()=>import('@/views/businessTravel/apply/applyBusinessTravelUpdata').then(m=>m.default),
'apply_businessTravel_list': () => import('@/views/businessTravel/apply/applyBusinessTravelList').then(m => m.default),
'apply_businessTravel_add': () => import('@/views/businessTravel/apply/applyBusinessTravelAdd').then(m => m.default),
'apply_businessTravel_updata': () => import('@/views/businessTravel/apply/applyBusinessTravelUpdata').then(m => m.default),
'apply_businessTravel_finance_list': () => import('@/views/businessTravel/apply/finance/financeList').then(m => m.default),
'apply_businessTravel_headman_list': () => import('@/views/businessTravel/apply/headman/headmanList').then(m => m.default),
'apply_businessTravel_finance_list':()=>import('@/views/businessTravel/apply/finance/financeList').then(m=>m.default),
'apply_businessTravel_headman_list':()=>import('@/views/businessTravel/apply/headman/headmanList').then(m=>m.default),
'contract_list': () => import('@/views/contract/contractList').then(m => m.default),
'contract_type': () => import('@/views/contract/contractType').then(m => m.default),
'add_contract': () => import('@/views/contract/components/addContract').then(m => m.default),
'contract_list':()=>import('@/views/contract/contractList').then(m=>m.default),
'contract_type':()=>import('@/views/contract/contractType').then(m=>m.default),
'add_contract':()=>import('@/views/contract/components/addContract').then(m=>m.default),
'examine_approve': () => import('@/views/pettyMoney/examineApprove').then(m => m.default),
'add_petty_money_record': () => import('@/views/pettyMoney/addPettyMoneyRecord').then(m => m.default),
'petty_money_record': () => import('@/views/pettyMoney/pettyMoneyRecord').then(m => m.default),
'examine_approve':()=>import('@/views/pettyMoney/examineApprove').then(m=>m.default),
'add_petty_money_record':()=>import('@/views/pettyMoney/addPettyMoneyRecord').then(m=>m.default),
'petty_money_record':()=>import('@/views/pettyMoney/pettyMoneyRecord').then(m=>m.default),
// 出差报销列表
'spendreimbursement_List': () => import('@/views/Spendreimbursement/spendreimbursementList.vue').then(m => m.default),
// 添加出差报销
'spendreimbursement_Add': () => import('@/views/Spendreimbursement/spendreimbursementAdd.vue').then(m => m.default),
'spendreimbursement_finance_List': () => import('@/views/Spendreimbursement/finance/financeList.vue').then(m => m.default),
'spendreimbursement_headman_List': () => import('@/views/Spendreimbursement/headman/headmanList.vue').then(m => m.default),
'spendreimbursementList_Update': () => import('@/views/Spendreimbursement/spendreimbursementListUpdate.vue').then(m => m.default),
// 公司文件模块
'company_file_list':()=>import('@/views/companyFile/companyFileList').then(m=>m.default),
'self_file_list':()=>import('@/views/companyFile/selfFileList').then(m=>m.default),
'company_file_add':()=>import('@/views/companyFile/companyFileAdd').then(m=>m.default),
}
/**
......@@ -113,11 +126,10 @@ export const componentMap = {
}
*/
export const asyncRoutes=[
export const asyncRoutes = [
]
export const constantRoutes = [
{
export const constantRoutes = [{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
......@@ -138,7 +150,7 @@ export const constantRoutes = [
// hidden: true,
component: Layout,
redirect: '/personal',
},
]
......@@ -146,8 +158,11 @@ export const constantRoutes = [
const createRouter = () => new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes,asyncRoutes
scrollBehavior: () => ({
y: 0
}),
routes: constantRoutes,
asyncRoutes
})
......
<template>
<div class="container">
<!-- 表格内容区域 -->
<div class="total_content">
<el-table :data="tableData" style="width: 100%" border>
<el-table-column type="expand" align="center">
<template slot-scope="props">
<el-form label-position="left" class="demo-table-expand">
<div style="width: 100%">
<el-descriptions title="报销详情" :column="5" border>
<el-descriptions-item label="组长审批状态" :span="2">
<el-tag
:type="
props.row.tripStatus == 0
? 'info'
: props.row.tripStatus == 2
? 'danger'
: 'success'
"
>
{{
props.row.tripStatus == 0
? "待审批"
: props.row.tripStatus == 2
? "驳回"
: "通过"
}}
</el-tag>
</el-descriptions-item>
<el-descriptions-item
label="组长审批时间"
:span="3"
:formatter="timestampToTime"
>{{ 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.tripStatus == 4
? 'danger'
: props.row.tripStatus == 3
? 'success'
: 'info'
"
>
{{
props.row.tripStatus == 4
? "驳回"
: props.row.tripStatus == 3
? "通过"
: "待审批"
}}
</el-tag>
</el-descriptions-item>
<el-descriptions-item
label="财务审批时间"
:span="3"
:formatter="timestampToTime"
>{{ 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>
</el-form>
</template>
</el-table-column>
<el-table-column align="center" label="序号" width="50px">
<template slot-scope="scope">
{{
(queryitem.pageNum - 1) * queryitem.pageSize + scope.$index + 1
}}
</template>
</el-table-column>
<el-table-column align="center" label="报销人" prop="userName">
</el-table-column>
<el-table-column align="center" label="报销项目" prop="projectName">
</el-table-column>
<el-table-column
align="center"
label="申报总金额"
prop="applyTotalAmountSmall"
>
</el-table-column>
<el-table-column label="核报总金额" align="center">
<template slot-scope="props">
{{ props.row.verifyTotalAmountSmall || "还未核实金额" }}
</template>
</el-table-column>
<el-table-column align="center" label="组长审批人">
<template slot-scope="props">
{{ props.row.financeName || "暂无" }}
</template>
</el-table-column>
<el-table-column align="center" label="财务审批人">
<template slot-scope="props">
{{ props.row.financeName || "暂无" }}
</template>
</el-table-column>
<el-table-column
label="报销日期"
prop="applyTime"
:formatter="timestampToTime"
align="center"
>
</el-table-column>
<el-table-column align="center" label="发票图片">
<template slot-scope="scope">
<el-button
type="primary"
size="mini"
@click="ReviseImage(scope.row)"
>点击查看</el-button
>
</template>
</el-table-column>
<el-table-column align="center" label="附件">
<template slot-scope="scope">
<el-button
type="primary"
size="mini"
@click="selectImage(scope.row)"
>点击查看</el-button
>
</template>
</el-table-column>
<el-table-column align="center" label="状态">
<template slot-scope="props">
<el-tag
:type="
props.row.tripStatus == 0
? 'info'
: props.row.tripStatus == 1 || props.row.tripStatus == 3
? 'success'
: 'danger'
"
>
{{
props.row.tripStatus == 0
? "待审批"
: props.row.tripStatus == 1
? "小组长通过"
: props.row.tripStatus == 2
? "小组长驳回"
: props.row.tripStatus == 3
? "财务通过"
: props.row.tripStatus == 4
? "财务驳回"
: "不存在"
}}
</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<div v-if="scope.row.tripStatus == 1">
<el-button type="primary" @click="agreeandrefuse(scope.row)"
>同意和驳回</el-button
>
</div>
<div
v-else-if="scope.row.tripStatus == 0"
style="width:100%;text-align: center;"
>
待小组长审批
</div>
<div
v-else-if="scope.row.tripStatus == 2"
style="width:100%;text-align: center;color: red"
>
小组长已驳回
</div>
<div v-else style="width:100%;text-align: center;color:#13ce66">
已处理
</div>
</template>
</el-table-column>
</el-table>
<!-- 发票图片 -->
<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">
<div v-if="fromgetlist(scope.row)">
<el-image
style="width: 100px; height: 100px"
:src="scope.row.filePath"
:preview-src-list="[scope.row.filePath]"
></el-image>
</div>
<div v-else>
<a class="a-style" @click="Agrt(scope.row)">点击查看文件</a>
</div>
</template>
</el-table-column>
</el-table>
</el-drawer>
<!-- 查看详情 -->
<el-drawer
title="查看详情"
:visible.sync="drawer"
:direction="direction"
size="40%"
>
<el-form label-width="180px">
<el-row>
<el-col :span="12">
<div class="grid-content bg-purple">
<el-form-item label="审批状态">
<el-tag
:type="
paramlist.tripStatus == 0
? 'info'
: paramlist.tripStatus == 1 || paramlist.tripStatus == 3
? 'success'
: 'danger'
"
>
{{
paramlist.tripStatus == 0
? "待审批"
: paramlist.tripStatus == 1
? "小组长通过"
: paramlist.tripStatus == 2
? "小组长驳回"
: paramlist.tripStatus == 3
? "财务通过"
: paramlist.tripStatus == 4
? "财务驳回"
: "不存在"
}}
</el-tag>
</el-form-item>
<el-form-item label="附件数量">
<span>{{ paramlist.enclosureNumber }}</span>
</el-form-item>
<el-form-item label="出差理由">
<span>{{ paramlist.tripReason }}</span>
</el-form-item>
<el-form-item label="出发地点">
<span>{{ paramlist.fromPlace }}</span>
</el-form-item>
<el-form-item label="目的地点">
<span>{{ paramlist.purposePlace }}</span>
</el-form-item>
<el-form-item label="经过地点">
<span>{{ paramlist.transitPlace }}</span>
</el-form-item>
<el-form-item label="交通工具">
<span>{{ paramlist.vehicle }}</span>
</el-form-item>
<el-form-item label="伙食补贴">
<span>{{ paramlist.foodAllowance }}</span>
</el-form-item>
<el-form-item label="公杂补贴">
<span>{{ paramlist.publicMiscellaneousSubsidy }}</span>
</el-form-item>
<el-form-item label="随从人员">
<el-tag
type="warning"
size="medium"
v-for="item in paramlist.entouragelist"
:key="item.id"
style="margin: 0px 5px"
>{{ item.personnelName }}</el-tag
>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple-light">
<el-form-item label="火车/汽车/轮船费">
<span>{{ paramlist.tripCost }}</span>
</el-form-item>
<el-form-item label="机票费">
<span>{{ paramlist.planeTicket }}</span>
</el-form-item>
<el-form-item label="汽油费">
<span>{{ paramlist.trafficCost }}</span>
</el-form-item>
<el-form-item label="住宿费">
<span>{{ paramlist.lodgingCost }}</span>
</el-form-item>
<el-form-item label="其他费用">
<span>{{ paramlist.otherCost }}</span>
</el-form-item>
<el-form-item label="备注">
<span>{{ paramlist.remarks }}</span>
</el-form-item>
<el-form-item label="无票据说明">
<span>{{ paramlist.nobillExplain }}</span>
</el-form-item>
<el-form-item label="是否领取补贴">
<span>{{ paramlist.receiveSubsidy == 0 ? "否" : "是" }}</span>
</el-form-item>
<el-form-item label="天数">
<span>{{ paramlist.days }}</span>
</el-form-item>
</div>
</el-col>
</el-row>
</el-form>
</el-drawer>
</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="审批状态"
><el-tag
:type="
financelistData.tripStatus == 0
? 'info'
: financelistData.tripStatus == 1 ||
financelistData.tripStatus == 3
? 'success'
: 'danger'
"
>
{{
financelistData.tripStatus == 0
? "待审批"
: financelistData.tripStatus == 1
? "小组长通过"
: financelistData.tripStatus == 2
? "小组长驳回"
: financelistData.tripStatus == 3
? "财务通过"
: financelistData.tripStatus == 4
? "财务驳回"
: "不存在"
}}
</el-tag></el-descriptions-item
>
<el-descriptions-item label="项目列表">{{
financelistData.projectName
}}</el-descriptions-item>
<el-descriptions-item label="申请时间">{{
financelistData.applyTime
}}</el-descriptions-item>
<el-descriptions-item label="出差开始时间">{{
financelistData.startTime
}}</el-descriptions-item>
<el-descriptions-item label="出差结束时间">{{
financelistData.endTime
}}</el-descriptions-item>
</el-descriptions>
<el-descriptions border>
<el-descriptions-item :span="2" label="出差理由">{{
financelistData.tripReason
}}</el-descriptions-item>
<el-descriptions-item label="出发地点">{{
financelistData.fromPlace
}}</el-descriptions-item>
<el-descriptions-item :span="2" label="目的地点">{{
financelistData.purposePlace
}}</el-descriptions-item>
<el-descriptions-item label="经过地点">{{
financelistData.transitPlace
}}</el-descriptions-item>
<el-descriptions-item label="交通工具">{{
financelistData.vehicle
}}</el-descriptions-item>
<el-descriptions-item :span="2" label="伙食补贴">{{
financelistData.foodAllowance
}}</el-descriptions-item>
<el-descriptions-item label="公杂补贴">{{
financelistData.publicMiscellaneousSubsidy
}}</el-descriptions-item>
<el-descriptions-item label="驳回理由">{{
financelistData.headmanRefute
}}</el-descriptions-item>
<el-descriptions-item :span="2" label="火车/汽车/轮船费">{{
financelistData.tripCost
}}</el-descriptions-item>
<el-descriptions-item label="机票费">{{
financelistData.planeTicket
}}</el-descriptions-item>
<el-descriptions-item label="汽油费">{{
financelistData.trafficCost
}}</el-descriptions-item>
<el-descriptions-item :span="2" label="住宿费">{{
financelistData.lodgingCost
}}</el-descriptions-item>
<el-descriptions-item label="其他费用">{{
financelistData.otherCost
}}</el-descriptions-item>
<el-descriptions-item :span="2" label="备注">{{
financelistData.remarks
}}</el-descriptions-item>
<el-descriptions-item label="无票据说明">{{
financelistData.nobillExplain
}}</el-descriptions-item>
<el-descriptions-item label="是否领取补贴">{{
financelistData.receiveSubsidy
}}</el-descriptions-item>
<el-descriptions-item :span="2" label="天数">{{
financelistData.days
}}</el-descriptions-item>
<el-descriptions-item label="随从人员">
<span
v-for="item in financelistData.entouragelist"
:key="item.tripId"
style="margin: 0px 5px"
>
{{ item.userName }}
</span>
</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="agreeOrapproval"
:inline="true"
label-width="200px"
:rules="rules"
>
<el-form-item
label="核实报销总金额(大写)"
prop="verifyTotalAmountLarge"
>
<el-input
disabled
v-model="agreeOrapproval.verifyTotalAmountLarge"
></el-input>
</el-form-item>
<el-form-item
label="核实报销总金额(小写)"
prop="verifyTotalAmountSmall"
>
<el-input
v-model="agreeOrapproval.verifyTotalAmountSmall"
@change="
convertCurrency(agreeOrapproval.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>
<!-- 分页区域 -->
<div class="block">
<el-pagination
layout="->, total, prev, pager, next"
:total="total"
:page-size="queryitem.pageSize"
@current-change="getpagelist"
>
</el-pagination>
</div>
<!-- 附件的下载与添加 -->
<div>
<el-drawer
title="附件操作"
:visible.sync="drawer2"
:direction="direction"
size="50%"
>
<!-- <el-button
type="primary"
style="margin-left: 5%; margin: 30px 50px"
:disabled="disabled"
@click="updatecard"
>添加附件</el-button
> -->
<el-card
class="box-card"
style="width: 90%; margin-left: 5%; margin-top: 20px"
v-show="getshow == 1"
>
<el-row class="row-bg">
<div
v-for="index in queryDTOList"
:key="index.enclosureId"
class="lsitall"
>
<el-col :span="10">
<div style="margin-top: 6px; margin-left: 40px">
附件{{ index.enclosureId }}
</div>
</el-col>
<el-col :span="12" style="margin-left: -50px">
<el-button
type="primary"
icon="el-icon-folder-checked"
class="a-style"
size="mini"
style="font-size: 13px"
@click="delProject(index)"
>下载</el-button
>
<!-- <el-popover placement="top" width="160" v-model="index.visible">
<p>确定要删除此条附件吗</p>
<div style="text-align: right; margin: 0">
<el-button
size="mini"
type="text"
@click="index.visible = false"
>取消</el-button
>
<el-button
type="primary"
size="mini"
@click="deleteProject(index)"
>确定</el-button
>
</div>
<el-button
type="danger"
icon="el-icon-delete"
class="a-style"
size="mini "
style="font-size: 13px"
slot="reference"
>删除</el-button
>
</el-popover> -->
</el-col>
</div>
</el-row>
</el-card>
<!-- 附件上传 -->
<!-- <el-card
class="box-card"
style="width: 90%; margin-left: 5%; margin-top: 20px"
v-show="getshow == 0"
>
<div style="width: 60%; margin-left: 30px">
<el-input
type="textarea"
:rows="2"
placeholder="请输入附件详情"
v-model="proutlist1.enclosureDescribe"
style="margin: 20px 0px"
></el-input>
<el-upload
class="upload-demo"
ref="upload1"
drag
:action="action1"
:file-list="fileList1"
:on-remove="delfile1"
:auto-upload="false"
:on-change="onChangepdf"
:on-success="Refresh"
:data="proutlist1"
multiple
style="margin: 20px 0px"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或
<em>点击上传附件</em>
</div>
<div class="el-upload__tip" slot="tip">
只能上传文件,且不超过500kb
</div>
</el-upload>
</div>
<div style="margin-left: 75%">
<el-button @click="remove()">取 消</el-button>
<el-button
type="primary"
@click="determine()"
style="margin-top: 20px"
>确 定</el-button
>
</div>
</el-card> -->
<div class="box-card" v-show="getshow == 3"></div>
</el-drawer>
</div>
</div>
</template>
<script>
import { money } from "@/utils/myValidate";
import { queryBypagefinance } from "@/api/spendreimbursement";
import { selectAll } from "@/api/spendreimbursement";
import { finApproval } from "@/api/spendreimbursement";
import { selectAllById, selectByIdF, deleteById } from "@/api/project";
export default {
created() {
// 获取 companyId
this.queryitem.companyId = this.$store.getters.companyId;
this.getinvoiveId.companyId = this.$store.getters.companyId;
this.queryDTO.companyId = this.$store.getters.companyId;
this.action1 = process.env.VUE_APP_BASE_API + "/file/updataEnclosures"; //保存附件与下载的接口
this.getpagelist();
},
data() {
return {
queryitem: {
pageNum: 1,
pageSize: 10,
companyId: null,
},
//查询图片给的值
getinvoiveId: {
companyId: null,
tripId: 0,
},
total: null,
dialogVisible: false,
// 接受的数据
tableData: [],
// 随从人员
entouragelist: [],
// 同意和驳回
agreeOrapproval: {
tripId: null,
tripStatus: 0, //状态
financeId: null,
finaceRefute: "",
financeTime: null,
verifyTotalAmountLarge: null,
verifyTotalAmountSmall: null,
},
invoiceShow: false,
drawer: false,
paramlist: {},
financelistData: {},
rules: {
verifyTotalAmountLarge: [
{
required: true,
message: "请输入申请报销总金额(大写)",
trigger: "blur",
},
],
verifyTotalAmountSmall: [
{ required: true, validator: money, trigger: "blur" },
],
},
//附件///-------
//drawer1: false,
direction: "rtl",
fileList1: [], //合同文件
disabled: false, //隐藏
getshow: 1, //判断show的显示与隐藏,
//查询附件
queryDTO: {
companyId: null,
tripId: null,
},
queryDTOList: [], //收集附件的数据
//附件抽屉
drawer2: false,
//发票对话框
dialogFormVisible: false,
invoiceListAdd: [], //查询发票的集合
getFormslist: {
userId: null,
companyId: null,
type: 0,
}, //查询的能选择的表单信息
getListincom: [], //收集选择的数组
incomeIdgrt: null, //收集incomeId数据
getshow: 1, //判断show的显示与隐藏,
//合同文件上传携带参数
proutlist1: {
Id: null,
enclosureDescribe: "",
status: 3, //0收入 1支出
companyId: null,
userId: null,
},
fileTypepdf: false, //判断合同文件是否存在
fileList1: [], //附件文件
disabled: false, //隐藏
};
},
methods: {
// 展示数据的方法
getpagelist(pager = 1) {
this.queryitem.pageNum = pager;
queryBypagefinance(this.queryitem)
.then((res) => {
if (res.success) {
console.log(res);
this.total = res.data.total;
this.tableData = res.data.list;
res.data.list.forEach((item) => {
selectAll({ tripId: item.tripId })
.then((resu) => {
if (resu.success) {
item.entouragelist = resu.data;
} else {
this.$message.error(resu.msg);
}
})
.catch((error) => {
this.$message.error("失败");
});
});
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("查询失败");
});
},
agreeandrefuse(data) {
this.financelistData = data;
this.dialogVisible = true;
},
// 查看详情
getdetails(data) {
this.drawer = true;
this.paramlist = data;
},
// 同意
agree() {
this.$refs.form.validate((valid) => {
if (valid) {
this.$confirm("是否同意此报销单?, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.agreeOrapproval.financeId = this.$store.getters.urId;
this.agreeOrapproval.tripStatus = 3;
this.agreeOrapproval.tripId = this.financelistData.tripId;
this.agreeOrapproval.financeTime = this.time();
console.log(this.agreeOrapproval);
finApproval(this.agreeOrapproval)
.then((res) => {
if (res.success) {
this.$message({
type: "success",
message: "同意成功!",
});
this.getpagelist();
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("操作失败");
});
this.dialogVisible = false;
})
.catch(() => {
this.$message({
type: "info",
message: "已取消操作",
});
});
}
});
},
// 驳回
refuse() {
this.$prompt("驳回理由", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then((value) => {
this.agreeOrapproval.financeId = this.$store.getters.urId;
this.agreeOrapproval.finaceRefute = value.value;
this.agreeOrapproval.tripStatus = 4;
this.agreeOrapproval.tripId = this.financelistData.tripId;
this.agreeOrapproval.financeTime = this.time();
finApproval(this.agreeOrapproval)
.then((res) => {
if (res.success) {
this.$message.success("操作成功");
this.getpagelist();
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("操作失败");
});
this.dialogVisible = false;
})
.catch(() => {
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.tripId = row.tripId;
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();
});
},
// 大小写
convertCurrency(money) {
//汉字的数字
var cnNums = new Array(
"",
"",
"",
"",
"",
"",
"",
"",
"",
""
);
//基本单位
var cnIntRadice = new Array("", "", "", "");
//对应整数部分扩展单位
var cnIntUnits = new Array("", "", "亿", "");
//对应小数部分单位
var cnDecUnits = new Array("", "", "", "");
//整数金额时后面跟的字符
var cnInteger = "";
//整型完以后的单位
var cnIntLast = "";
//最大处理的数字
var maxNum = 999999999999999.9999;
//金额整数部分
var integerNum;
//金额小数部分
var decimalNum;
//输出的中文金额字符串
var chineseStr = "";
//分离金额后用的数组,预定义
var parts;
if (money == "") {
return "";
}
money = parseFloat(money);
if (money >= maxNum) {
//超出最大处理数字
this.$message.warning("你输入的数字太大了");
return "";
}
if (money == 0) {
chineseStr = cnNums[0] + cnIntLast;
// this.agreeOrapproval.verifyTotalAmountLarge = chineseStr;
}
//转换为字符串
money = money.toString();
if (money.indexOf(".") == -1) {
integerNum = money;
decimalNum = "";
} else {
parts = money.split(".");
integerNum = parts[0];
decimalNum = parts[1].substr(0, 4);
}
//获取整型部分转换
if (parseInt(integerNum, 10) > 0) {
var zeroCount = 0;
var IntLen = integerNum.length;
for (var i = 0; i < IntLen; i++) {
var n = integerNum.substr(i, 1);
var p = IntLen - i - 1;
var q = p / 4;
var m = p % 4;
if (n == "0") {
zeroCount++;
} else {
if (zeroCount > 0) {
chineseStr += cnNums[0];
}
//归零
zeroCount = 0;
chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
}
if (m == 0 && zeroCount < 4) {
chineseStr += cnIntUnits[q];
}
}
chineseStr += cnIntLast;
}
//小数部分
if (decimalNum != "") {
var decLen = decimalNum.length;
for (var i = 0; i < decLen; i++) {
var n = decimalNum.substr(i, 1);
if (n != "0") {
chineseStr += cnNums[Number(n)] + cnDecUnits[i];
}
}
}
if (chineseStr == "") {
chineseStr += cnNums[0] + cnIntLast + cnInteger;
} else if (decimalNum == "") {
chineseStr += cnInteger;
}
this.agreeOrapproval.verifyTotalAmountLarge = chineseStr;
},
///----附件区域
//查看项目附件.....
selectImage(row) {
this.queryDTO.tripId = row.tripId;
this.proutlist1.Id = row.tripId;
selectByIdF(this.queryDTO)
.then((res) => {
if (res.success) {
this.queryDTOList = res.data;
if (this.queryDTOList.length > 0) {
this.drawer2 = true;
this.getshow = 1;
this.disabled = false;
} else {
this.drawer2 = true;
this.disabled = false;
this.getshow = 3;
}
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("获取附件文件失败");
});
},
//下载附件
delProject(row) {
var a = document.createElement("a"); //创建一个<a></a>标
a.href = process.env.VUE_APP_BASE_API + row.enclosureFile; // 给a标签的href属性值加上地址,注意,这里是绝对路径,不用加 点.
//a.download = row.enclosureFile; //设置下载文件文件名,这里加上.xlsx指定文件类型,pdf文件就指定.fpd即可
a.target = "_blank";
a.style.display = "none"; // 障眼法藏起来a标签
document.body.appendChild(a); // 将a标签追加到文档对象中
a.click(); // 模拟点击了a标签,会触发a标签的href的读取,浏览器就会自动下载了
a.remove(); // 一次性的,用完就删除a标签
},
//显示添加附件
// updatecard() {
// this.getshow = 0;
// this.disabled = true;
// this.delfile1();
// },
//删除附件
// deleteProject(row) {
// deleteById(row)
// .then((res) => {
// if (res.success) {
// this.selectImage(row);
// this.$message({
// message: "删除成功",
// type: "success",
// });
// this.visible = false;
// console.log(res.msg);
// }
// })
// .catch((errror) => {
// this.$message.error(res.msg);
// });
// },
//清除附件文件
// delfile1(file) {
// this.fileList1 = this.fileList1.filter((item) => item.uid !== file.uid);
// this.fileTypepdf = false;
// this.proutlist1.enclosureDescribe = "";
// },
//确定提交附件
// determine() {
// //判断是否有附件文件
// if (this.fileTypepdf) {
// this.proutlist1.userId = this.$store.getters.urId;
// this.proutlist1.companyId = this.$store.getters.companyId;
// this.$refs.upload1.submit();
// this.getshow = 1; //隐藏与显示
// this.disabled = false;
// this.$message({
// showClose: true,
// message: "上传附件成功",
// type: "success",
// });
// this.Refresh();
// } else {
// this.$message.error("请添加附件,在进行提交");
// }
// },
//刷新附件
Refresh() {
this.queryDTO.tripId = this.proutlist1.Id;
console.log(this.proutlist1.Id);
selectByIdF(this.queryDTO)
.then((res) => {
if (res.success) {
this.queryDTOList = res.data;
this.proutlist1.enclosureDescribe = ""; //初始化数据
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("获取附件文件失败");
});
},
//附件取消
// remove() {
// if (this.queryDTOList.length > 0) {
// this.getshow = 1;
// this.disabled = false;
// this.backii();
// this.delfile1();
// } else {
// this.getshow = 3;
// this.disabled = false;
// this.backii();
// this.delfile1();
// }
// },
//附件文件校验
// onChangepdf(file) {
// console.log(this.proutlist1);
// const fileNamepdf = file.name;
// let fileType = fileNamepdf.substring(fileNamepdf.lastIndexOf("."));
// if (fileType != "") {
// this.fileTypepdf = true;
// } else {
// this.$message.warning("附件只能只能上传文件");
// this.$refs.upload1.clearFiles();
// this.fileTypepdf = false;
// }
// },
//判断图片与pdf显示与隐藏
fromgetlist(row) {
if (row.filePath == null) {
return false;
} else {
let fileNamepdf = row.filePath;
let fileType = fileNamepdf.substring(fileNamepdf.lastIndexOf("."));
if (fileType == ".pdf") {
return true;
} else {
return false;
}
}
},
//跳转修改
Agrt(row) {
const photopath = row.filePath;
console.log(photopath);
window.open(photopath, "_blank");
},
},
};
</script>
<style scoped>
.total_content {
padding: 15px;
}
.demo-table-expand {
font-size: 0;
padding: 0px 100px;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 150px;
margin-bottom: 0;
width: 80%;
}
.total_top {
margin: 15px 20px;
}
.lsitall .el-col {
margin: 20px 10px;
}
.lsitall .el-button {
margin-left: 16px;
}
.row-bg {
margin-left: 15%;
}
.dialog-footer {
width: 90%;
margin: 20px 5%;
}
.lsitall .el-col {
margin: 20px 10px;
}
.lsitall .el-button {
margin-left: 16px;
}
.row-bg {
margin-left: 15%;
}
.dialog-footer {
width: 90%;
margin: 20px 5%;
}
</style>
\ No newline at end of file
<template>
<div class="container">
<!-- 表格内容区域 -->
<div class="total_content">
<el-table :data="tableData" style="width: 100%" border>
<el-table-column align="center" type="expand">
<template slot-scope="props">
<el-form label-position="left" class="demo-table-expand">
<div style="width: 100%">
<el-descriptions title="报销详情" :column="5" border>
<el-descriptions-item label="组长审批状态" :span="2">
<el-tag
:type="
props.row.tripStatus == 0
? 'info'
: props.row.tripStatus == 2
? 'danger'
: 'success'
"
>
{{
props.row.tripStatus == 0
? "待审批"
: props.row.tripStatus == 2
? "驳回"
: "通过"
}}
</el-tag>
</el-descriptions-item>
<el-descriptions-item
label="组长审批时间"
:span="3"
:formatter="timestampToTime"
>{{ 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.tripStatus == 4
? 'danger'
: props.row.tripStatus == 3
? 'success'
: 'info'
"
>
{{
props.row.tripStatus == 4
? "驳回"
: props.row.tripStatus == 3
? "通过"
: "待审批"
}}
</el-tag>
</el-descriptions-item>
<el-descriptions-item
label="财务审批时间"
:span="3"
:formatter="timestampToTime"
>{{ 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>
</el-form>
</template>
</el-table-column>
<el-table-column label="序号" width="50px" align="center">
<template slot-scope="scope">
{{
(queryitem.pageNum - 1) * queryitem.pageSize + scope.$index + 1
}}
</template>
</el-table-column>
<el-table-column label="报销人" prop="userName" align="center">
</el-table-column>
<el-table-column label="报销项目" prop="projectName" align="center">
</el-table-column>
<el-table-column
label="申报总金额"
align="center"
prop="applyTotalAmountSmall"
>
</el-table-column>
<el-table-column align="center" label="核报总金额">
<template slot-scope="props">
{{ props.row.verifyTotalAmountSmall || "还未核实金额" }}
</template>
</el-table-column>
<el-table-column align="center" label="组长审批人">
<template slot-scope="props">
{{ props.row.financeName || "暂无" }}
</template>
</el-table-column>
<el-table-column align="center" label="财务审批人">
<template slot-scope="props">
{{ props.row.financeName || "暂无" }}
</template>
</el-table-column>
<el-table-column
label="报销日期"
prop="applyTime"
:formatter="timestampToTime"
align="center"
>
</el-table-column>
<el-table-column align="center" label="发票图片">
<template slot-scope="scope">
<el-button
type="primary"
size="mini"
@click="ReviseImage(scope.row)"
>点击查看</el-button
>
</template>
</el-table-column>
<el-table-column align="center" label="附件">
<template slot-scope="scope">
<el-button
type="primary"
size="mini"
@click="selectImage(scope.row)"
>点击查看</el-button
>
</template>
</el-table-column>
<el-table-column align="center" label="状态">
<template slot-scope="props">
<el-tag
:type="
props.row.tripStatus == 0
? 'info'
: props.row.tripStatus == 1 || props.row.tripStatus == 3
? 'success'
: 'danger'
"
>
{{
props.row.tripStatus == 0
? "待审批"
: props.row.tripStatus == 1
? "小组长通过"
: props.row.tripStatus == 2
? "小组长驳回"
: props.row.tripStatus == 3
? "财务通过"
: props.row.tripStatus == 4
? "财务驳回"
: "不存在"
}}
</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<div v-if="scope.row.tripStatus == 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"
size="40%"
>
<el-form label-width="180px">
<el-row>
<el-col :span="12">
<div class="grid-content bg-purple">
<el-form-item label="审批状态">
<el-tag
:type="
paramlist.tripStatus == 0
? 'info'
: paramlist.tripStatus == 1 || paramlist.tripStatus == 3
? 'success'
: 'danger'
"
>
{{
paramlist.tripStatus == 0
? "待审批"
: paramlist.tripStatus == 1
? "小组长通过"
: paramlist.tripStatus == 2
? "小组长驳回"
: paramlist.tripStatus == 3
? "财务通过"
: paramlist.tripStatus == 4
? "财务驳回"
: "不存在"
}}
</el-tag>
</el-form-item>
<el-form-item label="附件数量">
<span>{{ paramlist.enclosureNumber }}</span>
</el-form-item>
<el-form-item label="出差理由">
<span>{{ paramlist.tripReason }}</span>
</el-form-item>
<el-form-item label="出发地点">
<span>{{ paramlist.fromPlace }}</span>
</el-form-item>
<el-form-item label="目的地点">
<span>{{ paramlist.purposePlace }}</span>
</el-form-item>
<el-form-item label="经过地点">
<span>{{ paramlist.transitPlace }}</span>
</el-form-item>
<el-form-item label="交通工具">
<span>{{ paramlist.vehicle }}</span>
</el-form-item>
<el-form-item label="伙食补贴">
<span>{{ paramlist.foodAllowance }}</span>
</el-form-item>
<el-form-item label="公杂补贴">
<span>{{ paramlist.publicMiscellaneousSubsidy }}</span>
</el-form-item>
<el-form-item label="随从人员">
<el-tag
type="warning"
size="medium"
v-for="item in paramlist.entouragelist"
:key="item.id"
style="margin: 0px 5px"
>{{ item.personnelName }}</el-tag
>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple-light">
<el-form-item label="火车/汽车/轮船费">
<span>{{ paramlist.tripCost }}</span>
</el-form-item>
<el-form-item label="机票费">
<span>{{ paramlist.planeTicket }}</span>
</el-form-item>
<el-form-item label="汽油费">
<span>{{ paramlist.trafficCost }}</span>
</el-form-item>
<el-form-item label="住宿费">
<span>{{ paramlist.lodgingCost }}</span>
</el-form-item>
<el-form-item label="其他费用">
<span>{{ paramlist.otherCost }}</span>
</el-form-item>
<el-form-item label="备注">
<span>{{ paramlist.remarks }}</span>
</el-form-item>
<el-form-item label="无票据说明">
<span>{{ paramlist.nobillExplain }}</span>
</el-form-item>
<el-form-item label="是否领取补贴">
<span>{{ paramlist.receiveSubsidy == 0 ? "否" : "是" }}</span>
</el-form-item>
<el-form-item label="天数">
<span>{{ paramlist.days }}</span>
</el-form-item>
</div>
</el-col>
</el-row>
</el-form>
</el-drawer>
</div>
<!-- 分页区域 -->
<div class="block">
<el-pagination
layout="->, total, prev, pager, next"
:total="total"
:page-size="queryitem.pageSize"
@current-change="getpagelist"
>
</el-pagination>
</div>
<!-- 发票图片 -->
<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">
<div v-if="fromgetlist(scope.row)">
<el-image
style="width: 100px; height: 100px"
:src="scope.row.filePath"
:preview-src-list="[scope.row.filePath]"
></el-image>
</div>
<div v-else>
<a class="a-style" @click="Agrt(scope.row)">点击查看文件</a>
</div>
</template>
</el-table-column>
</el-table>
</el-drawer>
<!-- 附件的下载与添加 -->
<div>
<el-drawer
title="附件操作"
:visible.sync="drawer2"
:direction="direction"
size="50%"
>
<!-- <el-button
type="primary"
style="margin-left: 5%; margin: 30px 50px"
:disabled="disabled"
@click="updatecard"
>添加附件</el-button
> -->
<el-card
class="box-card"
style="width: 90%; margin-left: 5%; margin-top: 20px"
v-show="getshow == 1"
>
<el-row class="row-bg">
<div
v-for="index in queryDTOList"
:key="index.enclosureId"
class="lsitall"
>
<el-col :span="10">
<div style="margin-top: 6px; margin-left: 40px">
附件{{ index.enclosureId }}
</div>
</el-col>
<el-col :span="12" style="margin-left: -50px">
<el-button
type="primary"
icon="el-icon-folder-checked"
class="a-style"
size="mini"
style="font-size: 13px"
@click="delProject(index)"
>下载</el-button
>
<!-- <el-popover placement="top" width="160" v-model="index.visible">
<p>确定要删除此条附件吗</p>
<div style="text-align: right; margin: 0">
<el-button
size="mini"
type="text"
@click="index.visible = false"
>取消</el-button
>
<el-button
type="primary"
size="mini"
@click="deleteProject(index)"
>确定</el-button
>
</div>
<el-button
type="danger"
icon="el-icon-delete"
class="a-style"
size="mini "
style="font-size: 13px"
slot="reference"
>删除</el-button
>
</el-popover> -->
</el-col>
</div>
</el-row>
</el-card>
<!-- 附件上传 -->
<!-- <el-card
class="box-card"
style="width: 90%; margin-left: 5%; margin-top: 20px"
v-show="getshow == 0"
>
<div style="width: 60%; margin-left: 30px">
<el-input
type="textarea"
:rows="2"
placeholder="请输入附件详情"
v-model="proutlist1.enclosureDescribe"
style="margin: 20px 0px"
></el-input>
<el-upload
class="upload-demo"
ref="upload1"
drag
:action="action1"
:file-list="fileList1"
:on-remove="delfile1"
:auto-upload="false"
:on-change="onChangepdf"
:on-success="Refresh"
:data="proutlist1"
multiple
style="margin: 20px 0px"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或
<em>点击上传附件</em>
</div>
<div class="el-upload__tip" slot="tip">
只能上传文件,且不超过500kb
</div>
</el-upload>
</div>
<div style="margin-left: 75%">
<el-button @click="remove()">取 消</el-button>
<el-button
type="primary"
@click="determine()"
style="margin-top: 20px"
>确 定</el-button
>
</div>
</el-card> -->
<div class="box-card" v-show="getshow == 3"></div>
</el-drawer>
</div>
</div>
</template>
<script>
import { queryByheadman } from "@/api/spendreimbursement";
import { selectAll } from "@/api/spendreimbursement";
import { Approval } from "@/api/spendreimbursement";
import { selectAllById, selectByIdF } from "@/api/project";
export default {
created() {
// 获取 userId
this.queryitem.userId = this.$store.getters.urId;
this.getinvoiveId.companyId = this.$store.getters.companyId;
this.queryDTO.companyId = this.$store.getters.companyId;
this.action1 = process.env.VUE_APP_BASE_API + "/file/updataEnclosures"; //保存附件与下载的接口
this.getpagelist();
},
data() {
return {
total: null,
queryitem: {
pageNum: 1,
pageSize: 10,
userId: null,
},
// 接受的数据
tableData: [],
// 随从人员
entouragelist: [],
drawer: false,
paramlist: {},
// 同意和驳回
agreeOrapproval: {
tripStatus: 0, //状态
headmanId: null, // userid
headmanTime: "",
headmanRefute: "",
tripId: null,
},
invoiceShow: false,
//查询图片给的值
getinvoiveId: {
companyId: null,
tripId: 0,
},
//附件///-------
//drawer1: false,
direction: "rtl",
fileList1: [], //合同文件
disabled: false, //隐藏
getshow: 1, //判断show的显示与隐藏,
//查询附件
queryDTO: {
companyId: null,
tripId: null,
},
queryDTOList: [], //收集附件的数据
//附件抽屉
drawer2: false,
//发票对话框
dialogFormVisible: false,
invoiceListAdd: [], //查询发票的集合
getFormslist: {
userId: null,
companyId: null,
type: 0,
}, //查询的能选择的表单信息
getListincom: [], //收集选择的数组
incomeIdgrt: null, //收集incomeId数据
getshow: 1, //判断show的显示与隐藏,
//合同文件上传携带参数
proutlist1: {
Id: null,
enclosureDescribe: "",
status: 3, //0收入 1支出
companyId: null,
userId: null,
},
fileTypepdf: false, //判断合同文件是否存在
fileList1: [], //附件文件
disabled: false, //隐藏
};
},
methods: {
// 展示数据的方法
getpagelist(pager = 1) {
this.queryitem.pageNum = pager;
queryByheadman(this.queryitem)
.then((res) => {
if (res.success) {
console.log(res);
this.total = res.data.total;
this.tableData = res.data.list;
res.data.list.forEach((item) => {
selectAll({ tripId: item.tripId })
.then((resu) => {
if (resu.success) {
item.entouragelist = resu.data;
} else {
this.$message.error(resu.msg);
}
})
.catch((error) => {
this.$message.error("失败");
});
});
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("查询失败");
});
},
// 同意
agree(data) {
this.$confirm("是否同意此报销单?, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.agreeOrapproval.headmanId = data.userId;
this.agreeOrapproval.tripStatus = 1;
this.agreeOrapproval.tripId = data.tripId;
this.agreeOrapproval.headmanTime = this.time();
console.log(this.agreeOrapproval);
Approval(this.agreeOrapproval)
.then((res) => {
if (res.success) {
this.$message({
type: "success",
message: "同意成功!",
});
this.getpagelist();
console.log(data);
} 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.agreeOrapproval.headmanId = data.userId;
this.agreeOrapproval.headmanRefute = value.value;
this.agreeOrapproval.tripStatus = 2;
this.agreeOrapproval.tripId = data.tripId;
this.agreeOrapproval.headmanTime = this.time();
Approval(this.agreeOrapproval)
.then((res) => {
if (res.success) {
this.$message.success("操作成功");
this.getpagelist();
console.log(data);
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("操作失败");
});
})
.catch(() => {
this.$message({
type: "info",
message: "取消操作",
});
});
},
// 查看详情
getdetails(data) {
this.drawer = true;
this.paramlist = data;
},
//查看图片的方法
ReviseImage(row) {
this.invoiceShow = true;
this.getinvoiveId.tripId = row.tripId;
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;
});
} else {
this.$message.error(res.msg);
this.back();
}
})
.catch((error) => {
this.$message.error("获取发票图片失败");
this.back();
});
},
//时间处理 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];
},
///----附件区域
//查看项目附件.....
selectImage(row) {
this.queryDTO.tripId = row.tripId;
this.proutlist1.Id = row.tripId;
selectByIdF(this.queryDTO)
.then((res) => {
if (res.success) {
this.queryDTOList = res.data;
if (this.queryDTOList.length > 0) {
this.drawer2 = true;
this.getshow = 1;
this.disabled = false;
} else {
this.drawer2 = true;
this.disabled = false;
this.getshow = 3;
}
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("获取附件文件失败");
});
},
//下载附件
delProject(row) {
var a = document.createElement("a"); //创建一个<a></a>标
a.href = process.env.VUE_APP_BASE_API + row.enclosureFile; // 给a标签的href属性值加上地址,注意,这里是绝对路径,不用加 点.
//a.download = row.enclosureFile; //设置下载文件文件名,这里加上.xlsx指定文件类型,pdf文件就指定.fpd即可
a.target = "_blank";
a.style.display = "none"; // 障眼法藏起来a标签
document.body.appendChild(a); // 将a标签追加到文档对象中
a.click(); // 模拟点击了a标签,会触发a标签的href的读取,浏览器就会自动下载了
a.remove(); // 一次性的,用完就删除a标签
},
//刷新附件
Refresh() {
this.queryDTO.tripId = this.proutlist1.Id;
console.log(this.proutlist1.Id);
selectByIdF(this.queryDTO)
.then((res) => {
if (res.success) {
this.queryDTOList = res.data;
this.proutlist1.enclosureDescribe = ""; //初始化数据
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("获取附件文件失败");
});
},
//判断图片与pdf显示与隐藏
fromgetlist(row) {
if (row.filePath == null) {
return false;
} else {
let fileNamepdf = row.filePath;
let fileType = fileNamepdf.substring(fileNamepdf.lastIndexOf("."));
if (fileType == ".pdf") {
return true;
} else {
return false;
}
}
},
//跳转修改
Agrt(row) {
const photopath = row.filePath;
console.log(photopath);
window.open(photopath, "_blank");
},
},
};
</script>
<style scoped>
.total_content {
padding: 15px;
}
.demo-table-expand {
font-size: 0;
padding: 0px 100px;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 150px;
margin-bottom: 0;
width: 80%;
}
.total_top {
margin: 15px 20px;
}
.lsitall .el-col {
margin: 20px 10px;
}
.lsitall .el-button {
margin-left: 16px;
}
.row-bg {
margin-left: 15%;
}
.dialog-footer {
width: 90%;
margin: 20px 5%;
}
.lsitall .el-col {
margin: 20px 10px;
}
.lsitall .el-button {
margin-left: 16px;
}
.row-bg {
margin-left: 15%;
}
.dialog-footer {
width: 90%;
margin: 20px 5%;
}
</style>
\ No newline at end of file
<template>
<el-form
ref="ruleform"
:model="spendreimbursementform"
label-width="120px"
:label-position="labelPosition"
:rules="rules"
>
<el-main>
<el-row :gutter="20">
<!-- 第一列表单 -->
<el-col :span="6">
<div class="grid-content bg-purple">
<!-- projectId -->
<el-form-item
label="报销项目"
:label-width="formLabelWidth"
prop="projectId"
>
<el-select
placeholder="请选择"
v-model="spendreimbursementform.projectId"
>
<el-option
:label="item.projectName"
v-for="item in collectProject"
:key="item.projectId"
:value="item.projectId"
>
</el-option>
</el-select>
</el-form-item>
<!-- summary -->
<el-form-item label="摘要" prop="summary">
<el-input v-model="spendreimbursementform.summary"></el-input>
</el-form-item>
<!-- enclosureNumber -->
<el-form-item label="附件数量" prop="enclosureNumber">
<el-input
v-model.number="spendreimbursementform.enclosureNumber"
></el-input>
</el-form-item>
<!-- tripReason -->
<el-form-item label="出差缘由" prop="tripReason">
<el-input v-model="spendreimbursementform.tripReason"></el-input>
</el-form-item>
<!-- fromPlace -->
<el-form-item label="出发地点" prop="fromPlace">
<el-input v-model="spendreimbursementform.fromPlace"></el-input>
</el-form-item>
<!-- purposePlace -->
<el-form-item label="目的地点" prop="purposePlace">
<el-input
v-model="spendreimbursementform.purposePlace"
></el-input>
</el-form-item>
<!-- transitPlace -->
<el-form-item label="经过地点" prop="transitPlace">
<el-input
v-model="spendreimbursementform.transitPlace"
></el-input>
</el-form-item>
<!-- vehicle -->
<el-form-item label="交通工具" prop="vehicle">
<el-input v-model="spendreimbursementform.vehicle"></el-input>
</el-form-item>
<!-- applyTime -->
<el-form-item label="申请时间" prop="applyTime" required>
<el-date-picker
v-model="spendreimbursementform.applyTime"
type="date"
style="width: 90%"
@change="formtime3"
placeholder="选择日期"
>
</el-date-picker>
</el-form-item>
</div>
</el-col>
<!-- 第二列表单 -->
<el-col :span="6">
<div class="grid-content bg-purple">
<!-- receiveSubsidy -->
<el-form-item label="是否领取补贴">
<el-switch
v-model="values"
active-color="#13ce66"
inactive-color="#ff4949"
@change="changeswitch(values)"
>
</el-switch>
</el-form-item>
<!-- foodAllowance -->
<el-form-item label="伙食补贴" prop="foodAllowance">
<el-input
v-model="spendreimbursementform.foodAllowance"
:disabled="
spendreimbursementform.receiveSubsidy == 1 ? false : true
"
></el-input>
</el-form-item>
<!-- publicMiscellaneousSubsidy -->
<el-form-item label="公杂补贴" prop="publicMiscellaneousSubsidy">
<el-input
v-model="spendreimbursementform.publicMiscellaneousSubsidy"
:disabled="
spendreimbursementform.receiveSubsidy == 1 ? false : true
"
></el-input>
</el-form-item>
<!-- tripCost -->
<el-form-item label="火车/汽车/轮船费" prop="tripCost">
<el-input v-model="spendreimbursementform.tripCost"></el-input>
</el-form-item>
<!-- planeTicket -->
<el-form-item label="飞机票" prop="planeTicket">
<el-input v-model="spendreimbursementform.planeTicket"></el-input>
</el-form-item>
<!-- trafficCost -->
<el-form-item label="过路过桥汽油费" prop="trafficCost">
<el-input v-model="spendreimbursementform.trafficCost"></el-input>
</el-form-item>
<!-- lodgingCost -->
<el-form-item label="住宿费" prop="lodgingCost">
<el-input v-model="spendreimbursementform.lodgingCost"></el-input>
</el-form-item>
<!-- insuranceCost -->
<el-form-item label="保险费" prop="insuranceCost">
<el-input
v-model="spendreimbursementform.insuranceCost"
></el-input>
</el-form-item>
<!-- otherCost -->
<el-form-item label="其他费用" prop="otherCost">
<el-input v-model="spendreimbursementform.otherCost"></el-input>
</el-form-item>
</div>
</el-col>
<!-- 第三列表单 -->
<el-col :span="6">
<div class="grid-content bg-purple">
<!-- applyTotalAmountLarge -->
<el-form-item
label="申报总金额(大写)"
prop="applyTotalAmountLarge"
label-width="140"
>
<el-input
disabled
v-model="spendreimbursementform.applyTotalAmountLarge"
></el-input>
</el-form-item>
<!-- applyTotalAmountSmall -->
<el-form-item
label="申报总金额(小写)"
prop="applyTotalAmountSmall"
label-width="140"
>
<el-input
v-model="spendreimbursementform.applyTotalAmountSmall"
@change="
convertCurrency(spendreimbursementform.applyTotalAmountSmall)
"
></el-input>
</el-form-item>
<el-form-item
label="出差时间"
prop="startTime"
required
:rules="[
{
required: true,
message: '请选择日期',
trigger: 'change',
},
]"
>
<el-date-picker
v-model="timeSlot"
@change="formtime"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
<!-- nobillExplain -->
<el-form-item label="无票据说明" prop="nobillExplain">
<el-input
v-model="spendreimbursementform.nobillExplain"
></el-input>
</el-form-item>
<el-form-item label="发票号码" prop="fromList">
<el-select
v-model="spendreimbursementform.fromList"
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>
<!-- remarks -->
<el-form-item label="备注" prop="remarks">
<el-input
type="textarea"
:rows="5"
v-model="spendreimbursementform.remarks"
></el-input>
</el-form-item>
</div>
</el-col>
<!-- 第四列表单 -->
<el-col :span="6">
<div class="grid-content bg-purple">
<!-- 其他 -->
<el-form-item>
<el-button
type="primary"
icon="el-icon-circle-plus"
@click="addBtn1"
>随行人员</el-button
>
</el-form-item>
<!-- 对话框1 -->
<el-dialog title="选择随行人员" :visible.sync="dialogFormVisible">
<!-- -->
<el-form :model="peopleList" :inline="true">
<el-row
v-for="(item, index) in peopleList.insertBatch"
:key="index"
>
<el-col :span="32">
<el-form-item
:label="'姓名' + (index + 1)"
:prop="'peopleList.insertBatch.' + index"
>
<el-row>
<el-col :span="12"
><div class="grid-content bg-purple">
<el-input
v-model="item.personnelName"
></el-input></div
></el-col>
<el-col :span="12"
><div
class="grid-content bg-purple-light"
style="margin: 0px 5px"
>
<el-button @click.prevent="removeDomain(item)"
>删除</el-button
>
<el-button @click="addDomain">新增类型</el-button>
</div></el-col
>
</el-row>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- -->
<!-- 操作 -->
<div slot="footer" class="dialog-footer">
<button @click="btn">测试</button>
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false"
>确 定</el-button
>
</div>
</el-dialog>
</div>
</el-col>
</el-row>
</el-main>
<el-footer>
<el-button type="primary" @click="submitForm()">提交</el-button>
<el-button @click="resetForm()">重置</el-button>
<el-button @click="back()">返回</el-button>
</el-footer>
</el-form>
</template>
<script>
import { insert } from "@/api/spendreimbursement.js";
import { selectTypeitem } from "@/api/spendreimbursement.js";
// selectProjectitem
import { selectProjectitem } from "@/api/spendreimbursement.js";
//selectProjectpeople
import { selectProjectpeople } from "@/api/spendreimbursement.js";
// insertId
import { insertId } from "@/api/spendreimbursement.js";
import { Addinvoice } from "@/api/spendreimbursement.js";
import { selectAllBystatus } from "@/api/project";
export default {
created() {
this.Typeitem.companyId = this.$store.getters.companyId;
this.Projectitem.companyId = this.$store.getters.companyId;
this.Projectpeople.companyId = this.$store.getters.companyId;
this.spendreimbursementform.companyId = this.$store.getters.companyId;
this.spendreimbursementform.userId = this.$store.getters.urId;
this.Selectinsertlsit();
this.reimebursementtypeItem();
this.reimebursementprojectItem();
this.reimebursementprojectpeopleItem();
},
data() {
var moneyrow = (rule, value, callback) => {
let RegExp =
/(^([-]?)[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^([-]?)(0){1}$)|(^([-]?)[0-9]\.[0-9]([0-9])?$)/;
if (RegExp.test(value)) {
callback();
} else {
callback(new Error("金额格式错误"));
}
};
return {
dialogFormVisible: false,
labelPosition: "left",
values: false,
timeSlot: null,
userId: [],
// fromList: [], //发票号码
form: [],
// 收集的是页面表单的数据
spendreimbursementform: {
fromList: [],
companyId: null,
summary: "",
enclosureNumber: "",
tripReason: "",
typeId: "",
fromPlace: "",
remarks: "",
purposePlace: "",
transitPlace: "",
startTime: "",
endTime: "",
applyTime: "",
receiveSubsidy: 0,
vehicle: "",
foodAllowance: 0,
publicMiscellaneousSubsidy: 0,
tripCost: 0,
planeTicket: 0,
trafficCost: 0,
lodgingCost: 0,
insuranceCost: 0,
otherCost: 0,
remarks: "",
nobillExplain: "",
applyTotalAmountLarge: "",
applyTotalAmountSmall: null,
projectId: "",
companyId: null,
// 天数
days: null,
userId: null,
tripStatus: 0,
},
peopleList: {
insertBatch: [
{
personnelName: null,
tripId: null,
},
],
},
// 报销类型
Typeitem: {
companyId: null,
typeCategory: 0,
},
// 项目类型
Projectitem: {
companyId: null,
},
// 随从成员
Projectpeople: {
companyId: null,
},
peopletripid: null,
// 收集报销类型进行展示
collectType: [],
// 收集项目名称进行展示
collectProject: [],
// 收集随从人员进行展示
collectProjectpeople: [],
getinvoivelist: [],
// 验证规则
rules: {
fromList: [
{ required: true, message: "此项不能为空!", trigger: "change" },
],
summary: [{ required: true, message: "此项不能为空!" }],
enclosureNumber: [
{ required: true, message: "此项不能为空!" },
{ type: "number", message: "格式不正确!" },
],
tripReason: [{ required: true, message: "此项不能为空!" }],
typeId: [
{
required: true,
message: "此项不能为空!",
trigger: "change",
},
],
fromPlace: [{ required: true, message: "此项不能为空!" }],
purposePlace: [{ required: true, message: "此项不能为空!" }],
transitPlace: [{ required: true, message: "此项不能为空!" }],
applyTotalAmountLarge: [{ required: true, message: "此项不能为空!" }],
applyTotalAmountSmall: [
{ required: true, message: "此项不能为空!" },
{ validator: moneyrow, trigger: "blur" },
],
applyTime: [
{
required: true,
message: "请选择日期!",
trigger: "change",
},
],
planeTicket: [{ required: true, message: "此项不能为空!" }],
vehicle: [{ required: true, message: "此项不能为空!" }],
foodAllowance: [
{ required: true, message: "此项不能为空!" },
{ validator: moneyrow, trigger: "blur" },
],
publicMiscellaneousSubsidy: [
{ required: true, message: "此项不能为空!" },
{ validator: moneyrow, trigger: "blur" },
],
tripCost: [
{ required: true, message: "此项不能为空!" },
{ validator: moneyrow, trigger: "blur" },
],
planeTicket: [
{ required: true, message: "此项不能为空!" },
{ validator: moneyrow, trigger: "blur" },
],
trafficCost: [
{ required: true, message: "此项不能为空!" },
{ validator: moneyrow, trigger: "blur" },
],
lodgingCost: [
{ required: true, message: "此项不能为空!" },
{ validator: moneyrow, trigger: "blur" },
],
insuranceCost: [
{ required: true, message: "此项不能为空!" },
{ validator: moneyrow, trigger: "blur" },
],
otherCost: [
{ required: true, message: "此项不能为空!" },
{ validator: moneyrow, trigger: "blur" },
],
remarks: [{ required: true, message: "此项不能为空!" }],
projectId: [
{
required: true,
message: "此项不能为空!",
trigger: "change",
},
],
startTime: [{ required: true, message: "此项不能为空!" }],
endTime: [{ required: true, message: "此项不能为空!" }],
trafficCost: [{ required: true, message: "此项不能为空!" }],
lodgingCost: [{ required: true, message: "此项不能为空!" }],
insuranceCost: [{ required: true, message: "此项不能为空!" }],
otherCost: [{ required: true, message: "此项不能为空!" }],
nobillExplain: [{ required: true, message: "此项不能为空!" }],
},
};
},
methods: {
// 这是测试的数据
btn() {
console.log(this.peopleList.insertBatch);
},
btn2() {
this.spendreimbursementform.fromList.forEach((e) => {
let obj = {};
obj.companyId = this.$store.getters.companyId;
obj.status = 1;
obj.invoiceId = e;
this.form.push(obj);
});
console.log(this.form);
},
//查询发票编号
Selectinsertlsit() {
let param = {
companyId: this.$store.getters.companyId,
status: 0,
type: 2,
userId: this.$store.getters.info.userId,
};
selectAllBystatus(param)
.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.ruleform.validate((valid) => {
if (valid) {
insert(this.spendreimbursementform)
.then((res) => {
if (res.success) {
let tid = res.data;
let addpeopleList = [];
let obj1 = {};
obj1.personnelName = this.$store.getters.name;
obj1.tripId = tid;
this.peopleList.insertBatch.forEach((e) => {
let obj = {};
obj.personnelName = e.personnelName;
obj.tripId = res.data;
addpeopleList.push(obj1, obj);
});
console.log(addpeopleList);
// 第二个方法 添加随从人员
insertId(addpeopleList)
.then((result) => {
if (result.success) {
// 添加成功以后 把表单的数据清空
this.$refs.ruleform.resetFields();
} else {
this.$message.error(result.msg);
}
})
.catch((error) => {
this.$message.error("失败");
});
this.spendreimbursementform.fromList.forEach((e) => {
let obj = {};
obj.companyId = this.$store.getters.companyId;
obj.status = 1;
obj.tripId = res.data;
obj.invoiceId = e;
this.form.push(obj);
});
// 第三个方法 添加发票
Addinvoice(this.form)
.then((resu) => {
if (resu.success) {
this.$message.success("添加成功!");
} else {
this.$message.error(resu.msg);
}
})
.catch((error) => {
this.$message.error("失败");
});
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("添加失败");
});
} else {
console.log("error submit!!");
return false;
}
});
},
//
addDomain() {
this.peopleList.insertBatch.push({
personnelName: "",
tripId: null,
});
},
//
removeDomain(item) {
var index = this.peopleList.insertBatch.indexOf(item);
if (index !== -1) {
this.peopleList.insertBatch.splice(index, 1);
}
},
// 报销类型
reimebursementtypeItem() {
selectTypeitem(this.Typeitem)
.then((res) => {
if (res.success) {
this.collectType = res.data;
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("查询失败");
});
},
// 项目类型
reimebursementprojectItem() {
selectProjectitem(this.Projectitem)
.then((res) => {
if (res.success) {
this.collectProject = res.data;
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("查询失败");
});
},
// 查询随从人员
reimebursementprojectpeopleItem() {
selectProjectpeople(this.Projectpeople)
.then((res) => {
if (res.code == 20000) {
// console.log(res.data);
this.collectProjectpeople = res.data;
} else {
this.$message.error("失败");
}
})
.catch((error) => {
this.$message.error("查询失败");
});
},
// 弹窗按钮
addBtn1() {
this.dialogFormVisible = true;
},
// 开关选项
changeswitch(values) {
// console.log(values);
if (values == true) {
this.spendreimbursementform.receiveSubsidy = 1;
} else {
this.spendreimbursementform.receiveSubsidy = 0;
}
},
// 返回上一级
back() {
this.$store.dispatch("tagsView/delView", this.$route);
this.$router.push("/spendreimbursementList");
},
//申请时间处理
formtime3(val) {
if (val != null) {
let time = this.timestampToTime(val);
this.spendreimbursementform.applyTime = time;
}
},
// 计算天数
DateDiff(sDate1, sDate2) {
//sDate1和sDate2是2006-12-18格式
var aDate, oDate1, oDate2, iDays;
aDate = sDate1.split("-");
oDate1 = new Date(aDate[1] + "-" + aDate[2] + "-" + aDate[0]); //转换为12-18-2006格式
aDate = sDate2.split("-");
oDate2 = new Date(aDate[1] + "-" + aDate[2] + "-" + aDate[0]);
iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
return iDays;
},
//开始结束 时间的处理 计算天数
formtime(val) {
if (val == null) {
this.spendreimbursementform.startTime = null;
this.spendreimbursementform.endTime = null;
} else {
this.spendreimbursementform.startTime = this.timestampToTime(val[0]);
this.spendreimbursementform.endTime = this.timestampToTime(val[1]);
let time = this.DateDiff(
this.spendreimbursementform.startTime,
this.spendreimbursementform.endTime
);
this.spendreimbursementform.days = time;
}
},
//时间处理
timestampToTime(value) {
var date = value;
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;
},
//重置
resetForm() {
this.$refs.ruleform.resetFields();
},
// 大小写
convertCurrency(money) {
//汉字的数字
var cnNums = new Array(
"",
"",
"",
"",
"",
"",
"",
"",
"",
""
);
//基本单位
var cnIntRadice = new Array("", "", "", "");
//对应整数部分扩展单位
var cnIntUnits = new Array("", "", "亿", "");
//对应小数部分单位
var cnDecUnits = new Array("", "", "", "");
//整数金额时后面跟的字符
var cnInteger = "";
//整型完以后的单位
var cnIntLast = "";
//最大处理的数字
var maxNum = 999999999999999.9999;
//金额整数部分
var integerNum;
//金额小数部分
var decimalNum;
//输出的中文金额字符串
var chineseStr = "";
//分离金额后用的数组,预定义
var parts;
if (money == "") {
return "";
}
money = parseFloat(money);
if (money >= maxNum) {
//超出最大处理数字
this.$message.warning("你输入的数字太大了");
return "";
}
if (money == 0) {
chineseStr = cnNums[0] + cnIntLast;
}
//转换为字符串,分离小数和整数部分
money = money.toString();
//00000
if (money.indexOf(".") == -1) {
//说明money是整数
integerNum = money;
decimalNum = "";
} else {
//说明money是小数
//1.12 [1,12]
parts = money.split(".");
integerNum = parts[0];
decimalNum = parts[1].substr(0, 4);
}
//获取整型部分转换
if (parseInt(integerNum, 10) > 0) {
var zeroCount = 0;
//2222 4
var IntLen = integerNum.length;
for (var i = 0; i < IntLen; i++) {
var n = integerNum.substr(i, 1);
var p = IntLen - i - 1;
//q是确定单位
// 10000
var q = p / 4;
var m = p % 4;
if (n == "0") {
zeroCount++;
} else {
if (zeroCount > 0) {
chineseStr += cnNums[0];
}
//归零
zeroCount = 0;
chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
}
if (m == 0 && zeroCount < 4) {
chineseStr += cnIntUnits[q];
}
}
chineseStr += cnIntLast;
}
//小数部分
if (decimalNum != "") {
var decLen = decimalNum.length;
for (var i = 0; i < decLen; i++) {
var n = decimalNum.substr(i, 1);
if (n != "0") {
chineseStr += cnNums[Number(n)] + cnDecUnits[i];
}
}
}
if (chineseStr == "") {
chineseStr += cnNums[0] + cnIntLast + cnInteger;
} else if (decimalNum == "") {
chineseStr += cnInteger;
}
this.spendreimbursementform.applyTotalAmountLarge = chineseStr;
},
},
};
</script>
<style>
</style>
\ No newline at end of file
<template>
<el-form
ref="ruleform"
:model="spendreimbursementform"
label-width="120px"
:label-position="labelPosition"
:rules="rules"
>
<el-row :gutter="20">
<!-- 第一列表单 -->
<el-col :span="6">
<div class="grid-content bg-purple">
<!-- projectId -->
<el-form-item
label="项目列表"
:label-width="formLabelWidth"
prop="projectId"
>
<el-select
placeholder="请选择"
v-model="spendreimbursementform.projectId"
>
<el-option
:label="item.projectName"
v-for="item in collectProject"
:key="item.projectId"
:value="item.projectId"
>
</el-option>
</el-select>
</el-form-item>
<!-- summary -->
<el-form-item label="摘要" prop="summary">
<el-input v-model="spendreimbursementform.summary"></el-input>
</el-form-item>
<!-- enclosureNumber -->
<el-form-item label="附件数量" prop="enclosureNumber">
<el-input
v-model="spendreimbursementform.enclosureNumber"
></el-input>
</el-form-item>
<!-- tripReason -->
<el-form-item label="出差缘由" prop="tripReason">
<el-input v-model="spendreimbursementform.tripReason"></el-input>
</el-form-item>
<!-- fromPlace -->
<el-form-item label="出发地点" prop="fromPlace">
<el-input v-model="spendreimbursementform.fromPlace"></el-input>
</el-form-item>
<!-- purposePlace -->
<el-form-item label="目的地点" prop="purposePlace">
<el-input v-model="spendreimbursementform.purposePlace"></el-input>
</el-form-item>
<!-- transitPlace -->
<el-form-item label="经过地点" prop="transitPlace">
<el-input v-model="spendreimbursementform.transitPlace"></el-input>
</el-form-item>
<!-- vehicle -->
<el-form-item label="交通工具" prop="vehicle">
<el-input v-model="spendreimbursementform.vehicle"></el-input>
</el-form-item>
<!-- applyTime -->
<el-form-item label="申请时间" prop="applyTime" required>
<el-date-picker
v-model="spendreimbursementform.applyTime"
type="date"
style="width: 90%"
@change="formtime3"
placeholder="选择日期"
>
</el-date-picker>
</el-form-item>
</div>
</el-col>
<!-- 第二列表单 -->
<el-col :span="6">
<div class="grid-content bg-purple">
<!-- receiveSubsidy -->
<el-form-item label="是否领取补贴">
<el-switch
v-model="values"
active-color="#13ce66"
inactive-color="#ff4949"
@change="changeswitch(values)"
>
</el-switch>
</el-form-item>
<!-- foodAllowance -->
<el-form-item label="伙食补贴" prop="foodAllowance">
<el-input
v-model.number="spendreimbursementform.foodAllowance"
></el-input>
</el-form-item>
<!-- publicMiscellaneousSubsidy -->
<el-form-item label="公杂补贴" prop="publicMiscellaneousSubsidy">
<el-input
v-model.number="spendreimbursementform.publicMiscellaneousSubsidy"
></el-input>
</el-form-item>
<!-- tripCost -->
<el-form-item label="火车/汽车/轮船费" prop="tripCost">
<el-input
v-model.number="spendreimbursementform.tripCost"
></el-input>
</el-form-item>
<!-- planeTicket -->
<el-form-item label="飞机票" prop="planeTicket">
<el-input
v-model.number="spendreimbursementform.planeTicket"
></el-input>
</el-form-item>
<!-- trafficCost -->
<el-form-item label="过路过桥汽油费" prop="trafficCost">
<el-input
v-model.number="spendreimbursementform.trafficCost"
></el-input>
</el-form-item>
<!-- lodgingCost -->
<el-form-item label="住宿费" prop="lodgingCost">
<el-input
v-model.number="spendreimbursementform.lodgingCost"
></el-input>
</el-form-item>
<!-- insuranceCost -->
<el-form-item label="保险费" prop="insuranceCost">
<el-input
v-model.number="spendreimbursementform.insuranceCost"
></el-input>
</el-form-item>
<!-- otherCost -->
<el-form-item label="其他费用" prop="otherCost">
<el-input
v-model.number="spendreimbursementform.otherCost"
></el-input>
</el-form-item>
</div>
</el-col>
<!-- 第三列表单 -->
<el-col :span="6">
<div class="grid-content bg-purple">
<!-- applyTotalAmountLarge -->
<el-form-item
label="申报总金额(大写)"
prop="applyTotalAmountLarge"
label-width="140"
>
<el-input
v-model="spendreimbursementform.applyTotalAmountLarge"
></el-input>
</el-form-item>
<!-- applyTotalAmountSmall -->
<el-form-item
label="申报总金额(小写)"
prop="applyTotalAmountSmall"
label-width="140"
>
<el-input
v-model="spendreimbursementform.applyTotalAmountSmall"
></el-input>
</el-form-item>
<el-form-item
label="出差时间"
prop="startTime"
required
:rules="[
{
type: 'daterange',
required: true,
message: '请选择日期',
trigger: 'change',
},
]"
>
<el-date-picker
v-model="timeSlot"
@change="formtime"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
<!-- nobillExplain -->
<el-form-item label="无票据说明" prop="nobillExplain">
<el-input v-model="spendreimbursementform.nobillExplain"></el-input>
</el-form-item>
<!-- remarks -->
<el-form-item label="备注" prop="remarks">
<el-input
type="textarea"
:rows="5"
v-model="spendreimbursementform.remarks"
></el-input>
</el-form-item>
</div>
</el-col>
<!-- 第四列表单 -->
<el-col :span="6">
<div class="grid-content bg-purple">
<!-- 其他 -->
<el-form-item>
<el-button
type="primary"
icon="el-icon-circle-plus"
@click="addBtn1"
>随行人员</el-button
>
</el-form-item>
<!-- 对话框1 -->
<el-dialog title="选择随行人员" :visible.sync="dialogFormVisible">
<el-row :gutter="20">
<el-col
:span="6"
v-for="item in collectProjectpeople"
:key="item.userId"
>
<div class="grid-content bg-purple" style="margin: 20px 0px">
<el-checkbox v-model="peopleId" :label="item.userId" border>{{
item.userName
}}</el-checkbox>
</div>
</el-col>
</el-row>
<button @click="btn">测试</button>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false"
>确 定</el-button
>
</div>
</el-dialog>
</div>
</el-col>
</el-row>
<el-button type="primary" @click="submitForm()">提交</el-button>
<el-button @click="resetForm()">重置</el-button>
<el-button @click="back()">返回</el-button>
</el-form>
</template>
<script>
import { insert } from "@/api/spendreimbursement.js";
import { selectTypeitem } from "@/api/spendreimbursement.js";
// selectProjectitem
import { selectProjectitem } from "@/api/spendreimbursement.js";
//selectProjectpeople
import { selectProjectpeople } from "@/api/spendreimbursement.js";
// insertId
import { insertId } from "@/api/spendreimbursement.js";
export default {
created() {
this.Typeitem.companyId = this.$store.getters.companyId;
this.Projectitem.companyId = this.$store.getters.companyId;
this.Projectpeople.companyId = this.$store.getters.companyId;
this.spendreimbursementform.companyId = this.$store.getters.companyId;
this.spendreimbursementform.userId = this.$store.getters.urId;
this.reimebursementtypeItem();
this.reimebursementprojectItem();
this.reimebursementprojectpeopleItem();
},
data() {
return {
dialogFormVisible: false,
labelPosition: "left",
values: false,
timeSlot: null,
userId: [],
// 收集的是页面表单的数据
spendreimbursementform: {
companyId: null,
summary: "",
enclosureNumber: "",
tripReason: "",
typeId: "",
fromPlace: "",
remarks: "",
purposePlace: "",
transitPlace: "",
startTime: "",
endTime: "",
applyTime: "",
receiveSubsidy: 0,
vehicle: "",
foodAllowance: "",
publicMiscellaneousSubsidy: "",
tripCost: "",
planeTicket: "",
trafficCost: "",
lodgingCost: "",
insuranceCost: "",
otherCost: "",
remarks: "",
nobillExplain: "",
applyTotalAmountLarge: "",
applyTotalAmountSmall: "",
projectId: "",
companyId: null,
// 天数
days: null,
userId: null,
tripStatus: 0,
},
peopleId: [],
insertBatch: [
{
personnelId: null,
tripId: null,
},
],
// 报销类型
Typeitem: {
companyId: null,
typeCategory: 0,
},
// 项目类型
Projectitem: {
companyId: null,
},
// 随从成员
Projectpeople: {
companyId: null,
},
// 收集报销类型进行展示
collectType: [],
// 收集项目名称进行展示
collectProject: [],
// 收集随从人员进行展示
collectProjectpeople: [],
// 验证规则
rules: {
summary: [{ required: true, message: "此项不能为空!" }],
enclosureNumber: [{ required: true, message: "此项不能为空!" }],
tripReason: [{ required: true, message: "此项不能为空!" }],
typeId: [
{
required: true,
message: "此项不能为空!",
trigger: "change",
},
],
fromPlace: [{ required: true, message: "此项不能为空!" }],
purposePlace: [{ required: true, message: "此项不能为空!" }],
transitPlace: [{ required: true, message: "此项不能为空!" }],
applyTotalAmountLarge: [{ required: true, message: "此项不能为空!" }],
applyTotalAmountSmall: [{ required: true, message: "此项不能为空!" }],
applyTime: [
{
type: "daterange",
required: true,
message: "请选择日期!",
trigger: "change",
},
],
planeTicket: [
{ required: true, message: "此项不能为空!" },
{ type: "number", message: "该项必须为数字值" },
],
vehicle: [{ required: true, message: "此项不能为空!" }],
foodAllowance: [
{ required: true, message: "此项不能为空!" },
{ type: "number", message: "该项必须为数字值" },
],
publicMiscellaneousSubsidy: [
{ required: true, message: "此项不能为空!" },
{ type: "number", message: "该项必须为数字值" },
],
tripCost: [
{ required: true, message: "此项不能为空!" },
{ type: "number", message: "该项必须为数字值" },
],
planeTicket: [
{ required: true, message: "此项不能为空!" },
{ type: "number", message: "该项必须为数字值" },
],
trafficCost: [
{ required: true, message: "此项不能为空!" },
{ type: "number", message: "该项必须为数字值" },
],
lodgingCost: [
{ required: true, message: "此项不能为空!" },
{ type: "number", message: "该项必须为数字值" },
],
insuranceCost: [
{ required: true, message: "此项不能为空!" },
{ type: "number", message: "该项必须为数字值" },
],
otherCost: [
{ required: true, message: "此项不能为空!" },
{ type: "number", message: "该项必须为数字值" },
],
remarks: [{ required: true, message: "此项不能为空!" }],
projectId: [
{
required: true,
message: "此项不能为空!",
trigger: "change",
},
],
publicMiscellaneousSubsidy: [
{ required: true, message: "此项不能为空!" },
],
startTime: [{ required: true, message: "此项不能为空!" }],
endTime: [{ required: true, message: "此项不能为空!" }],
trafficCost: [{ required: true, message: "此项不能为空!" }],
lodgingCost: [{ required: true, message: "此项不能为空!" }],
insuranceCost: [{ required: true, message: "此项不能为空!" }],
otherCost: [{ required: true, message: "此项不能为空!" }],
nobillExplain: [{ required: true, message: "此项不能为空!" }],
},
};
},
methods: {
// 这是测试的数据
btn() {
this.insertBatch.splice(this.insertBatch.indexOf(0), 1);
this.peopleId.forEach((item) => {
let obj = {};
obj.personnelId = item;
obj.tripId = 3;
this.insertBatch.push(obj);
});
insertId(this.insertBatch)
.then((result) => {
if (result.success) {
console.log(result);
} else {
this.$message.error(result.msg);
}
})
.catch((error) => {
this.$message.error("失败");
});
this.insertBatch = [];
},
// 添加数据的方法
submitForm() {
this.$refs.ruleform.validate((valid) => {
console.log("1111");
if (valid) {
console.log("aaaa");
// insert(this.spendreimbursementform)
// .then((res) => {
// if (res.success) {
// this.insertBatch.tripId = res.data;
// var tid = this.insertBatch.tripId;
// // 处理数组 得到传递数据的对象
// this.insertBatch.splice(this.insertBatch.indexOf(0), 1);
// this.peopleId.forEach((item) => {
// let obj = {};
// obj.personnelId = item;
// obj.tripId = tid;
// this.insertBatch.push(obj);
// });
// // 第二个方法
// insertId(this.insertBatch)
// .then((result) => {
// if (result.success) {
// this.$message.success("添加成功!");
// // 添加成功以后 把表单的数据清空
// this.$refs.ruleform.resetFields();
// } else {
// this.$message.error(result.msg);
// }
// })
// .catch((error) => {
// this.$message.error("失败");
// });
// this.insertBatch = [];
// } else {
// this.$message.error(res.msg);
// }
// })
// .catch((error) => {
// this.$message.error("添加失败");
// });
} else {
console.log("error submit!!");
return false;
}
});
},
// 报销类型
reimebursementtypeItem() {
selectTypeitem(this.Typeitem)
.then((res) => {
if (res.success) {
this.collectType = res.data;
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("查询失败");
});
},
// 项目类型
reimebursementprojectItem() {
selectProjectitem(this.Projectitem)
.then((res) => {
if (res.success) {
this.collectProject = res.data;
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("查询失败");
});
},
// 随从人员
reimebursementprojectpeopleItem() {
selectProjectpeople(this.Projectpeople)
.then((res) => {
if (res.code == 20000) {
this.collectProjectpeople = res.data;
} else {
this.$message.error("失败");
}
})
.catch((error) => {
this.$message.error("查询失败");
});
},
// 弹窗按钮
addBtn1() {
this.dialogFormVisible = true;
},
// 开关选项
changeswitch(values) {
// console.log(values);
if (values == true) {
this.spendreimbursementform.receiveSubsidy = 1;
} else {
this.spendreimbursementform.receiveSubsidy = 0;
}
},
// 返回上一级
back() {
this.$store.dispatch("tagsView/delView", this.$route);
this.$router.push("/spendreimbursementList");
},
//申请时间处理
formtime3(val) {
if (val != null) {
let time = this.timestampToTime(val);
this.spendreimbursementform.applyTime = time;
}
},
// 计算天数
DateDiff(sDate1, sDate2) {
//sDate1和sDate2是2006-12-18格式
var aDate, oDate1, oDate2, iDays;
aDate = sDate1.split("-");
oDate1 = new Date(aDate[1] + "-" + aDate[2] + "-" + aDate[0]); //转换为12-18-2006格式
aDate = sDate2.split("-");
oDate2 = new Date(aDate[1] + "-" + aDate[2] + "-" + aDate[0]);
iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
return iDays;
},
//开始结束 时间的处理 计算天数
formtime(val) {
if (val == null) {
this.spendreimbursementform.startTime = null;
this.spendreimbursementform.endTime = null;
} else {
this.spendreimbursementform.startTime = this.timestampToTime(val[0]);
this.spendreimbursementform.endTime = this.timestampToTime(val[1]);
let time = this.DateDiff(
this.spendreimbursementform.startTime,
this.spendreimbursementform.endTime
);
this.spendreimbursementform.days = time;
}
},
//时间处理
timestampToTime(value) {
var date = value;
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;
},
//重置
resetForm() {
this.$refs.ruleform.resetFields();
},
},
};
</script>
<style>
</style>
\ No newline at end of file
<template>
<div class="container">
<!-- 添加按钮 -->
<div class="total_top">
<el-button
type="success"
icon="el-icon-circle-plus"
@click="insertreimebursementItem"
>申请出差报销</el-button
>
</div>
<!-- 表格内容区域 -->
<div class="total_content">
<el-table :data="tableData" style="width: 100%" border>
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" class="demo-table-expand">
<el-descriptions
title="报销详情"
:column="5"
border
style="width: 100%"
>
<el-descriptions-item label="组长审批状态" :span="2">
<el-tag
:type="
props.row.tripStatus == 0
? 'info'
: props.row.tripStatus == 2
? 'danger'
: 'success'
"
>
{{
props.row.tripStatus == 0
? "待审批"
: props.row.tripStatus == 2
? "驳回"
: "通过"
}}
</el-tag>
</el-descriptions-item>
<el-descriptions-item
label="组长审批时间"
:span="3"
:formatter="timestampToTime"
>{{ 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.tripStatus == 4
? 'danger'
: props.row.tripStatus == 3
? 'success'
: 'info'
"
>
{{
props.row.tripStatus == 4
? "驳回"
: props.row.tripStatus == 3
? "通过"
: "待审批"
}}
</el-tag>
</el-descriptions-item>
<el-descriptions-item
label="财务审批时间"
:span="3"
:formatter="timestampToTime"
>{{ 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>
</el-form>
</template>
</el-table-column>
<el-table-column label="序号" width="50px">
<template slot-scope="scope">
{{
(queryitem.pageNum - 1) * queryitem.pageSize + scope.$index + 1
}}
</template>
</el-table-column>
<el-table-column label="项目列表" prop="projectName"> </el-table-column>
<el-table-column label="申报总金额" prop="applyTotalAmountSmall">
</el-table-column>
<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.financeName || "暂无" }}
</template>
</el-table-column>
<el-table-column label="财务审批人">
<template slot-scope="props">
{{ props.row.financeName || "暂无" }}
</template>
</el-table-column>
<el-table-column
label="报销日期"
prop="applyTime"
:formatter="timestampToTime"
>
</el-table-column>
<el-table-column label="状态">
<template slot-scope="props">
<el-tag
:type="
props.row.tripStatus == 0
? 'info'
: props.row.tripStatus == 1 || props.row.tripStatus == 3
? 'success'
: 'danger'
"
>
{{
props.row.tripStatus == 0
? "待审批"
: props.row.tripStatus == 1
? "小组长通过"
: props.row.tripStatus == 2
? "小组长驳回"
: props.row.tripStatus == 3
? "财务通过"
: props.row.tripStatus == 4
? "财务驳回"
: "不存在"
}}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
style="margin: 5px"
size="mini"
icon="el-icon-edit"
type="info"
@click="updatereimbursementList(scope.row)"
v-if="scope.row.tripStatus != 3 && scope.row.tripStatus != 1"
>修改信息</el-button
>
<el-button
style="margin: 5px"
size="mini"
icon="el-icon-edit-outline"
type="success"
@click="updatebtn(scope.row)"
v-if="scope.row.tripStatus != 3 && scope.row.tripStatus != 1"
>修改随行人员</el-button
>
<el-button
style="margin: 5px"
size="mini"
type="danger"
@click="Resubmit(scope.row)"
v-if="scope.row.tripStatus == 2 || scope.row.tripStatus == 4"
>重新提交</el-button
>
<el-button
style="margin: 5px"
size="mini"
type="info"
@click="withdraw(scope.row)"
v-if="scope.row.tripStatus == 0"
>
撤回</el-button
>
<el-link
type="success"
style="margin: 5px"
size="mini"
v-if="scope.row.tripStatus == 3"
>已通过</el-link
>
<el-link
type="info"
style="margin: 5px"
size="mini"
v-if="scope.row.tripStatus == 1"
>待审批</el-link
>
</template>
</el-table-column>
</el-table>
<!-- 查看详情 -->
<el-drawer
title="查看详情"
:visible.sync="drawer"
:direction="direction"
size="50%"
>
<el-form :inline="true" label-width="180px">
<el-row>
<el-col :span="12">
<div>
<el-form-item label="审批状态">
<el-tag
:type="
paramlist.tripStatus == 0
? 'info'
: paramlist.tripStatus == 1 || paramlist.tripStatus == 3
? 'success'
: 'danger'
"
>
{{
paramlist.tripStatus == 0
? "待审批"
: paramlist.tripStatus == 1
? "小组长通过"
: paramlist.tripStatus == 2
? "小组长驳回"
: paramlist.tripStatus == 3
? "财务通过"
: paramlist.tripStatus == 4
? "财务驳回"
: "不存在"
}}
</el-tag>
</el-form-item>
<el-form-item label="附件数量">
<span>{{ paramlist.enclosureNumber }}</span>
</el-form-item>
<el-form-item label="出差理由">
<span>{{ paramlist.tripReason }}</span>
</el-form-item>
<el-form-item label="出发地点">
<span>{{ paramlist.fromPlace }}</span>
</el-form-item>
<el-form-item label="目的地点">
<span>{{ paramlist.purposePlace }}</span>
</el-form-item>
<el-form-item label="经过地点">
<span>{{ paramlist.transitPlace }}</span>
</el-form-item>
<el-form-item label="交通工具">
<span>{{ paramlist.vehicle }}</span>
</el-form-item>
<el-form-item label="伙食补贴">
<span>{{ paramlist.foodAllowance }}</span>
</el-form-item>
<el-form-item label="公杂补贴">
<span>{{ paramlist.publicMiscellaneousSubsidy }}</span>
</el-form-item>
<el-form-item label="随从人员">
<span
v-for="item in paramlist.entouragelist"
:key="item.tripId"
style="margin: 0px 5px"
>{{ item.userName }}</span
>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div>
<el-form-item label="火车/汽车/轮船费">
<span>{{ paramlist.tripCost }}</span>
</el-form-item>
<el-form-item label="机票费">
<span>{{ paramlist.planeTicket }}</span>
</el-form-item>
<el-form-item label="汽油费">
<span>{{ paramlist.trafficCost }}</span>
</el-form-item>
<el-form-item label="住宿费">
<span>{{ paramlist.lodgingCost }}</span>
</el-form-item>
<el-form-item label="其他费用">
<span>{{ paramlist.otherCost }}</span>
</el-form-item>
<el-form-item label="备注">
<span>{{ paramlist.remarks }}</span>
</el-form-item>
<el-form-item label="无票据说明">
<span>{{ paramlist.nobillExplain }}</span>
</el-form-item>
<el-form-item label="是否领取补贴">
<span>{{ paramlist.receiveSubsidy == 0 ? "否" : "是" }}</span>
</el-form-item>
<el-form-item label="天数">
<span>{{ paramlist.days }}</span>
</el-form-item>
</div>
</el-col>
</el-row>
</el-form>
</el-drawer>
<!-- 对话框1 -->
<el-dialog title="修改随从人员" :visible.sync="dialogFormVisible">
<!-- 输入框的布局 -->
<el-row :gutter="20">
<el-col :span="16"
><div class="grid-content bg-purple">
<el-input placeholder="请输入..."></el-input></div
></el-col>
<el-col :span="8"
><div class="grid-content bg-purple">
<el-button type="primary" @click="onSubmit">查询</el-button>
</div></el-col
>
</el-row>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="员工" name="first">
<!-- v-model 绑定的是 数据少的那个数组 -->
<el-checkbox-group v-model="peopleId">
<el-checkbox
v-for="item in collectProjectpeople"
:label="item.userId"
:key="item.userId"
>{{ item.userName }}</el-checkbox
>
</el-checkbox-group>
</el-tab-pane>
<el-tab-pane label="财务人员" name="second">财务人员</el-tab-pane>
<el-tab-pane label="小组长" name="third">小组长</el-tab-pane>
<button @click="btn">测试</button>
</el-tabs>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false"
>确 定</el-button
>
</div>
</el-dialog>
</div>
<!-- 分页区域 -->
<div class="block">
<el-pagination
layout="->, total, prev, pager, next"
:total="10"
:page-size="queryitem.pageSize"
@current-change="getpagelist"
>
</el-pagination>
</div>
</div>
</template>
<script>
import { queryBypage } from "@/api/spendreimbursement";
import { selectAll } from "@/api/spendreimbursement";
import { reimbursementListid, resubmit } from "@/api/spendreimbursement";
// insertId
import { insertId } from "@/api/spendreimbursement.js";
//selectProjectpeople
import { selectProjectpeople } from "@/api/spendreimbursement.js";
export default {
created() {
this.Projectpeople.companyId = this.$store.getters.companyId;
// 获取 userId
this.queryitem.userId = this.$store.getters.urId;
this.reimebursementprojectpeopleItem();
this.getpagelist();
},
data() {
return {
activeName: "second",
list1: [],
queryitem: {
pageNum: 1,
pageSize: 10,
userId: null,
},
//抽屉
drawer: false,
// 对话框
dialogFormVisible: false,
// 接受的数据
tableData: [],
// 收集随从人员进行展示
collectProjectpeople: [],
// 随从成员
Projectpeople: {
companyId: null,
},
// 随从人员
entouragelist: [],
paramlist: {},
peopleId: [],
// 收集所选择的随从人员
insertBatch: [
{
personnelId: null,
tripId: null,
},
],
list: [],
};
},
methods: {
handleClick(tab, event) {
console.log(event);
},
// 这是测试的数据
btn() {
console.log(this.peopleId);
console.log(this.list1);
// this.insertBatch.splice(this.insertBatch.indexOf(0), 1);
// this.peopleId.forEach((item) => {
// let obj = {};
// obj.personnelId = item;
// obj.tripId = 3;
// this.insertBatch.push(obj);
// });
// insertId(this.insertBatch)
// .then((result) => {
// if (result.success) {
// console.log(result);
// } else {
// this.$message.error(result.msg);
// }
// })
// .catch((error) => {
// this.$message.error("失败");
// });
// this.insertBatch = [];
},
// 修改随从人员
updatereimbursementPeople() {
// 第二个方法
insertId(this.insertBatch)
.then((result) => {
if (result.success) {
this.$message.success("添加成功!");
// 添加成功以后 把表单的数据清空
this.$refs.ruleform.resetFields();
} else {
this.$message.error(result.msg);
}
})
.catch((error) => {
this.$message.error("失败");
});
},
// 查询de所有随从人员
reimebursementprojectpeopleItem() {
selectProjectpeople(this.Projectpeople)
.then((res) => {
if (res.code == 20000) {
this.collectProjectpeople = res.data;
} else {
this.$message.error("失败");
}
})
.catch((error) => {
this.$message.error("查询失败");
});
},
//添加的方法
insertreimebursementItem() {
this.$router.push("/spendreimbursementAdd");
},
// 展示数据的方法
getpagelist(pager = 1) {
this.queryitem.pageNum = pager;
queryBypage(this.queryitem)
.then((res) => {
if (res.success) {
this.tableData = res.data.list;
res.data.list.forEach((item) => {
selectAll({ tripId: item.tripId })
.then((resu) => {
if (resu.success) {
item.entouragelist = resu.data;
this.list = resu.data;
resu.data.forEach((element) => {
let obj = {};
let personnelId = "";
personnelId = element.personnelId;
obj.personnelId = element.personnelId;
obj.tripId = element.tripId;
this.peopleId.push(personnelId);
this.list1.push(obj);
});
} else {
this.$message.error(resu.msg);
}
})
.catch((error) => {
this.$message.error("失败");
});
});
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("查询失败");
});
},
// 跳转修改页面
updatereimbursementList(data) {
this.$router.push({
path: "/spendreimbursementListUpdate",
//query 找到我们需要的字段
query: {
tripid: data.tripId,
},
});
},
// 弹窗展示
updatebtn() {
this.dialogFormVisible = true;
},
// 查看详情
getdetails(data) {
this.drawer = true;
this.paramlist = data;
},
// 从新提交
Resubmit(data) {
resubmit(data)
.then((res) => {
if (res.success) {
this.$message.success("重新提交成功,等待审批");
this.getpagelist();
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("重新提交失败");
});
},
// 撤回申请
withdraw(data) {
reimbursementListid(data.tripId).then((res) => {
if (res.success) {
this.getpagelist();
}
});
},
//时间处理
timestampToTime(row, column, cellValue) {
return cellValue.split(" ")[0];
},
},
};
</script>
<style scoped>
.total_content {
padding: 0px 15px;
}
.demo-table-expand {
font-size: 0;
padding: 0px 100px;
width: 100%;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 150px;
margin-bottom: 0;
width: 80%;
}
.total_top {
margin: 15px 20px;
}
</style>
\ No newline at end of file
<template>
<div class="container">
<!-- 添加按钮 -->
<div class="total_top">
<el-button
type="success"
icon="el-icon-circle-plus"
@click="insertreimebursementItem"
>申请出差报销</el-button
>
</div>
<!-- 表格内容区域 -->
<div class="total_content">
<el-table :data="tableData" style="width: 100%" border>
<el-table-column align="center" type="expand">
<template slot-scope="props">
<el-form label-position="left" class="demo-table-expand">
<el-descriptions
title="报销详情"
:column="5"
border
style="width: 100%"
>
<el-descriptions-item label="组长审批状态" :span="2">
<el-tag
:type="
props.row.tripStatus == 0
? 'info'
: props.row.tripStatus == 2
? 'danger'
: 'success'
"
>
{{
props.row.tripStatus == 0
? "待审批"
: props.row.tripStatus == 2
? "驳回"
: "通过"
}}
</el-tag>
</el-descriptions-item>
<el-descriptions-item
label="组长审批时间"
:span="3"
:formatter="timestampToTime"
>{{ 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.tripStatus == 4
? 'danger'
: props.row.tripStatus == 3
? 'success'
: 'info'
"
>
{{
props.row.tripStatus == 4
? "驳回"
: props.row.tripStatus == 3
? "通过"
: "待审批"
}}
</el-tag>
</el-descriptions-item>
<el-descriptions-item
label="财务审批时间"
:span="3"
:formatter="timestampToTime"
>{{ 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>
</el-form>
</template>
</el-table-column>
<el-table-column align="center" label="序号" width="50px">
<template slot-scope="scope">
{{
(queryitem.pageNum - 1) * queryitem.pageSize + scope.$index + 1
}}
</template>
</el-table-column>
<el-table-column align="center" label="项目列表" prop="projectName">
</el-table-column>
<el-table-column
align="center"
label="申报总金额"
prop="applyTotalAmountSmall"
>
</el-table-column>
<el-table-column align="center" label="核报总金额">
<template slot-scope="props">
{{ props.row.verifyTotalAmountSmall || "还未核实金额" }}
</template>
</el-table-column>
<el-table-column align="center" label="组长审批人">
<template slot-scope="props">
{{ props.row.financeName || "暂无" }}
</template>
</el-table-column>
<el-table-column align="center" label="财务审批人">
<template slot-scope="props">
{{ props.row.financeName || "暂无" }}
</template>
</el-table-column>
<el-table-column
label="报销日期"
prop="applyTime"
:formatter="timestampToTime"
align="center"
>
</el-table-column>
<el-table-column align="center" label="发票图片">
<template slot-scope="scope">
<el-button
style="margin: 5px"
type="primary"
size="mini"
@click="ReviseImage(scope.row)"
>点击查看</el-button
>
<el-button
size="mini"
icon="el-icon-edit"
type="success"
@click="updateinvoice()"
v-if="scope.row.tripStatus == 0"
>修改发票号码</el-button
>
</template>
</el-table-column>
<el-table-column align="center" label="下载附件">
<template slot-scope="scope">
<el-button
type="primary"
size="mini"
@click="selectImage(scope.row)"
>点击查看</el-button
>
</template>
</el-table-column>
<el-table-column align="center" label="状态">
<template slot-scope="props">
<el-tag
:type="
props.row.tripStatus == 0
? 'info'
: props.row.tripStatus == 1 || props.row.tripStatus == 3
? 'success'
: 'danger'
"
>
{{
props.row.tripStatus == 0
? "待审批"
: props.row.tripStatus == 1
? "小组长通过"
: props.row.tripStatus == 2
? "小组长驳回"
: props.row.tripStatus == 3
? "财务通过"
: props.row.tripStatus == 4
? "财务驳回"
: "不存在"
}}
</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button
style="margin: 5px"
size="mini"
icon="el-icon-edit"
type="info"
@click="updatereimbursementList(scope.row)"
v-if="scope.row.tripStatus == 0"
>修改信息</el-button
>
<el-button
style="margin: 5px"
size="mini"
icon="el-icon-user-solid"
type="success"
@click="updatebtn(scope.row)"
v-if="scope.row.tripStatus == 0"
>修改随行人员</el-button
>
<el-button
style="margin: 5px"
size="mini"
type="danger"
@click="Resubmit(scope.row)"
v-if="scope.row.tripStatus == 2 || scope.row.tripStatus == 4"
>重新提交</el-button
>
<el-button
style="margin: 5px"
size="mini"
type="info"
@click="withdraw(scope.row)"
v-if="scope.row.tripStatus == 0"
>
撤回</el-button
>
<el-link
type="success"
style="margin: 5px"
size="mini"
v-if="scope.row.tripStatus == 3"
>已通过</el-link
>
<el-link
type="info"
style="margin: 5px"
size="mini"
v-if="scope.row.tripStatus == 1"
>待审批</el-link
>
</template>
</el-table-column>
</el-table>
<!-- 发票图片 -->
<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">
<div v-if="fromgetlist(scope.row)">
<el-image
style="width: 100px; height: 100px"
:src="scope.row.filePath"
:preview-src-list="[scope.row.filePath]"
></el-image>
</div>
<div v-else>
<a class="a-style" @click="Agrt(scope.row)">点击查看文件</a>
</div>
</template>
</el-table-column>
</el-table>
</el-drawer>
<!-- 查看详情 -->
<el-drawer
title="查看详情"
:visible.sync="drawer"
:direction="direction"
size="40%"
>
<el-form label-width="180px">
<el-row>
<el-col :span="12">
<div class="grid-content bg-purple">
<el-form-item label="审批状态">
<el-tag
:type="
paramlist.tripStatus == 0
? 'info'
: paramlist.tripStatus == 1 || paramlist.tripStatus == 3
? 'success'
: 'danger'
"
>
{{
paramlist.tripStatus == 0
? "待审批"
: paramlist.tripStatus == 1
? "小组长通过"
: paramlist.tripStatus == 2
? "小组长驳回"
: paramlist.tripStatus == 3
? "财务通过"
: paramlist.tripStatus == 4
? "财务驳回"
: "不存在"
}}
</el-tag>
</el-form-item>
<el-form-item label="附件数量">
<span>{{ paramlist.enclosureNumber }}</span>
</el-form-item>
<el-form-item label="出差理由">
<span>{{ paramlist.tripReason }}</span>
</el-form-item>
<el-form-item label="出发地点">
<span>{{ paramlist.fromPlace }}</span>
</el-form-item>
<el-form-item label="目的地点">
<span>{{ paramlist.purposePlace }}</span>
</el-form-item>
<el-form-item label="经过地点">
<span>{{ paramlist.transitPlace }}</span>
</el-form-item>
<el-form-item label="交通工具">
<span>{{ paramlist.vehicle }}</span>
</el-form-item>
<el-form-item label="伙食补贴">
<span>{{ paramlist.foodAllowance }}</span>
</el-form-item>
<el-form-item label="公杂补贴">
<span>{{ paramlist.publicMiscellaneousSubsidy }}</span>
</el-form-item>
<el-form-item label="随从人员">
<el-tag
type="warning"
size="medium"
v-for="item in paramlist.entouragelist"
:key="item.id"
style="margin: 0px 5px"
>{{ item.personnelName }}</el-tag
>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple-light">
<el-form-item label="火车/汽车/轮船费">
<span>{{ paramlist.tripCost }}</span>
</el-form-item>
<el-form-item label="机票费">
<span>{{ paramlist.planeTicket }}</span>
</el-form-item>
<el-form-item label="汽油费">
<span>{{ paramlist.trafficCost }}</span>
</el-form-item>
<el-form-item label="住宿费">
<span>{{ paramlist.lodgingCost }}</span>
</el-form-item>
<el-form-item label="其他费用">
<span>{{ paramlist.otherCost }}</span>
</el-form-item>
<el-form-item label="备注">
<span>{{ paramlist.remarks }}</span>
</el-form-item>
<el-form-item label="无票据说明">
<span>{{ paramlist.nobillExplain }}</span>
</el-form-item>
<el-form-item label="是否领取补贴">
<span>{{ paramlist.receiveSubsidy == 0 ? "否" : "是" }}</span>
</el-form-item>
<el-form-item label="天数">
<span>{{ paramlist.days }}</span>
</el-form-item>
</div>
</el-col>
</el-row>
</el-form>
</el-drawer>
<!-- 修改发票号码 -->
<div>
<el-drawer
title="修改发票号码"
:visible.sync="table"
direction="rtl"
size="40%"
>
<el-button
style="margin: 20px"
type="success"
icon="el-icon-circle-plus"
@click="Selectinvoicelsit()"
>添加发票号码</el-button
>
<el-table border style="width: 100%" :data="invoicelist">
<el-table-column label="序号" width="50" type="index">
</el-table-column>
<el-table-column label="发票号码">
<template slot-scope="scope">
{{ scope.row.number }}
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
type="danger"
size="mini"
icon="el-icon-delete"
@click="deleteinvoice(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</el-drawer>
<!-- 添加发票号码 -->
<el-dialog title="发票号码" :visible.sync="insertvioiceFrom">
<el-form :model="fromList">
<el-form-item label="发票号码(可多选):">
<el-select
v-model="fromList"
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>
<div slot="footer" class="dialog-footer">
<el-button @click="insertvioiceFrom = false">取 消</el-button>
<el-button type="primary" @click="insertInvoice()">确 定</el-button>
</div>
</el-dialog>
</div>
<!-- 对话框1 -->
<el-dialog title="修改随从人员" :visible.sync="dialogFormVisible">
<el-form :model="peopleList" :inline="true" ref="peopleForm">
<el-row
v-for="(item, index) in peopleList.collectName"
:key="item.index"
>
<el-col :span="32">
<el-form-item
:label="'姓名' + (index + 1)"
:prop="'collectName.' + index +'.personnelName'"
:rules="{
required: true,
message: '姓名不能为空',
trigger: 'blur',
}"
>
<el-row>
<el-col :span="12"
><div class="grid-content bg-purple">
<el-input
v-model.trim="item.personnelName"
:disabled="item.disable"
></el-input></div
></el-col>
<el-col :span="12"
><div
class="grid-content bg-purple-light"
style="margin: 0px 5px"
>
<el-button
@click.prevent="removeDomain(item)"
:disabled="item.disable"
>删除</el-button
>
<el-button @click="addDomain">新增人员</el-button>
</div></el-col
>
</el-row>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="updatereimbursementPeople"
>确 定</el-button
>
</div>
</el-dialog>
</div>
<!-- 分页区域 -->
<div class="block">
<el-pagination
layout="->, total, prev, pager, next"
:total="total"
:page-size="queryitem.pageSize"
@current-change="getpagelist"
>
</el-pagination>
</div>
<!-- 附件的下载与添加 -->
<div>
<el-drawer
title="附件操作"
:visible.sync="drawer2"
:direction="direction"
size="50%"
>
<el-button
type="primary"
style="margin-left: 5%; margin: 30px 50px"
:disabled="disabled"
@click="updatecard"
>添加附件</el-button
>
<el-card
class="box-card"
style="width: 90%; margin-left: 5%; margin-top: 20px"
v-show="getshow == 1"
>
<el-row class="row-bg">
<div
v-for="index in queryDTOList"
:key="index.enclosureId"
class="lsitall"
>
<el-col :span="10">
<div style="margin-top: 6px; margin-left: 40px">
附件{{ index.enclosureId }}
</div>
</el-col>
<el-col :span="12" style="margin-left: -50px">
<el-button
type="primary"
icon="el-icon-folder-checked"
class="a-style"
size="mini"
style="font-size: 13px"
@click="delProject(index)"
>下载</el-button
>
<el-popover placement="top" width="160" v-model="index.visible">
<p>确定要删除此条附件吗</p>
<div style="text-align: right; margin: 0">
<el-button
size="mini"
type="text"
@click="index.visible = false"
>取消</el-button
>
<el-button
type="primary"
size="mini"
@click="deleteProject(index)"
>确定</el-button
>
</div>
<el-button
type="danger"
icon="el-icon-delete"
class="a-style"
size="mini "
style="font-size: 13px"
slot="reference"
>删除</el-button
>
</el-popover>
</el-col>
</div>
</el-row>
</el-card>
<!-- 附件上传 -->
<el-card
class="box-card"
style="width: 90%; margin-left: 5%; margin-top: 20px"
v-show="getshow == 0"
>
<div style="width: 60%; margin-left: 30px">
<el-input
type="textarea"
:rows="2"
placeholder="请输入附件详情"
v-model="proutlist1.enclosureDescribe"
style="margin: 20px 0px"
></el-input>
<el-upload
class="upload-demo"
ref="upload1"
drag
:action="action1"
:file-list="fileList1"
:on-remove="delfile1"
:auto-upload="false"
:on-change="onChangepdf"
:on-success="Refresh"
:data="proutlist1"
multiple
style="margin: 20px 0px"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或
<em>点击上传附件</em>
</div>
<div class="el-upload__tip" slot="tip">
只能上传文件,且不超过500kb
</div>
</el-upload>
</div>
<div style="margin-left: 75%">
<el-button @click="remove()">取 消</el-button>
<el-button
type="primary"
@click="determine()"
style="margin-top: 20px"
>确 定</el-button
>
</div>
</el-card>
<div class="box-card" v-show="getshow == 3"></div>
</el-drawer>
</div>
</div>
</template>
<script>
import { queryBypage } from "@/api/spendreimbursement";
import { selectAll } from "@/api/spendreimbursement";
import { selectAllById, selectByIdF, deleteById } from "@/api/project";
import {
reimbursementListid,
resubmit,
Addinvoice,
} from "@/api/spendreimbursement";
// insertId
import { insertId } from "@/api/spendreimbursement.js";
import {
selectByinvoice,
deleteinvoiceConnect,
selectAllBystatus,
} from "@/api/project";
//selectProjectpeople
import { selectProjectpeople } from "@/api/spendreimbursement.js";
export default {
created() {
this.Projectpeople.companyId = this.$store.getters.companyId;
this.getinvoiveId.companyId = this.$store.getters.companyId;
this.parm.companyId = this.$store.getters.companyId;
// 获取 userId
this.queryitem.userId = this.$store.getters.urId;
this.queryDTO.companyId = this.$store.getters.companyId;
this.action1 = process.env.VUE_APP_BASE_API + "/file/updataEnclosures"; //保存附件与下载的接口
this.reimebursementprojectpeopleItem();
this.getpagelist();
},
data() {
return {
activeName: "second",
total: 0,
queryitem: {
pageNum: 1,
pageSize: 10,
userId: null,
},
//抽屉
drawer: false,
invoiceShow: false,
// 对话框
dialogFormVisible: false,
// 接受的数据
tableData: [],
// 收集随从人员进行展示
collectProjectpeople: [],
// 随从成员
Projectpeople: {
companyId: null,
},
getinvoivelist: [],
//查看详情
paramlist: {},
// 收集随从人员名字
peopleList: {
collectName: [],
},
//临时一条记录的所有数据 可以用来
temporaryData: {},
//查询图片给的值
getinvoiveId: {
companyId: null,
tripId: 0,
},
//附件///-------
//drawer1: false,
direction: "rtl",
fileList1: [], //合同文件
disabled: false, //隐藏
getshow: 1, //判断show的显示与隐藏,
//查询附件
queryDTO: {
companyId: null,
tripId: null,
},
queryDTOList: [], //收集附件的数据
//附件抽屉
drawer2: false,
//发票对话框
dialogFormVisible: false,
invoiceListAdd: [], //查询发票的集合
getFormslist: {
userId: null,
companyId: null,
type: 0,
}, //查询的能选择的表单信息
getListincom: [], //收集选择的数组
incomeIdgrt: null, //收集incomeId数据
getshow: 1, //判断show的显示与隐藏,
//合同文件上传携带参数
proutlist1: {
Id: null,
enclosureDescribe: "",
status: 3, //0收入 1支出
companyId: null,
userId: null,
},
fileTypepdf: false, //判断合同文件是否存在
fileList1: [], //附件文件
disabled: false, //隐藏
table: false,
insertvioiceFrom: false,
invoicelist: [],
fromList: [], //发票号码
form: [],
formtripid: null,
parm: {
tripId: null,
companyId: null,
},
find: false,
};
},
methods: {
// 这是测试的数据
btn() {},
//
addDomain() {
this.peopleList.collectName.push({
personnelName: "",
tripId: null,
});
},
//
removeDomain(item) {
var index = this.peopleList.collectName.indexOf(item);
this.$confirm("此操作将永久删除该随从人员, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
if (index !== -1) {
this.peopleList.collectName.splice(index, 1);
this.$message({
type: "success",
message: "删除成功!",
});
}
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
// 修改随从人员
updatereimbursementPeople() {
this.$refs.peopleForm.validate((valid) => {
if (valid) {
let param = [];
this.peopleList.collectName.forEach((e) => {
let obj = {
personnelName: e.personnelName,
tripId: this.temporaryData.tripId,
};
param.push(obj);
});
// 第二个方法
insertId(param)
.then((result) => {
if (result.success) {
this.$message.success("修改成功!");
// 刷新页面
this.getpagelist();
// 关闭窗口
this.dialogFormVisible = false;
} else {
this.$message.error(result.msg);
}
})
.catch((error) => {
this.$message.error("修改失败");
});
} else {
console.log("error submit!!");
return false;
}
});
},
//查询发票编号
Selectinvoicelsit() {
this.insertvioiceFrom = true;
this.fromList = [];
let param = {
companyId: this.$store.getters.companyId,
status: 0,
type: 2,
userId: this.$store.getters.info.userId,
};
selectAllBystatus(param)
.then((res) => {
if (res.success) {
this.getinvoivelist = res.data;
} else {
this.$message.error(res.msg);
this.back();
}
})
.catch((error) => {
this.$message.error("获取发票编号失败");
this.back();
});
},
// 添加发票号码
insertInvoice() {
// 第三个方法 添加发票
this.fromList.forEach((e) => {
let obj = {};
obj.companyId = this.$store.getters.companyId;
obj.status = 1;
obj.tripId = this.formtripid;
obj.invoiceId = e;
this.form.push(obj);
});
Addinvoice(this.form)
.then((resu) => {
if (resu.success) {
this.$message.success("添加成功!");
this.insertvioiceFrom = false;
} else {
this.$message.error(resu.msg);
}
})
.catch((error) => {
this.$message.error("失败");
});
},
// 修改发票号码
updateinvoice() {
this.table = true;
this.Selectlsitinvoice();
},
// 删除发票关系
deleteinvoice(data) {
let invoices = {
invoiceId: data.invoiceId,
tripId: data.tripId,
};
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
deleteinvoiceConnect(invoices)
.then((result) => {
if (result.success) {
this.$message({
type: "success",
message: "删除成功!",
});
// 关闭窗口
this.table = false;
} else {
this.$message.error(result.msg);
}
})
.catch((error) => {
this.$message.error("删除失败");
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
// 查询de所有员工
reimebursementprojectpeopleItem() {
selectProjectpeople(this.Projectpeople)
.then((res) => {
if (res.code == 20000) {
this.collectProjectpeople = res.data;
} else {
this.$message.error("失败");
}
})
.catch((error) => {
this.$message.error("查询失败");
});
},
//添加的方法
insertreimebursementItem() {
this.$router.push("/spendreimbursementAdd");
},
// 展示数据的方法
getpagelist(pager = 1) {
this.queryitem.pageNum = pager;
//分页查询出差报销记录
queryBypage(this.queryitem)
.then((res) => {
if (res.success) {
this.total = res.data.total;
//获取随性人员
res.data.list.forEach((e) => {
this.parm.tripId = e.tripId;
this.formtripid = e.tripId;
selectAll({ tripId: e.tripId })
.then((resu) => {
if (resu.success) {
e.entouragelist = resu.data;
} else {
this.$message.error(resu.msg);
}
})
.catch((error) => {
this.$message.error("失败");
});
});
this.tableData = res.data.list;
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("查询失败");
});
},
// 跳转修改页面
updatereimbursementList(data) {
this.$router.push({
path: "/spendreimbursementListUpdate",
//query 找到我们需要的字段
query: {
tripid: data.tripId,
},
});
},
// 修改随行人员窗口
updatebtn(data) {
//去获取随行人员
this.temporaryData = data;
this.peopleList.collectName = [];
let a = 0;
data.entouragelist.forEach((e) => {
let obj = {};
obj.personnelName = e.personnelName;
obj.tripId = e.tripId;
if (e.personnelName == this.$store.getters.name) {
if (a == 0) {
obj.disable = true;
a++;
} else {
obj.disable = false;
}
} else {
obj.disable = false;
}
this.peopleList.collectName.push(obj);
});
this.dialogFormVisible = true;
},
// 查看详情
getdetails(data) {
this.drawer = true;
this.paramlist = data;
},
//查询发票编号
Selectlsitinvoice() {
selectByinvoice(this.parm)
.then((res) => {
if (res.success) {
this.invoicelist = res.data;
} else {
this.$message.error(res.msg);
this.back();
}
})
.catch((error) => {
this.$message.error("获取发票编号失败");
this.back();
});
},
// 从新提交
Resubmit(data) {
resubmit(data)
.then((res) => {
if (res.success) {
this.$message.success("重新提交成功,等待审批");
this.getpagelist();
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("重新提交失败");
});
},
// 撤回申请
withdraw(data) {
reimbursementListid(data.tripId).then((res) => {
if (res.success) {
this.getpagelist();
}
});
},
//查看图片的方法
ReviseImage(row) {
this.invoiceShow = true;
this.getinvoiveId.tripId = row.tripId;
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();
});
},
//时间处理
timestampToTime(row, column, cellValue) {
return cellValue.split(" ")[0];
},
///----附件区域
//查看项目附件.....
selectImage(row) {
this.queryDTO.tripId = row.tripId;
this.proutlist1.Id = row.tripId;
selectByIdF(this.queryDTO)
.then((res) => {
if (res.success) {
this.queryDTOList = res.data;
if (this.queryDTOList.length > 0) {
this.drawer2 = true;
this.getshow = 1;
this.disabled = false;
} else {
this.drawer2 = true;
this.disabled = false;
this.getshow = 3;
}
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("获取附件文件失败");
});
},
//下载附件
delProject(row) {
var a = document.createElement("a"); //创建一个<a></a>标
a.href = process.env.VUE_APP_BASE_API + row.enclosureFile; // 给a标签的href属性值加上地址,注意,这里是绝对路径,不用加 点.
//a.download = row.enclosureFile; //设置下载文件文件名,这里加上.xlsx指定文件类型,pdf文件就指定.fpd即可
a.target = "_blank";
a.style.display = "none"; // 障眼法藏起来a标签
document.body.appendChild(a); // 将a标签追加到文档对象中
a.click(); // 模拟点击了a标签,会触发a标签的href的读取,浏览器就会自动下载了
a.remove(); // 一次性的,用完就删除a标签
},
//显示添加附件
updatecard() {
this.getshow = 0;
this.disabled = true;
this.delfile1();
},
//删除附件
deleteProject(row) {
deleteById(row)
.then((res) => {
if (res.success) {
this.selectImage(row);
this.$message({
message: "删除成功",
type: "success",
});
this.visible = false;
console.log(res.msg);
}
})
.catch((errror) => {
this.$message.error(res.msg);
});
},
//清除附件文件
delfile1(file) {
this.fileList1 = this.fileList1.filter((item) => item.uid !== file.uid);
this.fileTypepdf = false;
this.proutlist1.enclosureDescribe = "";
},
//确定提交附件
determine() {
//判断是否有附件文件
if (this.fileTypepdf) {
this.proutlist1.userId = this.$store.getters.urId;
this.proutlist1.companyId = this.$store.getters.companyId;
this.$refs.upload1.submit();
this.getshow = 1; //隐藏与显示
this.disabled = false;
this.$message({
showClose: true,
message: "上传附件成功",
type: "success",
});
this.Refresh();
} else {
this.$message.error("请添加附件,在进行提交");
}
},
//刷新附件
Refresh() {
this.queryDTO.tripId = this.proutlist1.Id;
console.log(this.proutlist1.Id);
selectByIdF(this.queryDTO)
.then((res) => {
if (res.success) {
this.queryDTOList = res.data;
this.proutlist1.enclosureDescribe = ""; //初始化数据
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("获取附件文件失败");
});
},
//附件取消
remove() {
if (this.queryDTOList.length > 0) {
this.getshow = 1;
this.disabled = false;
this.backii();
this.delfile1();
} else {
this.getshow = 3;
this.disabled = false;
this.backii();
this.delfile1();
}
},
//附件文件校验
onChangepdf(file) {
console.log(this.proutlist1);
const fileNamepdf = file.name;
let fileType = fileNamepdf.substring(fileNamepdf.lastIndexOf("."));
if (fileType != "") {
this.fileTypepdf = true;
} else {
this.$message.warning("附件只能只能上传文件");
this.$refs.upload1.clearFiles();
this.fileTypepdf = false;
}
},
//判断图片与pdf显示与隐藏
fromgetlist(row) {
if (row.filePath == null) {
return false;
} else {
let fileNamepdf = row.filePath;
let fileType = fileNamepdf.substring(fileNamepdf.lastIndexOf("."));
if (fileType != ".pdf") {
return true;
} else {
return false;
}
}
},
//跳转修改
Agrt(row) {
const photopath = row.filePath;
console.log(photopath);
window.open(photopath, "_blank");
},
},
};
</script>
<style scoped>
.total_content {
padding: 0px 15px;
}
.demo-table-expand {
font-size: 0;
padding: 0px 100px;
width: 100%;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 150px;
margin-bottom: 0;
width: 80%;
}
.total_top {
margin: 15px 20px;
}
.lsitall .el-col {
margin: 20px 10px;
}
.lsitall .el-button {
margin-left: 16px;
}
.row-bg {
margin-left: 15%;
}
.dialog-footer {
width: 90%;
margin: 20px 5%;
}
.lsitall .el-col {
margin: 20px 10px;
}
.lsitall .el-button {
margin-left: 16px;
}
.row-bg {
margin-left: 15%;
}
.dialog-footer {
width: 90%;
margin: 20px 5%;
}
</style>
\ No newline at end of file
<template>
<el-form
ref="ruleform"
:model="spendreimbursementform"
label-width="120px"
:label-position="labelPosition"
:rules="rules"
:data="spendreimbursementform"
>
<el-main>
<el-row :gutter="20">
<!-- 第一列表单 -->
<el-col :span="6">
<div class="grid-content bg-purple">
<!-- projectId -->
<el-form-item
label="报销项目"
:label-width="formLabelWidth"
prop="projectId"
>
<el-select
placeholder="请选择"
v-model="spendreimbursementform.projectId"
>
<el-option
:label="item.projectName"
v-for="item in collectProject"
:key="item.projectId"
:value="item.projectId"
>
</el-option>
</el-select>
</el-form-item>
<!-- summary -->
<el-form-item label="摘要" prop="summary">
<el-input v-model="spendreimbursementform.summary"></el-input>
</el-form-item>
<!-- enclosureNumber -->
<el-form-item label="附件数量" prop="enclosureNumber">
<el-input
v-model.number="spendreimbursementform.enclosureNumber"
value=""
></el-input>
</el-form-item>
<!-- tripReason -->
<el-form-item label="出差缘由" prop="tripReason">
<el-input v-model="spendreimbursementform.tripReason"></el-input>
</el-form-item>
<!-- fromPlace -->
<el-form-item label="出发地点" prop="fromPlace">
<el-input v-model="spendreimbursementform.fromPlace"></el-input>
</el-form-item>
<!-- purposePlace -->
<el-form-item label="目的地点" prop="purposePlace">
<el-input
v-model="spendreimbursementform.purposePlace"
></el-input>
</el-form-item>
<!-- transitPlace -->
<el-form-item label="经过地点" prop="transitPlace">
<el-input
v-model="spendreimbursementform.transitPlace"
></el-input>
</el-form-item>
<!-- vehicle -->
<el-form-item label="交通工具" prop="vehicle">
<el-input v-model="spendreimbursementform.vehicle"></el-input>
</el-form-item>
<!-- applyTime -->
<el-form-item label="申请时间" prop="applyTime" required>
<el-date-picker
v-model="spendreimbursementform.applyTime"
type="date"
style="width: 90%"
@change="formtime3"
placeholder="选择日期"
>
</el-date-picker>
</el-form-item>
</div>
</el-col>
<!-- 第二列表单 -->
<el-col :span="6">
<div class="grid-content bg-purple">
<!-- receiveSubsidy -->
<el-form-item label="是否领取补贴">
<el-switch
v-model="values"
active-color="#13ce66"
inactive-color="#ff4949"
@change="changeswitch(values)"
>
</el-switch>
</el-form-item>
<!-- foodAllowance -->
<el-form-item label="伙食补贴" prop="foodAllowance">
<el-input
v-model="spendreimbursementform.foodAllowance"
:disabled="
spendreimbursementform.receiveSubsidy == 1 ? false : true
"
></el-input>
</el-form-item>
<!-- publicMiscellaneousSubsidy -->
<el-form-item label="公杂补贴" prop="publicMiscellaneousSubsidy">
<el-input
v-model="spendreimbursementform.publicMiscellaneousSubsidy"
:disabled="
spendreimbursementform.receiveSubsidy == 1 ? false : true
"
></el-input>
</el-form-item>
<!-- tripCost -->
<el-form-item label="火车/汽车/轮船费" prop="tripCost">
<el-input v-model="spendreimbursementform.tripCost"></el-input>
</el-form-item>
<!-- planeTicket -->
<el-form-item label="飞机票" prop="planeTicket">
<el-input v-model="spendreimbursementform.planeTicket"></el-input>
</el-form-item>
<!-- trafficCost -->
<el-form-item label="过路过桥汽油费" prop="trafficCost">
<el-input v-model="spendreimbursementform.trafficCost"></el-input>
</el-form-item>
<!-- lodgingCost -->
<el-form-item label="住宿费" prop="lodgingCost">
<el-input v-model="spendreimbursementform.lodgingCost"></el-input>
</el-form-item>
<!-- insuranceCost -->
<el-form-item label="保险费" prop="insuranceCost">
<el-input
v-model="spendreimbursementform.insuranceCost"
></el-input>
</el-form-item>
<!-- otherCost -->
<el-form-item label="其他费用" prop="otherCost">
<el-input v-model="spendreimbursementform.otherCost"></el-input>
</el-form-item>
</div>
</el-col>
<!-- 第三列表单 -->
<el-col :span="6">
<div class="grid-content bg-purple">
<!-- applyTotalAmountLarge -->
<el-form-item
label="申报总金额(大写)"
prop="applyTotalAmountLarge"
label-width="140"
>
<el-input
disabled
v-model="spendreimbursementform.applyTotalAmountLarge"
></el-input>
</el-form-item>
<!-- applyTotalAmountSmall -->
<el-form-item
label="申报总金额(小写)"
prop="applyTotalAmountSmall"
label-width="140"
>
<el-input
v-model="spendreimbursementform.applyTotalAmountSmall"
@change="
convertCurrency(spendreimbursementform.applyTotalAmountSmall)
"
></el-input>
</el-form-item>
<el-form-item
label="出差时间"
prop="startTime"
required
:rules="[
{
required: true,
message: '请选择日期',
trigger: 'blur',
},
]"
>
<el-date-picker
v-model="timeSlot"
@change="formtime"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
</el-date-picker>
</el-form-item>
<!-- nobillExplain -->
<el-form-item label="无票据说明" prop="nobillExplain">
<el-input
v-model="spendreimbursementform.nobillExplain"
></el-input>
</el-form-item>
<!-- remarks -->
<el-form-item label="备注" prop="remarks">
<el-input
type="textarea"
:rows="5"
v-model="spendreimbursementform.remarks"
></el-input>
</el-form-item>
</div>
</el-col>
</el-row>
</el-main>
<el-footer>
<el-button type="primary" @click="submitForm()">提交</el-button>
<el-button @click="resetForm()">重置</el-button>
<el-button @click="back()">返回</el-button>
</el-footer>
</el-form>
</template>
<script>
import { selectTypeitem } from "@/api/spendreimbursement.js";
import { insertId } from "@/api/spendreimbursement.js";
// selectProjectitem
import { selectProjectitem } from "@/api/spendreimbursement.js";
import { update } from "@/api/spendreimbursement.js";
import { selectByTripId } from "@/api/spendreimbursement.js";
export default {
created() {
this.triplistfrom();
this.Typeitem.companyId = this.$store.getters.companyId;
this.Projectitem.companyId = this.$store.getters.companyId;
this.Projectpeople.companyId = this.$store.getters.companyId;
this.spendreimbursementform.companyId = this.$store.getters.companyId;
this.spendreimbursementform.userId = this.$store.getters.urId;
this.reimebursementtypeItem();
this.reimebursementprojectItem();
this.reimebursementprojectpeopleItem();
},
data() {
var moneyrow = (rule, value, callback) => {
let RegExp =
/(^([-]?)[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^([-]?)(0){1}$)|(^([-]?)[0-9]\.[0-9]([0-9])?$)/; // /^(([1-9][0-9]{0,14})|([0]{1})|(([0]\\.\\d{1,2}|[1-9][0-9]{0,14}\\.\\d{1,2})))$/;
if (RegExp.test(value)) {
callback();
} else {
callback(new Error("金额格式错误"));
}
};
return {
dialogFormVisible: false,
labelPosition: "left",
values: false,
timeSlot: [],
userId: [],
// 收集的是页面表单的数据
spendreimbursementform: {
companyId: null,
summary: "",
enclosureNumber: "",
tripReason: "",
typeId: "",
fromPlace: "",
remarks: "",
purposePlace: "",
transitPlace: "",
startTime: "",
endTime: "",
applyTime: "",
receiveSubsidy: 0,
vehicle: "",
foodAllowance: "",
publicMiscellaneousSubsidy: "",
tripCost: "",
planeTicket: "",
trafficCost: "",
lodgingCost: "",
insuranceCost: "",
otherCost: "",
remarks: "",
nobillExplain: "",
applyTotalAmountLarge: "",
applyTotalAmountSmall: "",
projectId: "",
companyId: null,
// 天数
days: null,
userId: null,
tripStatus: 0,
},
peopleId: [],
insertBatch: [
{
personnelId: null,
tripId: null,
},
],
// 报销类型
Typeitem: {
companyId: null,
typeCategory: 0,
},
// 项目类型
Projectitem: {
companyId: null,
},
// 随从成员
Projectpeople: {
companyId: null,
},
// 收集报销类型进行展示
collectType: [],
// 收集项目名称进行展示时间
collectProject: [],
// 验证规则
rules: {
summary: [{ required: true, message: "此项不能为空!" }],
enclosureNumber: [
{ required: true, message: "此项不能为空!" },
{ type: "number", message: "格式不正确!" },
],
tripReason: [{ required: true, message: "此项不能为空!" }],
typeId: [
{
required: true,
message: "此项不能为空!",
trigger: "change",
},
],
fromPlace: [{ required: true, message: "此项不能为空!" }],
purposePlace: [{ required: true, message: "此项不能为空!" }],
transitPlace: [{ required: true, message: "此项不能为空!" }],
applyTotalAmountLarge: [{ required: true, message: "此项不能为空!" }],
applyTotalAmountSmall: [
{ required: true, message: "此项不能为空!" },
{ validator: moneyrow, trigger: "blur" },
],
applyTime: [
{
required: true,
message: "请选择日期!",
trigger: "change",
},
],
planeTicket: [{ required: true, message: "此项不能为空!" }],
vehicle: [{ required: true, message: "此项不能为空!" }],
foodAllowance: [
{ required: true, message: "此项不能为空!" },
{ validator: moneyrow, trigger: "blur" },
],
publicMiscellaneousSubsidy: [
{ required: true, message: "此项不能为空!" },
{ validator: moneyrow, trigger: "blur" },
],
tripCost: [
{ required: true, message: "此项不能为空!" },
{ validator: moneyrow, trigger: "blur" },
],
planeTicket: [
{ required: true, message: "此项不能为空!" },
{ validator: moneyrow, trigger: "blur" },
],
trafficCost: [
{ required: true, message: "此项不能为空!" },
{ validator: moneyrow, trigger: "blur" },
],
lodgingCost: [
{ required: true, message: "此项不能为空!" },
{ validator: moneyrow, trigger: "blur" },
],
insuranceCost: [
{ required: true, message: "此项不能为空!" },
{ validator: moneyrow, trigger: "blur" },
],
otherCost: [
{ required: true, message: "此项不能为空!" },
{ validator: moneyrow, trigger: "blur" },
],
remarks: [{ required: true, message: "此项不能为空!" }],
projectId: [
{
required: true,
message: "此项不能为空!",
trigger: "change",
},
],
startTime: [{ required: true, message: "此项不能为空!" }],
endTime: [{ required: true, message: "此项不能为空!" }],
trafficCost: [{ required: true, message: "此项不能为空!" }],
lodgingCost: [{ required: true, message: "此项不能为空!" }],
insuranceCost: [{ required: true, message: "此项不能为空!" }],
otherCost: [{ required: true, message: "此项不能为空!" }],
nobillExplain: [{ required: true, message: "此项不能为空!" }],
},
};
},
computed: {
reimbursementId() {
return this.$route.query.tripid;
},
},
methods: {
// 查看详情
triplistfrom() {
selectByTripId({
tripId: this.$route.query.tripid,
})
.then((res) => {
if (res.success) {
//获取数据(把data里的数据放在数组里面)
this.spendreimbursementform = res.data;
if (res.data.receiveSubsidy == 1) {
this.values = true;
} else {
this.values = false;
}
this.timeSlot = [];
this.timeSlot.push(res.data.startTime);
this.timeSlot.push(res.data.endTime);
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("获取失败");
});
},
// 修改数据的方法
submitForm() {
this.$refs.ruleform.validate((valid) => {
if (valid) {
update(this.spendreimbursementform)
.then((res) => {
if (res.success) {
this.$message.success("修改成功!");
this.$router.push("/spendreimbursementList");
}
})
.catch((error) => {
this.$message.error("修改失败");
});
} else {
console.log("error submit!!");
return false;
}
});
},
// 报销类型
reimebursementtypeItem() {
selectTypeitem(this.Typeitem)
.then((res) => {
if (res.success) {
this.collectType = res.data;
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("查询失败");
});
},
// 项目类型
reimebursementprojectItem() {
selectProjectitem(this.Projectitem)
.then((res) => {
if (res.success) {
this.collectProject = res.data;
} else {
this.$message.error(res.msg);
}
})
.catch((error) => {
this.$message.error("查询失败");
});
},
// 开关选项
changeswitch(values) {
// console.log(values);
if (values == true) {
this.spendreimbursementform.receiveSubsidy = 1;
} else {
this.spendreimbursementform.receiveSubsidy = 0;
this.spendreimbursementform.foodAllowance = 0;
this.spendreimbursementform.publicMiscellaneousSubsidy = 0;
}
},
// 返回上一级
back() {
this.$store.dispatch("tagsView/delView", this.$route);
this.$router.push("/spendreimbursementList");
},
//申请时间处理
formtime3(val) {
if (val != null) {
let time = this.timestampToTime(val);
this.spendreimbursementform.applyTime = time;
}
},
// 计算天数
DateDiff(sDate1, sDate2) {
//sDate1和sDate2是2006-12-18格式
var aDate, oDate1, oDate2, iDays;
aDate = sDate1.split("-");
oDate1 = new Date(aDate[1] + "-" + aDate[2] + "-" + aDate[0]); //转换为12-18-2006格式
aDate = sDate2.split("-");
oDate2 = new Date(aDate[1] + "-" + aDate[2] + "-" + aDate[0]);
iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
return iDays;
},
//开始结束 时间的处理 计算天数
formtime(val) {
if (val == null) {
this.spendreimbursementform.startTime = null;
this.spendreimbursementform.endTime = null;
} else {
this.spendreimbursementform.startTime = this.timestampToTime(val[0]);
this.spendreimbursementform.endTime = this.timestampToTime(val[1]);
let time = this.DateDiff(
this.spendreimbursementform.startTime,
this.spendreimbursementform.endTime
);
this.spendreimbursementform.days = time;
}
},
//时间处理
timestampToTime(value) {
var date = value;
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;
},
//重置
resetForm() {
this.$refs.ruleform.resetFields();
},
// 大小写
convertCurrency(money) {
console.log(money);
//汉字的数字
var cnNums = new Array(
"",
"",
"",
"",
"",
"",
"",
"",
"",
""
);
//基本单位
var cnIntRadice = new Array("", "", "", "");
//对应整数部分扩展单位
var cnIntUnits = new Array("", "", "亿", "");
//对应小数部分单位
var cnDecUnits = new Array("", "", "", "");
//整数金额时后面跟的字符
var cnInteger = "";
//整型完以后的单位
var cnIntLast = "";
//最大处理的数字
var maxNum = 999999999999999.9999;
//金额整数部分
var integerNum;
//金额小数部分
var decimalNum;
//输出的中文金额字符串
var chineseStr = "";
//分离金额后用的数组,预定义
var parts;
if (money == "") {
return "";
}
money = parseFloat(money);
if (money >= maxNum) {
//超出最大处理数字
this.$message.warning("你输入的数字太大了");
return "";
}
if (money == 0) {
chineseStr = cnNums[0] + cnIntLast;
}
//转换为字符串
money = money.toString();
if (money.indexOf(".") == -1) {
integerNum = money;
decimalNum = "";
} else {
parts = money.split(".");
integerNum = parts[0];
decimalNum = parts[1].substr(0, 4);
}
//获取整型部分转换
if (parseInt(integerNum, 10) > 0) {
var zeroCount = 0;
var IntLen = integerNum.length;
for (var i = 0; i < IntLen; i++) {
var n = integerNum.substr(i, 1);
var p = IntLen - i - 1;
var q = p / 4;
var m = p % 4;
if (n == "0") {
zeroCount++;
} else {
if (zeroCount > 0) {
chineseStr += cnNums[0];
}
//归零
zeroCount = 0;
chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
}
if (m == 0 && zeroCount < 4) {
chineseStr += cnIntUnits[q];
}
}
chineseStr += cnIntLast;
}
//小数部分
if (decimalNum != "") {
var decLen = decimalNum.length;
for (var i = 0; i < decLen; i++) {
var n = decimalNum.substr(i, 1);
if (n != "0") {
chineseStr += cnNums[Number(n)] + cnDecUnits[i];
}
}
}
if (chineseStr == "") {
chineseStr += cnNums[0] + cnIntLast + cnInteger;
} else if (decimalNum == "") {
chineseStr += cnInteger;
}
this.spendreimbursementform.applyTotalAmountLarge = chineseStr;
},
},
};
</script>
<style>
</style>
\ No newline at end of file
<template>
<div>
<div>
<el-row style="margin:20px 0px">
<el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="24">
<el-form
:model="FixedAssetsAddDTO"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="资产编号" prop="fixedCode">
<el-input v-model="FixedAssetsAddDTO.fixedCode" laceholder="请输入资产编号"></el-input>
</el-form-item>
<el-form-item label="资产名称" prop="fixedName">
<el-input v-model="FixedAssetsAddDTO.fixedName" laceholder="请输入资产名称"></el-input>
</el-form-item>
<el-form-item label="资产金额" prop="fixedMoney">
<el-input v-model="FixedAssetsAddDTO.fixedMoney" laceholder="请输入资产金额"></el-input>
</el-form-item>
<el-form-item label="资产地址" prop="fixedAddress">
<el-input v-model="FixedAssetsAddDTO.fixedAddress" laceholder="请输入资产地址"></el-input>
</el-form-item>
<el-form-item label="提交时间">
<el-input v-model="FixedAssetsAddDTO.registerTime" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="登记详情">
<el-input
type="textarea"
:rows="2"
placeholder="请输入登记信息"
v-model="FixedAssetsAddDTO.fixedDetails"
></el-input>
</el-form-item>
<el-form-item label="登记备注">
<el-input v-model="FixedAssetsAddDTO.registerRemarks" laceholder="请输入登记备注"></el-input>
</el-form-item>
<el-form-item label="资产负责人">
<el-input v-model="FixedAssetsAddDTO.fixedControllerName" :disabled="true"></el-input>
</el-form-item>
<el-form-item style="margin-top:60px">
<el-button type="success" @click="submitForm()">提交</el-button>
<el-button @click="back()">返回</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import { selectByFixedId, updates } from "@/api/assets";
export default {
data() {
return {
FixedAssetsAddDTO: {
companyId: null,
fixedAddress: null, //资产地址
fixedCode: null, //资产编号(不重复)
fixedController: null, //选择资产负责人
fixedDetails: null, //登记详情
fixedMoney: null, //资产金额
fixedName: null, //资产名称
fixedState: 0, //默认为0
registerRemarks: null, //登记备注
registerTime: null, //登记时间
userId: null
}, //添加资产
rules: {
fixedName: [
{ required: true, message: "请输入活动名称", trigger: "change" }
],
fixedCode: [
{ required: true, message: "请收入资产编号", trigger: "change" }
],
fixedAddress: [
{
required: true,
message: "请输入资产地址",
trigger: "change"
}
],
fixedMoney: [
{ required: true, message: "请输入资产金额", trigger: "change" }
]
}
};
},
computed: {
fixedId() {
return this.$route.query.id;
}
},
created() {
this.selectget();
},
methods: {
//查询要修改的信息
selectget() {
selectByFixedId({ fixedId: this.fixedId })
.then(res => {
if (res.success) {
this.FixedAssetsAddDTO = res.data;
} else {
this.$message.error(res.msg);
}
})
.catch(e => {
this.$message.error("查询该条资产失败");
});
},
//提交
submitForm() {
updates(this.FixedAssetsAddDTO)
.then(res => {
if (res.success) {
this.$message({
message: "修改资产信息成功",
type: "success"
});
this.$router.push("/administrationlsit");
} else {
this.$message.error(res.msg);
}
})
.catch(e => {
this.$message.error("错了哦,这是一条错误消息");
});
},
//返回
back(){
this.$router.push("/administrationlsit");
}
}
};
</script>
<style>
</style>
\ No newline at end of file
<template>
<div>
<div style="margin:20px 2%">
<div class="hangeg">
<el-form :inline="true" :model="queryDTO">
<el-form-item label="资产名称" style="margin-left:0px;">
<el-input v-model="queryDTO.fixedName"></el-input>
</el-form-item>
<el-form-item label="资产编号">
<el-input v-model="queryDTO.fixedCode"></el-input>
</el-form-item>
<el-form-item label="资产状态">
<el-select v-model="queryDTO.fixedState" placeholder="请选择">
<el-option
v-for="item in optionsget"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="资产地址">
<el-input v-model="queryDTO.fixedAddress"></el-input>
</el-form-item>
<el-form-item style="margin-left:0px">
<el-button type="primary" icon="el-icon-search" @click="selectgetlist()">查询</el-button>
<el-button type="info" icon="el-icon-refresh" @click="backget()">重置</el-button>
</el-form-item>
</el-form>
</div>
<el-table
:data="assetslist"
style="width: 99%"
border
:cell-style="{'text-align':'center'}"
:header-cell-style="{'text-align':'center'}"
>
<el-table-column label="序号" width="50px" align="center">
<template slot-scope="scope">
{{
(queryDTO.pageNum - 1) * queryDTO.pageSize + scope.$index + 1
}}
</template>
</el-table-column>
<el-table-column prop="fixedName" label="资产名称"></el-table-column>
<el-table-column prop="fixedCode" label="资产编号"></el-table-column>
<el-table-column prop="fixedMoney" label="资产金额"></el-table-column>
<el-table-column prop="fixedAddress" label="资产地址"></el-table-column>
<el-table-column prop="registerTime" label="登记时间" width="150px"></el-table-column>
<el-table-column prop="prop" label="登记人" width="width">
<template slot-scope="scope">
<el-tag>{{scope.row.userName}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="fixedState" label="资产状态">
<template slot-scope="scope">
<el-tag
:type="scope.row.fixedState== '0' ? 'success' : scope.row.fixedState == '1' ? 'warning':'danger' "
>{{scope.row.fixedState == '0' ? '未使用' : scope.row.fixedState == '1' ? '已使用':'已丢失'}}</el-tag>
</template>
</el-table-column>
<el-table-column label="资产使用情况" width="130px">
<template slot-scope="scope">
<el-button type="primary" @click="selectFrom(scope.row)" size="mini">查询资产使用</el-button>
</template>
</el-table-column>
<el-table-column prop="prop" label="操作" width="220px" align="center">
<template slot-scope="scope">
<el-row :gutter="20">
<el-col :span="4">
<el-button type="danger" size="mini" @click="open(scope.row)">丢失登记</el-button>
</el-col>
<el-col :span="8" style="margin-left:5px">
<el-button
type="primary"
size="mini"
style="margin-left:40px"
icon="el-icon-edit"
@click="goUpdate(scope.row)"
>修改资产信息</el-button>
</el-col>
</el-row>
</template>
</el-table-column>
</el-table>
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="queryDTO.pageNum"
:page-size="queryDTO.pageSize"
layout="total, prev, pager, next"
:total="total"
></el-pagination>
</div>
<!-- 抽屉 -->
</div>
</template>
<script>
import {
queryBypage,
useRegistered,
returnRegistration,
lose
} from "@/api/assets";
import { secletAllStaff } from "@/api/user";
export default {
data() {
return {
//查询资产
queryDTO: {
fixedController: null,
companyId: null,
pageNum: 1,
pageSize: 10,
fixedCode: null, //资产编号
fixedAddress: null, //资产地址
fixedState: null, //资产状态
fixedName: null //资产名称
},
optionsget: [
{
value: 0,
label: "未使用"
},
{
value: 1,
label: "已使用"
},
{
value: 2,
label: "已丢失"
}
],
assetslist: [], //表格资产
total: null,
//抽屉
drawer: false,
direction: "rtl",
addDTOlist: {
fixedId: null, //资产ID
fixedState: 2,
fixedLoseRemarks: null, //丢失备注
fixedLoseTime: null
},
///抽屉的修改
user: {
companyId: null,
userName: null,
userId: null
},
options: [],
list: [],
loading: false,
direction: "rtl",
currentTime: new Date(), // 获取当前时间
///抽屉
showid: 1
};
},
created() {
this.queryDTO.companyId = this.$store.getters.companyId; //查询资产获取Id
this.queryDTO.fixedController = this.$store.getters.urId; //获取账号使用者的usid
this.selectAssets();
},
methods: {
//分页
handleCurrentChange(val) {
this.queryDTO.pageNum = val;
this.selectAssets();
},
//重置
backget() {
this.queryDTO = {
fixedController: this.$store.getters.urId,
companyId: this.$store.getters.companyId,
pageNum: 1,
pageSize: 10,
fixedCode: null, //资产编号
fixedAddress: null, //资产地址
fixedState: null, //资产状态
fixedName: null //资产名称
};
this.selectAssets();
},
//搜索
selectgetlist() {
this.selectAssets();
},
//查询公司资产(分页)
selectAssets() {
queryBypage(this.queryDTO)
.then(res => {
if (res.success) {
this.assetslist = res.data.list;
this.total = res.data.total;
} else {
this.$message.error(res.msg);
}
})
.catch(error => {
this.$message.error("查询公司资产失败");
});
},
//修改资产信息
goUpdate(row) {
this.$router.push({
path: "/administrationUpdate",
query: {
id: row.fixedId
}
});
},
//获取当前时间并且处理
timestampToTime() {
var date = this.currentTime;
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.addDTOlist.fixedLoseTime = Y + M + D + h + m + s;
},
//添加借用
//查看资产使用情况
selectFrom(row) {
this.$router.push({
path: "/administrationselect",
query: {
fixedId: row.fixedId
}
});
},
//丢失备注
open(row) {
this.$prompt("请输入丢失备注", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消"
})
.then(({ value }) => {
this.timestampToTime();
this.addDTOlist.fixedLoseRemarks = value;
this.addDTOlist.fixedId = row.fixedId;
lose(this.addDTOlist)
.then(res => {
if (res.success) {
this.selectAssets();
this.$message({
type: "success",
message: "丢失备注是成功"
});
} else {
this.$message.error("丢失备注失败");
}
})
.catch(e => {
this.$message.error(e.msg);
});
})
.catch(() => {
this.$message({
type: "info",
message: "取消输入"
});
});
}
}
};
</script>
<style>
.hangeg .el-form-item{
margin-left: 20px;
}
</style>
\ No newline at end of file
<template>
<div style="width: 98%;margin:20px 1%;">
<div class="hangeg">
<el-form :inline="true" :model="FixedUseQueryDTO">
<el-form-item label="资产名称">
<el-input v-model="FixedUseQueryDTO.fixedName"></el-input>
</el-form-item>
<el-form-item label="资产编号">
<el-input v-model="FixedUseQueryDTO.fixedCode"></el-input>
</el-form-item>
<el-form-item label="归还状态">
<el-select v-model="FixedUseQueryDTO.useState" placeholder="请选择">
<el-option
v-for="item in optionsget"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item style="margin-left:0px">
<el-button type="primary" icon="el-icon-search" @click="selectgetlist()">查询</el-button>
<el-button type="info" icon="el-icon-refresh" @click="backget()">重置</el-button>
<el-button type="success" icon="el-icon-success" @click="Uselist()">使用</el-button>
<el-button @click="back()">返回</el-button>
</el-form-item>
</el-form>
</div>
<el-table :data="tableData" style="margin:20px 0px;" border>
<el-table-column label="序号" width="80" align="center">
<template slot-scope="scope">
{{
(FixedUseQueryDTO.pageNum - 1) * FixedUseQueryDTO.pageSize + scope.$index + 1
}}
</template>
</el-table-column>
<el-table-column prop="fixedName" label="资产名称"></el-table-column>
<el-table-column prop="fixedCode" label="资产编号"></el-table-column>
<el-table-column prop="userName" label="使用姓名">
<template slot-scope="scope">
<el-tag>{{scope.row.userName}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="useStartTime" label="使用时间"></el-table-column>
<el-table-column prop="useEndTime" label="归还时间">
<template slot-scope="scope">{{scope.row.useEndTime==null?'暂未归还':scope.row.useEndTime}}</template>
</el-table-column>
<el-table-column prop="useState" label="归还状态">
<template slot-scope="scope">
<el-tag
:type="scope.row.useState== '0' ? 'danger' : scope.row.useState == '1' ? 'success':'warning' "
>{{scope.row.useState == '0' ? '未归还' : scope.row.useState == '1' ? '已归还':'已丢失'}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="userName" label="操作">
<template slot-scope="scope">
<el-button
type="primary"
size="mini"
:disabled="scope.row.useState==0?false:true"
@click="Uselist(scope.row)"
>归还</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="FixedUseQueryDTO.pageNum"
:page-size="FixedUseQueryDTO.pageSize"
layout="total, prev, pager, next"
:total="total"
></el-pagination>
<!-- 抽屉 -->
<el-drawer title="使用登记" :visible.sync="drawer" :direction="direction" size="40%">
<div v-show="showid==0" style="width:80%;margin-left:10%;margin-top:60px;">
<el-form :model="addDTO" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="借用姓名">
<el-select
v-model="user.userId"
:multiple="false"
filterable
remote
reserve-keyword
placeholder="请输入资产借用人姓名"
:remote-method="remoteMethod"
:loading="loading"
style="width:300px"
>
<el-option
v-for="item in options"
:key="item.userId"
:label="item.userName"
:value="item.userId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="借用备注" prop="startRemarks">
<el-input v-model="addDTO.startRemarks" style="width:300px"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="margin:0px 10px" @click="grtselect()">确认</el-button>
</el-form-item>
</el-form>
</div>
<div v-show="showid==1" style="width:80%;margin-left:10%;margin-top:60px;">
<el-form :model="addDTOs" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="归还姓名">
<el-select
v-model="user.userId"
:multiple="false"
filterable
remote
reserve-keyword
placeholder="请输入资产归还人姓名"
:remote-method="remoteMethod"
:loading="loading"
style="width:300px"
>
<el-option
v-for="item in options"
:key="item.userId"
:label="item.userName"
:value="item.userId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="归还备注">
<el-input v-model="addDTOs.endRemarks" style="width:300px"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" style="margin:0px 10px" @click="grtselectA()">确认</el-button>
</el-form-item>
</el-form>
</div>
</el-drawer>
</div>
</template>
<script>
import {
queryByPageByFixedId,
useRegistered,
returnRegistration
} from "@/api/assets";
import { secletAllStaff } from "@/api/user";
export default {
data() {
return {
tableData: [], //接受数据
FixedUseQueryDTO: {
pageSize: 10,
pageNum: 1,
fixedId: null,
fixedCode: null, //资产编号
useState: null, //归还状态
fixedName: null //资产名称
},
optionsget: [
{
value: 0,
label: "未归还"
},
{
value: 1,
label: "已归还"
},
{
value: 2,
label: "已丢失"
}
],
fixedState: null,
total: null,
//抽屉
drawer: false,
direction: "rtl",
addDTO: {
fixedId: null, //资产ID
useState: 0,
startRemarks: null, //借用备注
useStartTime: null, //借用时间
userId: null //使用人
},
addDTOs: {
id: null,
useState: 1,
endRemarks: "", //归还备注
fixedId: null, //资产id
useEndTime: null, //归还时间
userId: 0 //归还人
},
///抽屉的修改
user: {
companyId: null,
userName: null,
userId: null
},
options: [],
list: [],
loading: false,
direction: "rtl",
currentTime: new Date(), // 获取当前时间
///抽屉
showid: 1
};
},
created() {
this.FixedUseQueryDTO.fixedId = this.$route.query.fixedId;
this.getList();
},
methods: {
//分页
handleCurrentChange(val) {
this.projectQurey.pageNum = val;
this.getList();
},
//查询资产使用情况
getList() {
console.log(this.FixedUseQueryDTO);
queryByPageByFixedId(this.FixedUseQueryDTO)
.then(res => {
if (res.success) {
this.tableData = res.data.list;
this.total = res.data.total;
}
})
.catch(e => {
this.$$message.error(e.msg);
});
},
//使用
Uselist(row) {
if (row != null) {
this.drawer = true;
this.showid = 1;
this.addDTOs.id = row.id;
this.options = [];
this.addDTO = {
fixedId: null, //资产ID
useState: 0,
startRemarks: null, //借用备注
useStartTime: null, //借用时间
userId: null //使用人
};
this.selectupdates();
let query = null;
} else {
this.drawer = true;
this.showid = 0;
this.addDTOs = {
id: null,
useState: 1,
endRemarks: "", //归还备注
fixedId: null, //资产id
useEndTime: null, //归还时间
userId: 0 //归还人
};
this.selectupdates();
}
},
//下拉框的搜索
selectupdates() {
this.user.companyId = this.$store.getters.companyId;
secletAllStaff(this.user)
.then(res => {
if (res.code == 20000) {
this.list = res.data;
}
})
.catch(error => {
this.$message.error("没有当前员工");
});
},
//输入关键字出名字
remoteMethod(query) {
if (query !== "") {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.options = this.list.filter(item => {
return (
item.userName.toLowerCase().indexOf(query.toLowerCase()) > -1
);
});
}, 200);
} else {
this.options = [];
}
},
//获取当前时间并且处理
timestampToTime() {
var date = this.currentTime;
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.addDTO.useStartTime = Y + M + D + h + m + s;
this.addDTOs.useEndTime = Y + M + D + h + m + s;
},
//添加借用
grtselect() {
this.timestampToTime();
this.addDTO.userId = this.user.userId;
this.addDTO.fixedId = this.FixedUseQueryDTO.fixedId;
useRegistered(this.addDTO)
.then(res => {
if (res.success) {
this.$message({
message: "恭喜您借用申请成功",
type: "success"
});
this.drawer = false;
this.getList();
} else {
this.$message.error(res.msg);
}
})
.catch(e => {
this.$message.error(e.msg);
});
},
//添加归还
grtselectA() {
this.timestampToTime();
console.log(this.user);
this.addDTOs.fixedId = this.FixedUseQueryDTO.fixedId;
this.addDTOs.userId = this.user.userId;
console.log(this.addDTOs);
returnRegistration(this.addDTOs)
.then(res => {
if (res.success) {
this.$message({
message: "恭喜您归还申请成功",
type: "success"
});
this.drawer = false;
this.getList();
} else {
this.$message.error(res.msg);
}
})
.catch(e => {
this.$message.error(e.msg);
});
},
//返回
back() {
this.$router.push("/administrationlsit");
},
//重置
backget() {
this.FixedUseQueryDTO= {
pageSize: 10,
pageNum: 1,
fixedId: this.$route.query.fixedId,
fixedCode: null, //资产编号
useState: null, //归还状态
fixedName: null //资产名称
}
this.getList();
},
//搜索
selectgetlist() {
this.getList();
},
}
};
</script>
<style>
</style>
\ No newline at end of file
<template>
<div>
<el-row style="margin:20px 0px">
<el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="24">
<el-form
:model="FixedAssetsAddDTO"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="资产编号" prop="fixedCode">
<el-input v-model="FixedAssetsAddDTO.fixedCode" laceholder="请输入资产编号"></el-input>
</el-form-item>
<el-form-item label="资产名称" prop="fixedName">
<el-input v-model="FixedAssetsAddDTO.fixedName" laceholder="请输入资产名称"></el-input>
</el-form-item>
<el-form-item label="资产金额" prop="fixedMoney">
<el-input v-model="FixedAssetsAddDTO.fixedMoney" laceholder="请输入资产金额"></el-input>
</el-form-item>
<el-form-item label="资产地址" prop="fixedAddress">
<el-input v-model="FixedAssetsAddDTO.fixedAddress" laceholder="请输入资产地址"></el-input>
</el-form-item>
<el-form-item label="提交时间">
<div class="datatime">
<span class="nowDate">{{nowDate}}</span>
</div>
</el-form-item>
<el-form-item label="登记详情">
<el-input
type="textarea"
:rows="2"
placeholder="请输入登记信息"
v-model="FixedAssetsAddDTO.fixedDetails"
></el-input>
</el-form-item>
<el-form-item label="登记备注">
<el-input v-model="FixedAssetsAddDTO.registerRemarks" laceholder="请输入登记备注"></el-input>
</el-form-item>
<el-form-item label="资产负责人" style="width:500px;">
<div>
<el-select
v-model="user.userId"
:multiple="false"
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading"
:disabled="falesId"
>
<el-option
v-for="item in options"
:key="item.userId"
:label="item.userName"
:value="item.userId"
></el-option>
</el-select>
<el-button
style="width:110px;margin:0px 10px"
type="primary"
@click="grtselect()"
>{{name}}</el-button>
</div>
</el-form-item>
<el-form-item style="margin-top:60px">
<el-button type="success" @click="submitForm()">立即创建</el-button>
<el-button type="info" @click="resetForm()">重置</el-button>
<el-button @click="back()">返回</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
import { insert } from "@/api/assets";
import { secletAllStaff } from "@/api/user";
import user from "../../store/modules/user";
export default {
data() {
return {
falesId: true,
FixedAssetsAddDTO: {
companyId: null,
fixedAddress: null, //资产地址
fixedCode: null, //资产编号(不重复)
fixedController: null, //选择资产负责人
fixedDetails: null, //登记详情
fixedMoney: null, //资产金额
fixedName: null, //资产名称
fixedState: 0, //默认为0
registerRemarks: null, //登记备注
registerTime: null, //登记时间
userId: null
}, //添加资产
user: {
companyId: null,
userName: null,
userId: null
},
options: [],
list: [],
loading: false,
rules: {
fixedName: [
{ required: true, message: "请输入活动名称", trigger: "change" }
],
fixedCode: [
{ required: true, message: "请收入资产编号", trigger: "change" }
],
fixedAddress: [
{
required: true,
message: "请输入资产地址",
trigger: "change"
}
],
fixedMoney: [
{ required: true, message: "请输入资产金额", trigger: "change" },
{
pattern: /(^([-]?)[1-9]([0-9]+)?(\.[0-9]{1,6})?$)|(^([-]?)(0){1}$)|(^([-]?)[0-9]\.[0-9]([0-9])?$)/,
message: "输入资产金额不合法",
trigger: "change"
}
]
},
//计时器
nowDate: null, //存放年月日变量时分秒变量
timer: "", //定义一个定时器的变量
currentTime: new Date(), // 获取当前时间
name:"选择负责人",
};
},
created() {
this.FixedAssetsAddDTO.companyId = this.$store.getters.companyId;
this.FixedAssetsAddDTO.userId = this.$store.getters.urId;
this.timer = setInterval(this.getTime, 1000);
this.ggb();
},
methods: {
//下拉框的搜索
ggb() {
this.user.companyId = this.$store.getters.companyId;
secletAllStaff(this.user)
.then(res => {
if (res.code == 20000) {
this.list = res.data;
}
})
.catch(error => {
this.$message.error("没有当前负责人");
});
},
//输入关键字出名字
remoteMethod(query) {
if (query !== "") {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.options = this.list.filter(item => {
return (
item.userName.toLowerCase().indexOf(query.toLowerCase()) > -1
);
});
}, 200);
} else {
this.options = [];
}
},
//负责人添加
grtselect() {
if (this.falesId == true) {
this.falesId = false;
this.name="确定负责人"
} else {
if (this.options.length > 0) {
this.FixedAssetsAddDTO.fixedController = this.user.userId;
this.falesId = true;
this.name="修改负责人"
console.log(this.FixedAssetsAddDTO.fixedController);
} else {
this.$message.error("没有负责人哦亲");
}
}
},
//计时器
getTime() {
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hour = date.getHours();
const minute = date.getMinutes();
const second = date.getSeconds();
const str = "";
if (this.hour > 12) {
this.hour -= 12;
this.str = " PM";
} else {
this.str = " AM";
}
this.month = check(month);
this.day = check(day);
this.hour = check(hour);
this.minute = check(minute);
this.second = check(second);
function check(i) {
const num = i < 10 ? "0" + i : i;
return num;
}
this.nowDate =
year +
"" +
this.month +
"" +
this.day +
"" +
this.hour +
":" +
this.minute +
":" +
this.second;
},
//时间处理
timestampToTime() {
var date = this.currentTime;
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.FixedAssetsAddDTO.registerTime = Y + M + D + h + m + s;
},
//提交
submitForm() {
this.timestampToTime();
console.log(this.FixedAssetsAddDTO);
this.$refs.ruleForm.validate(valid => {
if (valid) {
insert(this.FixedAssetsAddDTO)
.then(res => {
if (res.success) {
this.$message({
showClose: true,
message: "提交资产成功",
type: "success"
});
this.$router.push("/assetslist");
} else {
this.$message.error(res.msg);
}
})
.catch(error => {
this.$message.error(error.msg);
});
}
});
},
// 返回
back() {
this.$router.push("/assetslist");
},
//重置
resetForm() {
this.FixedAssetsAddDTO = {
fixedAddress: null, //资产地址
fixedCode: null, //资产编号(不重复)
fixedController: null, //选择资产负责人
fixedDetails: null, //登记详情
fixedMoney: null, //资产金额
fixedName: null, //资产名称
fixedState: 0, //默认为0
registerRemarks: null, //登记备注
registerTime: null //登记时间
};
}
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer); // 在Vue实例销毁前,清除定时器
}
}
};
</script>
<style>
.nowDate {
font-size: 20px;
font-family: "Lucida Console", "Courier New", monospace;
}
.nowTime {
font-size: 20px;
font-weight: 500px;
font-family: "Lucida Console", "Courier New", monospace;
}
.datatime {
width: 300px;
}
</style>
\ No newline at end of file
<template>
<!-- 公司资产 -->
<div style="margin-left:1%">
<div>
<div style="margin:20px 0px">
<el-form :inline="true" :model="queryDTO">
<el-form-item label="资产名称">
<el-input v-model="queryDTO.fixedName"></el-input>
</el-form-item>
<el-form-item label="资产编号">
<el-input v-model="queryDTO.fixedCode"></el-input>
</el-form-item>
<el-form-item label="资产状态">
<el-select v-model="queryDTO.fixedState" placeholder="请选择">
<el-option
v-for="item in optionsget"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="资产地址">
<el-input v-model="queryDTO.fixedAddress"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="selectgetlist()">查询</el-button>
<el-button type="info" icon="el-icon-refresh" @click="backget()">重置</el-button>
<el-button type="success" icon="el-icon-plus" @click="Upedatassets()">添加资产</el-button>
</el-form-item>
</el-form>
</div>
<el-table
:data="assetslist"
style="width: 99%"
:cell-style="{'text-align':'center'}"
:header-cell-style="{'text-align':'center'}"
border
>
<el-table-column label="序号" width="50px" align="center">
<template slot-scope="scope">
{{
(queryDTO.pageNum - 1) * queryDTO.pageSize + scope.$index + 1
}}
</template>
</el-table-column>
<el-table-column prop="fixedName" label="资产名称"></el-table-column>
<el-table-column prop="fixedCode" label="资产编号"></el-table-column>
<el-table-column prop="fixedMoney" label="资产金额"></el-table-column>
<el-table-column prop="fixedController" label="资产管理员">
<template slot-scope="scope">
<el-tag>{{scope.row.fixedControllerName}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="fixedAddress" label="资产地址"></el-table-column>
<el-table-column prop="registerTime" label="登记时间" width="200px"></el-table-column>
<el-table-column prop="prop" label="登记人">
<template slot-scope="scope">
<el-tag>{{scope.row.userName}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="fixedState" label="资产状态">
<template slot-scope="scope">
<el-tag
:type="scope.row.fixedState== '0' ? 'success' : scope.row.fixedState == '1' ? 'warning':'danger' "
>{{scope.row.fixedState == '0' ? '未使用' : scope.row.fixedState == '1' ? '已使用':'已丢失'}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="prop" label="操作">
<template slot-scope="scope">
<el-button type="danger" size="mini" @click="Updateget(scope.row)">修改管理者</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="queryDTO.pageNum"
:page-size="queryDTO.pageSize"
layout="total, prev, pager, next"
:total="total"
></el-pagination>
</div>
<!-- 修改管理张的抽屉 -->
<div>
<el-dialog
title="修改管理人员"
:visible.sync="drawer"
:direction="direction"
:before-close="handleClose"
width="30%"
>
<div style="margin:30px 10%;height:130px;">
<el-select
v-model="user.userName"
:multiple="false"
filterable
remote
reserve-keyword
placeholder="请输入资产负责人姓名"
:remote-method="remoteMethod"
:loading="loading"
:disabled=" falesId"
>
<el-option
v-for="item in options"
:key="item.userId"
:label="item.userName"
:value="item.userId"
></el-option>
</el-select>
<el-button
type="primary"
style="width:110px;margin:20px 10px"
@click="grtselect()"
>{{fzname}}</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import { queryBypageAll, update } from "@/api/assets";
import { secletAllStaff } from "@/api/user";
export default {
data() {
return {
//查询资产
queryDTO: {
fixedCode: null, //资产编号
fixedAddress: null, //资产地址
fixedState: null, //资产状态
fixedName: null, //资产名称
companyId: null,
pageNum: 1,
pageSize: 10
},
//状态
optionsget: [
{
value: 0,
label: "未使用"
},
{
value: 1,
label: "已使用"
},
{
value: 2,
label: "已丢失"
}
],
assetslist: [], //表格资产
total: null,
drawer: false, //修改管理值抽屉
///抽屉的修改
user: {
companyId: null,
userId: null,
userName: null
},
options: [],
list: [],
loading: false,
direction: "rtl",
falesId: true,
fzname: "修改管理者",
updateDTO: {
fixedId: null,
fixedController: null
} ///抽屉
};
},
created() {
this.queryDTO.companyId = this.$store.getters.companyId; //查询资产获取Id
this.selectAssets();
this.selectupdates();
},
methods: {
//分页
handleCurrentChange(val) {
console.log(val);
this.queryDTO.pageNum = val;
this.selectAssets();
},
//重置
backget() {
this.queryDTO = {
fixedCode: null, //资产编号
fixedAddress: null, //资产地址
fixedState: null, //资产状态
fixedName: null, //资产名称
companyId: this.$store.getters.companyId,
pageNum: 1,
pageSize: 10
};
this.selectAssets();
},
//搜索
selectgetlist() {
this.selectAssets();
},
//查询公司资产(分页)
selectAssets() {
queryBypageAll(this.queryDTO)
.then(res => {
if (res.success) {
this.assetslist = res.data.list;
this.total = res.data.total;
} else {
this.$message.error(res.msg);
}
})
.catch(error => {
this.$message.error("查询公司资产失败");
});
},
//添加公司资产
Upedatassets() {
this.$router.push("/assetsUpedata");
},
//下拉框的搜索
selectupdates() {
let user = {
companyId: this.$store.getters.companyId,
};
secletAllStaff(user)
.then(res => {
if (res.code == 20000) {
this.list = res.data;
}
})
.catch(error => {
this.$message.error("没有当前负责人");
});
},
//修改管理者
Updateget(row) {
this.drawer = true;
this.updateDTO.fixedId = row.fixedId;
this.updateDTO.fixedController = row.fixedController;
this.user.userName = row.fixedControllerName;
console.log(row);
},
//输入关键字出名字
remoteMethod(query) {
if (query !== "") {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.options = this.list.filter(item => {
return (
item.userName.toLowerCase().indexOf(query.toLowerCase()) > -1
);
});
}, 200);
} else {
this.options = [];
}
},
//负责人添加
grtselect() {
if (this.falesId != false) {
this.falesId = false;
this.fzname = "确定管理者";
} else {
if (this.options.length > 0) {
this.updateDTO.fixedController = this.user.userName;
console.log(this.updateDTO);
update(this.updateDTO)
.then(res => {
if (res.success) {
this.$message({
showClose: true,
message: "管理员修改成功",
type: "success"
});
this.drawer = false;
this.falesId = true;
this.selectAssets();
} else {
this.$message({
showClose: true,
message: "修改失败",
type: "warning"
});
}
})
.catch(e => {
this.$message.error(e.msg);
});
} else {
this.$message({
showClose: true,
message: "还没有修改负责人哦亲",
type: "warning"
});
this.drawer = false;
}
}
},
//关闭抽屉
handleClose(done) {
this.falesId = true;
this.drawer = true;
this.fzname = "修改管理者";
this.options = [];
done();
}
}
};
</script>
<style>
</style>
\ No newline at end of file
<template>
<div style="margin:20px 2%">
<div class="hangeg">
<el-form :inline="true" :model="queryDTO">
<el-form-item label="资产名称">
<el-input v-model="queryDTO.fixedName"></el-input>
</el-form-item>
<el-form-item label="资产编号">
<el-input v-model="queryDTO.fixedCode"></el-input>
</el-form-item>
<el-form-item label="归还状态">
<el-select v-model="queryDTO.useState" placeholder="请选择">
<el-option
v-for="item in optionsget"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item style="margin-left:0px">
<el-button type="primary" icon="el-icon-search" @click="selectgetlist()">查询</el-button>
<el-button type="info" icon="el-icon-refresh" @click="backget()">重置</el-button>
</el-form-item>
</el-form>
</div>
<el-table
:data="tableData"
style="width:99%"
:cell-style="{'text-align':'center'}"
:header-cell-style="{'text-align':'center'}"
border
>
<el-table-column label="序号" width="80" align="center">
<template slot-scope="scope">
{{
(queryDTO.pageNum - 1) * queryDTO.pageSize + scope.$index + 1
}}
</template>
</el-table-column>
<el-table-column prop="fixedName" label="资产名称"></el-table-column>
<el-table-column prop="fixedCode" label="资产编号"></el-table-column>
<el-table-column prop="userName" label="使用姓名">
<template slot-scope="scope">
<el-tag>{{scope.row.userName}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="useStartTime" label="使用时间"></el-table-column>
<el-table-column prop="prop" label="归还时间">
<template slot-scope="scope">{{scope.row.useEndTime==null?'暂未归还':scope.row.useEndTime}}</template>
</el-table-column>
<el-table-column prop="useState" label="资产状态">
<template slot-scope="scope">
<el-tag
:type="scope.row.useState== '0' ? 'danger' : scope.row.useState == '1' ? 'success':'warning' "
>{{scope.row.useState == '0' ? '未归还' : scope.row.useState == '1' ? '已归还':'已丢失'}}</el-tag>
</template>
</el-table-column>
</el-table>
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="queryDTO.pageNum"
:page-size="queryDTO.pageSize"
layout="total, prev, pager, next"
:total="total"
></el-pagination>
</div>
</template>
<script>
import { queryBypageget } from "@/api/assets";
export default {
data() {
return {
queryDTO: {
pageNum: 1,
pageSize: 10,
userId: null,
fixedCode: null, //资产编号
useState: null, //归还状态
fixedName: null //资产名称
},
optionsget: [
{
value: 0,
label: "未归还"
},
{
value: 1,
label: "已归还"
},
{
value: 2,
label: "已丢失"
}
],
tableData: [],
total: null
};
},
created() {
this.queryDTO.userId = this.$store.getters.urId; //获取账号使用者的usid
this.getlist();
},
methods: {
//分页
handleCurrentChange(val) {
this.queryDTO.pageNum = val;
this.getlist();
},
//重置
backget() {
this.queryDTO= {
pageNum: 1,
pageSize: 10,
userId: this.$store.getters.urId,
fixedCode: null, //资产编号
useState: null, //资产状态
fixedName: null //资产名称
}
this.getlist();
},
//搜索
selectgetlist() {
this.getlist();
},
//分页查询
getlist() {
queryBypageget(this.queryDTO)
.then(res => {
if (res.success) {
this.tableData = res.data.list;
this.total = res.data.total;
} else {
this.$message.error(res.msg);
}
})
.catch(e => {
this.$$message.error(e.msg);
});
}
}
};
</script>
<style>
</style>
\ No newline at end of file
<template>
<div class="container">
<!-- 添加模块 -->
<div class="center">
<el-form
ref="form"
:model="companylist"
:inline="true"
label-width="150px"
:rules="rules"
>
<el-form-item label="文件名称" prop="companyFileName">
<el-input v-model="companylist.companyFileName"></el-input>
</el-form-item>
<el-form-item label="文件描述">
<el-input
type="textarea"
:rows="4"
placeholder="请输入内容"
v-model="companylist.fileDetails"
>
</el-input>
</el-form-item>
<el-form-item label="文件说明">
<el-input
type="textarea"
:rows="4"
placeholder="请输入内容"
v-model="companylist.fileRemarks"
>
</el-input>
</el-form-item>
<el-form-item label="上传公司文件">
<el-upload
class="upload-demo"
drag
ref="Upload"
:action="action"
:auto-upload="false"
:data="companylist"
multiple
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">文件大小不超过500kb</div>
</el-upload>
</el-form-item>
<br />
<div class="items">
<el-form-item>
<el-button
type="success"
icon="el-icon-upload2"
@click="submitForm()"
>提交</el-button
>
</el-form-item>
<el-form-item>
<el-button type="info" @click="returnback()">返回</el-button>
</el-form-item>
</div>
</el-form>
</div>
<div></div>
</div>
</template>
<script>
export default {
data() {
return {
//添加文件的数组
companylist: {
companyFileName: null, //文件名字
companyId: null,
fileDetails: "", //文件描述
fileRemarks: "", //文件备注
userId: null,
},
// 表单验证
rules: {
companyFileName: [
{ required: true, message: "请填写文件名称", trigger: "change" },
],
},
};
},
created() {
this.companylist.companyId = this.$store.getters.companyId;
this.companylist.userId = this.$store.getters.info.userId;
this.action = process.env.VUE_APP_BASE_API + "/file/companyFile";
},
methods: {
//提交公司文件
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
this.$refs.Upload.submit();
this.$message.success("上传成功");
this.returnback();
}
});
},
//返回
returnback() {
this.$router.push("/selfFileList");
},
},
};
</script>
<style scoped>
.center {
width: 800px;
padding: 40px 10px;
}
.items {
padding: 0 100px;
}
</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