581 lines
22 KiB
Vue
581 lines
22 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="head-container">
|
|
<el-radio-group v-model="query.time" @change="timeChange">
|
|
<el-radio-button :label="item.value" v-for="item in timeList" :key="item.label">{{ item.label
|
|
}}</el-radio-button>
|
|
</el-radio-group>
|
|
</div>
|
|
<div class="head-container" v-if="query.time == 'custom'">
|
|
<el-date-picker v-model="query.createdAt" type="daterange" range-separator="至" start-placeholder="开始日期"
|
|
end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="getTableData">
|
|
</el-date-picker>
|
|
</div>
|
|
<div class="head-container">
|
|
<div class="filter_wrap">
|
|
<el-select v-model="query.status" placeholder="付款状态">
|
|
<el-option label="待支付" value="0"></el-option>
|
|
<el-option label="已付款" value="1"></el-option>
|
|
</el-select>
|
|
<el-select v-model="query.type" placeholder="选择类型">
|
|
<el-option label="进货" value="purveyor"></el-option>
|
|
<el-option label="退货" value="reject"></el-option>
|
|
</el-select>
|
|
<el-button type="primary" @click="getTableData">查询</el-button>
|
|
<el-button @click="resetHandle">重置</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="head-container">
|
|
<div class="info_list">
|
|
<div class="item">
|
|
<div class="icon_wrap" style="background-color: #F2D7FF;">
|
|
<i class="icon el-icon-info" style="color:#C978EE;"></i>
|
|
</div>
|
|
<div class="info">
|
|
<div class="n">￥{{ info.totalAmount }}</div>
|
|
<div class="intro">总交易{{ info.waitCount }}笔</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="icon_wrap" style="background-color: #DFFECC;">
|
|
<i class="icon el-icon-success" style="color:#47B505;"></i>
|
|
</div>
|
|
<div class="info">
|
|
<div class="n">￥{{ info.paidAmount }}</div>
|
|
<div class="intro">已支付金额</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="icon_wrap" style="background-color: #FFE7D6;">
|
|
<i class="icon el-icon-circle-plus" style="color: #FF6B00;"></i>
|
|
</div>
|
|
<div class="info">
|
|
<div class="n">￥{{ info.waitAmount }}</div>
|
|
<div class="intro">待支付金额</div>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="icon_wrap" style="background-color: #FFF1D5;">
|
|
<i class="icon el-icon-warning" style="color: #FEB420;"></i>
|
|
</div>
|
|
<div class="info">
|
|
<div class="n">{{ info.waitNumber }}</div>
|
|
<div class="intro">待支付笔数</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="head-container">
|
|
<div class="select_count_wrap">
|
|
<div class="select_count">
|
|
<i class="icon el-icon-warning"></i>
|
|
已选中
|
|
<span class="n">{{ selectCount }}</span>
|
|
项
|
|
</div>
|
|
<el-button>批量付款</el-button>
|
|
</div>
|
|
</div> -->
|
|
<div class="head-container">
|
|
<el-table :data="tableData.list" v-loading="tableData.loading" @select="selectHandle"
|
|
@select-all="selectHandle">
|
|
<el-table-column type="selection" width="55" align="center"></el-table-column>
|
|
<el-table-column label="创建日期" prop="createdAt">
|
|
<template v-slot="scope">
|
|
{{ dayjs(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="类型" prop="type">
|
|
<template v-slot="scope">
|
|
{{ scope.row.type | typeFilter }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="应付金额" prop="totalAmount">
|
|
<template v-slot="scope">
|
|
￥{{ scope.row.totalAmount }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="已付款金额" prop="totalAmount">
|
|
<template v-slot="scope">
|
|
<span style="color: #47B505;">
|
|
￥{{ scope.row.paidAmount }}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="待付款金额" prop="waitAmount">
|
|
<template v-slot="scope">
|
|
<span class="num"> ￥{{ scope.row.waitAmount }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="状态" prop="status">
|
|
<template v-slot="scope">
|
|
<el-tag type="info">
|
|
{{ types.find(item => item.value == scope.row.status).label }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="付款方式" prop="payType"></el-table-column>
|
|
<el-table-column label="备注" prop="remark"></el-table-column>
|
|
<el-table-column label="付款时间" prop="updatedAt">
|
|
<template v-slot="scope">
|
|
{{ scope.row.paidAt && dayjs(scope.row.paidAt).format('YYYY-MM-DD HH:mm:ss') }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" align="center">
|
|
<template v-slot="scope">
|
|
<el-button type="text" size="mini" round @click="Uppop(scope.row.id)">付款</el-button>
|
|
<el-button type="text" size="mini"
|
|
@click="typedialogshowsumbit(scope.row.id)">账单付款记录</el-button>
|
|
<el-button type="text" size="mini" @click="stockData.size = 10,
|
|
stockData.page = 0, gettbConsInfoFlowstock(scope.row)">出入库记录</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
|
|
@current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
|
|
<!-- 付款弹窗组件 -->
|
|
<el-dialog title="" :visible.sync="dialogTableVisible" width="350px">
|
|
<el-form :rules="rules" ref="ruleForm" :model="ruleForm">
|
|
<el-form-item label="付款金额" label-width="80px" prop="montey">
|
|
<el-input v-model="ruleForm.montey" placeholder="请输入金额" type="number" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="付款方式" label-width="80px">
|
|
<el-input v-model="ruleForm.payType" placeholder="请输入付款方式" type="text"
|
|
autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="备注" label-width="80px">
|
|
<el-input v-model="ruleForm.remark" placeholder="请输备注" type="text" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogTableVisible = false; ruleForm.montey = ''; ruleForm.payType = ''">取
|
|
消</el-button>
|
|
<el-button type="primary" @click="sumbit('ruleForm')">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<el-dialog title="账单付款记录" :visible.sync="typedialogshow">
|
|
<div class="head-container">
|
|
<el-input v-model="querytypedialogshow.type" size="small" clearable placeholder="支付方式"
|
|
style="width: 100%;" class="filter-item" @keyup.enter.native="getTableDatatype" />
|
|
<div style="margin-top: 10px;">
|
|
<el-button type="primary" @click="getTableDatatype">查询</el-button>
|
|
<el-button @click="resetHandletype">重置</el-button>
|
|
</div>
|
|
</div>
|
|
<el-table ref="table" :data="tableDatatype.data" v-loading="tableDatatype.loading" row-key="id">
|
|
<el-table-column label="支付方式" prop="payType" />
|
|
<el-table-column label="支付金额" prop="paidAmount" />
|
|
<el-table-column label="备注" prop="remark" />
|
|
<el-table-column label="创建时间" prop="createTime">
|
|
<template v-slot="scope">
|
|
{{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-dialog>
|
|
<!--入库记录 -->
|
|
<el-dialog title="出入库记录" :visible.sync="variabilityshow" width="75%">
|
|
<div class="head-container">
|
|
<el-table ref="table" :data="stockData.data" v-loading="stockData.loading" row-key="id" height="450">
|
|
<el-table-column label="类型" prop="type">
|
|
<template v-slot="scope">
|
|
{{ scope.row.type == 'reject' ? '退货出库' : '供应商入库' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="状态" prop="status">
|
|
<template v-slot="scope">
|
|
{{ scope.row.status == 'status' ? '正常 ' : '作废' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="备注" prop="remark">
|
|
</el-table-column>
|
|
<el-table-column label="创建时间" prop="stockTime">
|
|
<template v-slot="scope">
|
|
{{ dayjs(scope.row.stockTime).format('YYYY-MM-DD HH:mm:ss') }}
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="head-container">
|
|
<el-pagination :total="stockData.total" :current-page="stockData.page + 1" :page-size="stockData.size"
|
|
layout="total, sizes, prev, pager, next, jumper" @current-change="wstockChange" @size-change="(e) => {
|
|
stockData.size = e;
|
|
stockData.page = 0;
|
|
gettbConsInfoFlowstock();
|
|
}" />
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import dayjs from 'dayjs'
|
|
import { tbShopPurveyorTransactInfo, paidAmount, dictDetail, tbShopPurveyorTransactSum, tbShopPurveyorTransacttransactPayInfos, tbProductStockOperatepage } from '@/api/invoicing'
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 付款当前的id
|
|
idinfo: "",
|
|
dayjs,
|
|
dialogTableVisible: false,
|
|
timeList: [
|
|
{
|
|
label: '全部',
|
|
value: 'all'
|
|
},
|
|
{
|
|
label: '今天',
|
|
value: '0'
|
|
},
|
|
{
|
|
label: '昨天',
|
|
value: '-1'
|
|
},
|
|
{
|
|
label: '最近7天',
|
|
value: '-7'
|
|
},
|
|
{
|
|
label: '最近30天',
|
|
value: '-30'
|
|
},
|
|
{
|
|
label: '本周',
|
|
value: 'week'
|
|
},
|
|
{
|
|
label: '本月',
|
|
value: 'moth'
|
|
},
|
|
{
|
|
label: '自定义',
|
|
value: 'custom'
|
|
}
|
|
],
|
|
types: [
|
|
{
|
|
value: 0,
|
|
label: '待付款'
|
|
},
|
|
{
|
|
value: 1,
|
|
label: '已付款'
|
|
},
|
|
{
|
|
value: '-1',
|
|
label: '作废'
|
|
}
|
|
],
|
|
ruleForm: {
|
|
montey: null,
|
|
payType: null,
|
|
remark: ""
|
|
},
|
|
selectCount: 0,
|
|
query: {
|
|
type: '',
|
|
status: '',
|
|
time: 'all',
|
|
createdAt: []
|
|
},
|
|
tableData: {
|
|
page: 0,
|
|
size: 10,
|
|
total: 0,
|
|
sort: 'id',
|
|
loading: false,
|
|
list: []
|
|
},
|
|
info: '',
|
|
rules: {
|
|
montey: [
|
|
{ required: true, message: '请输入金额', trigger: 'blur' },
|
|
],
|
|
},
|
|
typedialogshow: false,//查看详情
|
|
querytypedialogshow: {
|
|
type: '',
|
|
id: ''
|
|
},
|
|
tableDatatype: {
|
|
page: 0,
|
|
size: 10,
|
|
total: 0,
|
|
loading: false,
|
|
list: []
|
|
},
|
|
variabilityshow: false,
|
|
variabilitytitle: '',
|
|
stockData: {
|
|
data: [],
|
|
page: 0,
|
|
size: 10,
|
|
loading: false,
|
|
total: 0,
|
|
id: ''
|
|
},
|
|
}
|
|
},
|
|
filters: {
|
|
typeFilter(t) {
|
|
const m = {
|
|
purveyor: '进货单',
|
|
reject: '退货单',
|
|
cons_in: '耗材入库',
|
|
cons_out: '耗材出库'
|
|
}
|
|
return m[t]
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getTableData()
|
|
},
|
|
methods: {
|
|
Uppop(id) {
|
|
this.dialogTableVisible = true
|
|
this.idinfo = id
|
|
},
|
|
sumbit(formName) {
|
|
this.$refs[formName].validate(async (valid) => {
|
|
if (valid) {
|
|
this.dialogTableVisible = false
|
|
const res = await paidAmount({
|
|
id: this.idinfo,
|
|
paidAmount: this.ruleForm.montey,
|
|
payType: this.ruleForm.payType,
|
|
remark: this.ruleForm.remark
|
|
})
|
|
this.$message({ type: 'success', message: '付款成功!' });
|
|
this.ruleForm.montey = ''
|
|
this.ruleForm.payType = ''
|
|
this.getTableData()
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
|
|
},
|
|
async getTableData() {
|
|
this.tableData.loading = true
|
|
try {
|
|
const res = await tbShopPurveyorTransactInfo({
|
|
page: this.tableData.page,
|
|
size: this.tableData.size,
|
|
sort: this.tableData.sort,
|
|
purveyorId: this.$route.query.purveyorId,
|
|
status: this.query.status,
|
|
type: this.query.type,
|
|
createdAt: this.query.createdAt,
|
|
})
|
|
this.tableData.loading = false
|
|
this.tableData.list = res.content
|
|
this.tableData.total = res.totalElements
|
|
this.tbShopPurveyorTransactSum()
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
},
|
|
// 重置查询
|
|
resetHandle() {
|
|
this.query.time = 'all'
|
|
this.query.createdAt = []
|
|
this.tableData.page = 0;
|
|
this.query.type = ''
|
|
this.query.status = ''
|
|
this.getTableData()
|
|
},
|
|
// 分页回调
|
|
paginationChange(e) {
|
|
this.tableData.page = e - 1
|
|
this.getTableData()
|
|
},
|
|
// 选择时间
|
|
timeChange(e) {
|
|
this.query.createdAt = []
|
|
const format0 = 'YYYY-MM-DD 00:00:00'
|
|
const format1 = 'YYYY-MM-DD 23:59:59'
|
|
switch (e) {
|
|
case '0':
|
|
this.query.createdAt = [dayjs().format(format0), dayjs().format(format1)]
|
|
break;
|
|
case '-1':
|
|
this.query.createdAt = [dayjs().add(-1, 'day').format(format0), dayjs().add(-1, 'day').format(format1)]
|
|
break;
|
|
case '-7':
|
|
this.query.createdAt = [dayjs().add(-7, 'day').format(format0), dayjs().format(format1)]
|
|
break;
|
|
case '-30':
|
|
this.query.createdAt = [dayjs().add(-30, 'day').format(format0), dayjs().format(format1)]
|
|
break;
|
|
case 'week':
|
|
this.query.createdAt = [dayjs().startOf('week').format(format0), dayjs().endOf('week').format(format1)]
|
|
break;
|
|
case 'moth':
|
|
this.query.createdAt = [dayjs().startOf('month').format(format0), dayjs().endOf('month').format(format1)]
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
this.getTableData()
|
|
},
|
|
selectHandle(selection, row) {
|
|
this.selectCount = 0
|
|
this.selectCount = selection.length
|
|
},
|
|
async tbShopPurveyorTransactSum() {
|
|
this.info = await tbShopPurveyorTransactSum({ purveyorId: this.$route.query.purveyorId, type: this.query.type })
|
|
},
|
|
//记录分页
|
|
paginationChangetype(e) {
|
|
this.tableDatatype.page = e - 1
|
|
this.getTableDatatype()
|
|
},
|
|
// 记录重置查询
|
|
resetHandletype() {
|
|
this.querytypedialogshow.type = ''
|
|
this.tableData.page = 0
|
|
this.getTableDatatype()
|
|
},
|
|
typedialogshowsumbit(ID) {
|
|
this.querytypedialogshow.id = ID
|
|
this.getTableDatatype()
|
|
},
|
|
//记录列表
|
|
async getTableDatatype() {
|
|
this.tableDatatype.loading = true
|
|
try {
|
|
const res = await tbShopPurveyorTransacttransactPayInfos({
|
|
// page: this.tableDatatype.page,
|
|
// size: this.tableDatatype.size,
|
|
type: this.querytypedialogshow.type,
|
|
id: this.querytypedialogshow.id
|
|
})
|
|
this.typedialogshow = true
|
|
this.tableDatatype.loading = false
|
|
this.tableDatatype.data = res
|
|
this.tableDatatype.total = res.totalElements
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
},
|
|
wstockChange(e) {
|
|
this.stockData.page = e - 1;
|
|
this.gettbConsInfoFlowstock();
|
|
},
|
|
async gettbConsInfoFlowstock(item) {
|
|
if (item) {
|
|
this.stockData.id = item.id
|
|
}
|
|
this.variabilityshow = true
|
|
this.stockData.loading = true;
|
|
let arr = []
|
|
// if (this.query.createdAt.length) {
|
|
// arr = [this.query.createdAt[0] + ' 00:00:00', this.query.createdAt[1] + ' 23:59:59']
|
|
// } else {
|
|
// arr = []
|
|
// }
|
|
let res = await tbProductStockOperatepage({
|
|
page: this.stockData.page,
|
|
size: this.stockData.size,
|
|
shopId: localStorage.getItem("shopId"),
|
|
type: ["cons_in", "cons_out"],//预留耗材id
|
|
purveyorId: this.stockData.id,//列名
|
|
createdAt: arr//耗材id
|
|
})
|
|
this.stockData.loading = false;
|
|
this.stockData.data = res.content;
|
|
this.stockData.total = res.totalElements;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.select_count_wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.select_count {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #e7f3ff;
|
|
width: 120px;
|
|
height: 40px;
|
|
font-size: 14px;
|
|
margin-right: 10px;
|
|
border-radius: 4px;
|
|
|
|
.icon {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.n {
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.icon,
|
|
.n {
|
|
color: #409EFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.num {
|
|
color: #F56C6C;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.count {
|
|
color: #409EFF;
|
|
}
|
|
|
|
.info_list {
|
|
display: flex;
|
|
gap: 20px;
|
|
|
|
.item {
|
|
flex: 1;
|
|
background-color: #fff;
|
|
padding: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #f5f5f5;
|
|
|
|
.icon_wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
padding: 2px;
|
|
|
|
.icon {
|
|
font-size: 40px;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-left: 20px;
|
|
|
|
.n {
|
|
font-size: 28px;
|
|
text-indent: -6px;
|
|
}
|
|
|
|
.intro {
|
|
font-size: 12px;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<!-- <style>
|
|
/deep/ .el-dialog__body{
|
|
padding-right: 20px!important;
|
|
}
|
|
</style> --> |