Skip to content

V
vipSupplier
Commit 6fb284d0 by wsm
Options

页面

parent 7922d52e
Showing with 2496 additions and 27 deletions
src/layouts/components/VabNavBar/index.vue
......@@ -14,7 +14,9 @@
</el-col>
<el-col :xs="20" :sm="12" :md="12" :lg="12" :xl="12">
<div class="right-panel">
<span>系统问题咨询电话：021-23513964，业务问题请联系采购或财务</span>
<span style="font-weight: bold">
系统问题咨询电话：021-23513964，业务问题请联系采购或财务
</span>
<span>（咨询时间：周一至周五晚上9:00-18:00）</span>
<span>本页操作说明书：</span>
<img
......
src/router/index.js
......@@ -306,8 +306,8 @@ export const asyncRoutes = [
},
},
{
path: 'payRecord',
name: 'payRecord',
path: 'getOrder',
name: 'getOrder',
component: () => import('@/views/vab/getOrder/index'),
meta: {
title: '订单获取',
......
src/views/vab/accountInfoConfirm/index.vue
<template>
<div></div>
<el-table border :data="tableData" style="width: 100%">
<el-table-column type="expand">
<template slot-scope="props">
<el-form
label-position="right"
inline
class="demo-table-expand"
label-width="100px"
>
<el-form-item label="开户银行">
<span>{{ props.row.name }}</span>
</el-form-item>
<el-form-item label="银行账号">
<span>{{ props.row.shop }}</span>
</el-form-item>
<el-form-item label="账户名称">
<span>{{ props.row.id }}</span>
</el-form-item>
<el-form-item label="税务登记证号">
<span>{{ props.row.shopId }}</span>
</el-form-item>
<el-form-item label="发票地址">
<span>{{ props.row.category }}</span>
</el-form-item>
<el-form-item label="发票电话">
<span>{{ props.row.address }}</span>
</el-form-item>
<el-form-item label="发票类型">
<span>{{ props.row.desc }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column
type="index"
label="编号"
width="80px"
align="center"
></el-table-column>
<el-table-column
label="供应商编号"
prop="id"
align="center"
></el-table-column>
<el-table-column
label="供应商名称"
prop="name"
align="center"
></el-table-column>
<el-table-column
label="结算厂编"
prop="desc"
align="center"
></el-table-column>
<el-table-column
label="往来状态"
prop="status"
align="center"
></el-table-column>
<el-table-column
label="生效日期"
prop="desc"
align="center"
></el-table-column>
<el-table-column
label="结算周期"
prop="desc"
align="center"
></el-table-column>
<el-table-column
label="付款周期"
prop="desc"
align="center"
></el-table-column>
</el-table>
</template>
<script>
export default {
name: 'AccountInfoConfirm',
data() {
return {
tableData: [
{
id: '12987122',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶，奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
status: '在线',
shopId: '10333',
},
{
id: '12987123',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶，奶香浓而不腻',
status: '在线',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333',
},
{
id: '12987125',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶，奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333',
status: '在线',
},
{
id: '12987126',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶，奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333',
status: '在线',
},
],
}
},
}
</script>
<style>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
.el-table th.el-table__cell {
background: #4091ff;
}
<style></style>
.el-table th .cell {
color: #fff !important;
}
</style>
src/views/vab/accountProtection/index.vue
......@@ -3,12 +3,108 @@
<div class="tip">
*修改手机号之后需要重新关注公众号: 罗森供应商VIP，进行绑定激活
</div>
<div class="table_container">
<div class="left_table">
<el-table
:data="leftTable"
:cell-style="rowStyle"
:header-cell-style="headerStyle"
border
style="width: 100%"
>
<el-table-column prop="account" label="账户"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="mobile" label="手机号"></el-table-column>
<el-table-column prop="vx" label="微信绑定"></el-table-column>
<el-table-column prop="status" label="状态"></el-table-column>
<el-table-column prop="eTime" label="到期日"></el-table-column>
<el-table-column label="操作" width="300">
<template slot-scope="scope">
<el-button type="danger" @click="handleClick(scope.row)">
禁用
</el-button>
<el-button type="primary">付费</el-button>
<el-button type="primary">修改</el-button>
<el-button type="primary">编辑权限</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="right_table">
<el-table
:data="rightTable"
border
:header-cell-style="headerStyle"
:cell-style="rowStyle"
>
<el-table-column type="selection"></el-table-column>
<el-table-column prop="account" label="账户"></el-table-column>
<el-table-column prop="ID" label="供应商ID"></el-table-column>
<el-table-column prop="supplier" label="供应商名称"></el-table-column>
</el-table>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'AccountProtection',
data() {
return {
leftTable: [
{
account: '01G0025402',
name: '沈辉青',
mobile: '13701934080',
vx: '是',
status: '正常',
eTime: '',
},
{
account: '01G0025402',
name: '沈辉青',
mobile: '13701934080',
vx: '是',
status: '正常',
eTime: '',
},
{
account: '01G0025402',
name: '沈辉青',
mobile: '13701934080',
vx: '否',
status: '未激活',
eTime: '',
},
],
rightTable: [
{
account: '01G0025402',
ID: '360400',
supplier: '上海星嘉食品销售有限公司',
},
{
account: '01G0025402',
ID: '360400',
supplier: '上海星嘉食品销售有限公司',
},
{
account: '01G0025402',
ID: '360400',
supplier: '上海星嘉食品销售有限公司',
},
],
}
},
methods: {
headerStyle() {
return 'background:#409eff;text-align:center;color:#fff;'
},
rowStyle() {
return 'text-align:center;'
},
},
}
</script>
......@@ -20,4 +116,27 @@
font-size: calc(100vh * 29 / 1920);
color: #e60000;
}
.table_container {
width: 100%;
display: flex;
justify-content: space-between;
.left_table {
width: 60%;
margin-right: 1vw;
}
.right_table {
width: 40%;
}
}
::v-deep .el-table th .cell {
color: #fff;
font-size: calc(100vh * 28 / 1920);
}
::v-deep .el-table td .cell {
font-size: calc(100vh * 24 / 1920);
}
</style>
src/views/vab/billDetailsQuery/index.vue
<template>
<div></div>
<div>
<el-form :model="form">
<el-form-item label="供应商:" style="margin-right: 1vw">
<div class="supplier_container">
<el-input v-model="form.supplier"></el-input>
<i class="el-icon-search"></i>
</div>
</el-form-item>
<el-form-item>
<el-input
v-model="form.supplierName"
disabled
style="width: 20vw"
></el-input>
</el-form-item>
<el-form-item label="验收日期">
<el-date-picker
v-model="form.date"
type="date"
style="width: 14vw"
></el-date-picker>
</el-form-item>
<el-form-item label="物流中心/店铺:">
<el-select
v-model="form.company"
style="width: 15.5vw"
placeholder="请选择物流中心/店铺"
></el-select>
</el-form-item>
<el-form-item label="商品名:">
<el-input v-model="form.company" style="width: 15.3vw"></el-input>
</el-form-item>
<el-form-item label="单据编号:">
<el-input v-model="form.company" style="width: 15.3vw"></el-input>
</el-form-item>
<el-form-item label="事业公司:">
<el-select
v-model="form.company"
style="width: 14vw"
placeholder="请选择事业公司"
></el-select>
</el-form-item>
<el-form-item label="税率:">
<el-input v-model="form.supplierName" style="width: 15.5vw"></el-input>
</el-form-item>
<el-form-item label="结算状态:">
<el-select
v-model="form.company"
style="width: 15.5vw"
placeholder="请选择结算状态"
></el-select>
</el-form-item>
<el-form-item label="结算厂编:">
<el-input v-model="form.supplierName" style="width: 15.5vw"></el-input>
</el-form-item>
<div class="btn_container">
<el-button type="primary">查询</el-button>
<el-button type="primary">下载</el-button>
</div>
</el-form>
<div class="table_container">
<div class="money_container">
<div class="money_item">
<span class="money_title">进货金额(未税) 合计:</span>
<span>0.00</span>
</div>
<div class="money_item">
<span class="money_title">税额合计:</span>
<span>0.00</span>
</div>
<div class="money_item">
<span class="money_title">进货金额 (含税) 合计:</span>
<span>0.00</span>
</div>
</div>
<el-table
:data="table"
border
:header-cell-style="headerStyle"
:cell-style="rowStyle"
>
<el-table-column type="index" label="序号" width="80"></el-table-column>
<el-table-column prop="buyer" label="单据序号"></el-table-column>
<el-table-column prop="user" label="货号"></el-table-column>
<el-table-column prop="content" label="品名"></el-table-column>
<el-table-column prop="status" label="数量"></el-table-column>
<el-table-column prop="money" label="进价"></el-table-column>
<el-table-column
prop="purchaseDate"
label="进货金额(未税)"
></el-table-column>
<el-table-column prop="eTime" label="税额"></el-table-column>
<el-table-column prop="way" label="进货金额(含税)"></el-table-column>
<el-table-column prop="invoicing" label="规格"></el-table-column>
<el-table-column prop="invoicing" label="订购单位"></el-table-column>
</el-table>
<el-pagination
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</div>
</template>
<script>
export default {
name: 'BillDetailsQuery',
data() {
return {
form: {},
table: [],
currentPage: 1,
total: 100,
pageSize: 8,
}
},
methods: {
headerStyle() {
return 'background:#409eff;text-align:center;color:#fff;'
},
rowStyle() {
return 'text-align:center;'
},
handleSizeChange(val) {
this.pageSize = val
},
handleCurrentChange(val) {
this.currentPage = val
},
},
}
</script>
<style></style>
<style lang="scss" scoped>
.el-form::v-deep {
width: 100%;
display: flex;
flex-wrap: wrap;
padding-top: 2vh;
box-sizing: border-box;
.btn_container {
margin-left: 5vw;
line-height: 4vh;
}
.el-form-item {
display: flex;
align-items: center;
height: 4vh;
.el-form-item__label {
font-size: calc(100vh * 28 / 1920);
font-weight: bold;
width: 6.5vw;
}
.el-input__inner {
font-size: calc(100vh * 26 / 1920);
height: 3.5vh;
}
.supplier_container {
display: flex;
align-items: center;
width: 16vw;
height: 3.5vh;
border: 1px solid #dcdfe6;
border-radius: 4px;
.el-input__inner {
border: none;
width: 100%;
}
i {
border-left: 1px solid #dcdfe6;
width: 15%;
height: 100%;
background: #f1f1f1;
text-align: center;
font-size: calc(100vh * 30 / 1920);
line-height: 3.5vh;
}
}
}
}
.table_container {
border-top: 4px solid #f1f1f1;
padding: 0.5vh 0.5vw;
box-sizing: border-box;
.el-pagination {
text-align: left;
margin-top: 1.5vh;
}
.money_container {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
.money_item {
width: 33.3%;
height: 4vh;
line-height: 4vh;
font-size: calc(100vh * 28 / 1920);
.money_title {
font-weight: bold;
margin-right: 0.8vw;
}
}
}
}
::v-deep .el-table th .cell {
color: #fff;
font-size: calc(100vh * 28 / 1920);
}
::v-deep .el-table td .cell {
font-size: calc(100vh * 24 / 1920);
}
</style>
src/views/vab/billQuery/index.vue
<template>
<div></div>
<div>
<el-form :model="form">
<el-form-item label="供应商:" style="margin-right: 1vw">
<div class="supplier_container">
<el-input v-model="form.supplier"></el-input>
<i class="el-icon-search"></i>
</div>
</el-form-item>
<el-form-item>
<el-input
v-model="form.supplierName"
disabled
style="width: 20vw"
></el-input>
</el-form-item>
<el-form-item label="单据类型:">
<el-select
v-model="form.company"
style="width: 14vw"
placeholder="请选择单据类型"
></el-select>
</el-form-item>
<el-form-item label="事业公司:">
<el-select
v-model="form.company"
style="width: 14vw"
placeholder="请选择事业公司"
></el-select>
</el-form-item>
<el-form-item label="日期区间:">
<el-select
v-model="form.dateType"
style="width: 12vw"
placeholder="请选择日期区间"
></el-select>
</el-form-item>
<el-form-item>
<el-date-picker
v-model="form.date"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 25vw"
></el-date-picker>
</el-form-item>
<el-form-item label="物流中心:">
<el-select
v-model="form.company"
style="width: 14vw"
placeholder="请选择物流中心"
></el-select>
</el-form-item>
<el-form-item label="结算状态:">
<el-select
v-model="form.company"
style="width: 14vw"
placeholder="请选择结算状态"
></el-select>
</el-form-item>
<el-form-item label="门店:" style="margin-right: 1vw">
<div class="supplier_container" style="width: 12vw">
<el-input
v-model="form.supplier"
placeholder="请输入门店编号"
></el-input>
<i class="el-icon-search"></i>
</div>
</el-form-item>
<el-form-item>
<el-input
v-model="form.supplierName"
disabled
style="width: 12vw"
></el-input>
</el-form-item>
<el-form-item style="margin-left: 4.2vw">
<el-checkbox v-model="form.checked">店铺直送单据汇总表示</el-checkbox>
</el-form-item>
<el-form-item label="单据编号:">
<el-input v-model="form.supplierName" style="width: 14vw"></el-input>
</el-form-item>
<div class="btn_container">
<el-button type="primary">查询</el-button>
<el-button type="primary">下载</el-button>
</div>
</el-form>
<div class="table_container">
<div class="money_container">
<div class="money_item">
<span class="money_title">进货金额(未税) 合计:</span>
<span>0.00</span>
</div>
<div class="money_item">
<span class="money_title">税额合计:</span>
<span>0.00</span>
</div>
<div class="money_item">
<span class="money_title">进货金额 (含税) 合计:</span>
<span>0.00</span>
</div>
</div>
<el-table
:data="table"
border
:header-cell-style="headerStyle"
:cell-style="rowStyle"
>
<el-table-column type="index" label="序号" width="80"></el-table-column>
<el-table-column prop="buyer" label="供应商"></el-table-column>
<el-table-column prop="user" label="结算厂编"></el-table-column>
<el-table-column prop="content" label="单据类型"></el-table-column>
<el-table-column prop="status" label="单据编号"></el-table-column>
<el-table-column prop="money" label="账表日"></el-table-column>
<el-table-column
prop="purchaseDate"
label="物流中心/店铺"
></el-table-column>
<el-table-column prop="eTime" label="订购日期"></el-table-column>
<el-table-column prop="way" label="预定到货日"></el-table-column>
<el-table-column prop="invoicing" label="验收日期"></el-table-column>
<el-table-column prop="invoicing" label="税率"></el-table-column>
<el-table-column
prop="invoicing"
label="进货金额(未税)"
></el-table-column>
<el-table-column prop="invoicing" label="税额"></el-table-column>
</el-table>
<el-pagination
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</div>
</template>
<script>
export default {
name: 'BillQuery',
data() {
return {
form: {},
table: [],
currentPage: 1,
total: 100,
pageSize: 8,
}
},
methods: {
headerStyle() {
return 'background:#409eff;text-align:center;color:#fff;'
},
rowStyle() {
return 'text-align:center;'
},
handleSizeChange(val) {
this.pageSize = val
},
handleCurrentChange(val) {
this.currentPage = val
},
},
}
</script>
<style></style>
<style lang="scss" scoped>
.el-form::v-deep {
width: 100%;
display: flex;
flex-wrap: wrap;
padding-top: 2vh;
box-sizing: border-box;
.btn_container {
margin-left: 5vw;
line-height: 4vh;
}
.el-form-item {
display: flex;
align-items: center;
height: 4vh;
.el-form-item__label {
font-size: calc(100vh * 28 / 1920);
font-weight: bold;
width: 6vw;
}
.el-input__inner {
font-size: calc(100vh * 26 / 1920);
height: 3.5vh;
}
.supplier_container {
display: flex;
align-items: center;
width: 16vw;
height: 3.5vh;
border: 1px solid #dcdfe6;
border-radius: 4px;
.el-input__inner {
border: none;
width: 100%;
}
i {
border-left: 1px solid #dcdfe6;
width: 15%;
height: 100%;
background: #f1f1f1;
text-align: center;
font-size: calc(100vh * 30 / 1920);
line-height: 3.5vh;
}
}
}
}
.table_container {
border-top: 4px solid #f1f1f1;
padding: 0.5vh 0.5vw;
box-sizing: border-box;
.el-pagination {
text-align: left;
margin-top: 1.5vh;
}
.money_container {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
.money_item {
width: 33.3%;
height: 4vh;
line-height: 4vh;
font-size: calc(100vh * 28 / 1920);
.money_title {
font-weight: bold;
margin-right: 0.8vw;
}
}
}
}
::v-deep .el-table th .cell {
color: #fff;
font-size: calc(100vh * 28 / 1920);
}
::v-deep .el-table td .cell {
font-size: calc(100vh * 24 / 1920);
}
</style>
src/views/vab/directOrder/index.vue
<template>
<div></div>
<div class="container">
<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="事业公司:">
<el-select
v-model="form.company"
style="width: 25vw"
placeholder="请选择事业公司"
>
<!-- <el-option></el-option> -->
</el-select>
</el-form-item>
<el-form-item label="供应商:">
<div class="supplier_container">
<div class="left_supplier">
<el-input v-model="form.supplier"></el-input>
<i class="el-icon-edit"></i>
</div>
<div class="right_supplier">
<i class="el-icon-search"></i>
</div>
</div>
</el-form-item>
<el-form-item label="订货日:" prop="date">
<el-date-picker
v-model="form.date"
type="date"
placeholder="选择日期"
style="width: 12vw"
></el-date-picker>
</el-form-item>
</el-form>
<div class="btn_container">
<el-button type="success">汇总下载</el-button>
<el-button type="primary">明细下载</el-button>
<el-button type="info">明细Excel下载</el-button>
<el-button type="info">打印订单批量下载</el-button>
</div>
<div class="tip_content">2022年12月16日订单已经可以正常下载</div>
</div>
</template>
<script>
export default {
name: 'DirectOrder',
data() {
return {
form: {
company: '',
supplier: '',
date: '',
},
rules: {
date: [
{
required: true,
message: '订货日不能为空',
trigger: 'blur',
},
],
},
}
},
}
</script>
<style></style>
<style lang="scss" scoped>
.container::v-deep {
padding: 1.5vh 1vw;
box-sizing: border-box;
.el-form-item {
display: flex;
align-items: center;
height: 3.5vh;
.el-form-item__label {
font-size: calc(100vh * 28 / 1920);
font-weight: bold;
width: 5vw;
}
.el-input__inner {
font-size: calc(100vh * 26 / 1920);
height: 3.5vh;
}
.supplier_container {
display: flex;
align-items: center;
width: 25vw;
height: 3.5vh;
border: 1px solid #dcdfe6;
border-radius: 4px;
.left_supplier {
width: 89%;
display: flex;
align-items: center;
justify-content: space-between;
.el-input__inner {
border: none;
}
i {
font-size: calc(100vh * 32 / 1920);
margin-right: 0.8vw;
}
}
.right_supplier {
width: 11%;
height: 100%;
background: #f1f1f1;
border-left: 1px solid #dcdfe6;
display: flex;
justify-content: center;
align-items: center;
i {
font-size: calc(100vh * 32 / 1920);
}
}
}
}
.btn_container {
display: flex;
width: 50%;
padding: 1vh 0;
box-sizing: border-box;
}
.tip_content {
font-size: calc(100vh * 45 / 1920);
}
}
</style>
src/views/vab/getOrder/index.vue
<template>
<div></div>
<div class="container">
<el-form :model="form">
<el-form-item label="事业公司:">
<el-select
v-model="form.company"
placeholder="请选择事业公司"
style="width: 25vw"
>
<!-- <el-option></el-option> -->
</el-select>
</el-form-item>
<el-form-item label="供应商:">
<div class="supplier_container">
<div class="left_supplier">
<el-input v-model="form.supplier"></el-input>
<i class="el-icon-edit"></i>
</div>
<div class="right_supplier">
<i class="el-icon-search"></i>
</div>
</div>
</el-form-item>
<el-form-item label="主单号:">
<el-input v-model="form.main" style="width: 25vw"></el-input>
</el-form-item>
<el-form-item label="收货单位:">
<el-select
v-model="form.receive"
placeholder="请选择收货单位"
style="width: 25vw"
></el-select>
</el-form-item>
<el-form-item label="单类:">
<el-select
v-model="form.type"
placeholder="请选择单类"
style="width: 25vw"
></el-select>
</el-form-item>
<el-form-item label="主单状态:">
<el-select
v-model="form.status"
placeholder="请选择状态"
style="width: 25vw"
></el-select>
</el-form-item>
<el-form-item label="订货日:">
<el-date-picker
v-model="form.orderDate"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 25vw"
></el-date-picker>
</el-form-item>
<el-form-item label="交货预定日:">
<el-date-picker
v-model="form.deliveryDate"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 25vw"
></el-date-picker>
</el-form-item>
</el-form>
<div class="tip_content">
<span class="left_tip">2022年12月16日订单已经可以正常下载</span>
<span class="right_tip">
*如需下载EXCEL，请点击[单号] 进入主单查询，再点击[报表]
</span>
</div>
<div class="btn_container">
<el-pagination
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="pageSize"
layout="sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
<el-button type="primary">查询</el-button>
</div>
<el-table
:data="table"
border
:header-cell-style="headerStyle"
:cell-style="rowStyle"
>
<el-table-column type="index" label="序号" width="80"></el-table-column>
<el-table-column prop="orderDate" label="订货日"></el-table-column>
<el-table-column prop="deliveryDate" label="交货预定日"></el-table-column>
<el-table-column prop="mainStatus" label="主单状态"></el-table-column>
<el-table-column prop="branchStatus" label="分单状态"></el-table-column>
<el-table-column prop="type" label="单类"></el-table-column>
<el-table-column prop="number" label="单号"></el-table-column>
<el-table-column prop="factoryNo" label="结算厂编"></el-table-column>
<el-table-column prop="supplier" label="供应商"></el-table-column>
<el-table-column prop="receive" label="收货单位"></el-table-column>
<el-table-column prop="storeName" label="仓库名称"></el-table-column>
<el-table-column prop="address" label="仓库地址"></el-table-column>
<el-table-column prop="money" label="进价金额"></el-table-column>
<el-table-column prop="branchOrder" label="分单"></el-table-column>
<el-table-column label="操作"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'GetOrder',
data() {
return {
form: {
company: '',
supplier: '',
main: '',
receive: '',
type: '',
status: '',
orderDate: '',
deliveryDate: '',
},
table: [],
currentPage: 1,
pageSize: 8,
total: 100,
}
},
methods: {
handleSizeChange(val) {
this.pageSize = val
},
handleCurrentChange(val) {
this.currentPage = val
},
headerStyle() {
return 'text-align:center;'
},
rowStyle() {
return 'text-align:center;'
},
},
}
</script>
<style></style>
<style lang="scss" scoped>
.container::v-deep {
padding: 1.5vh 1vw;
box-sizing: border-box;
.el-form {
width: 89%;
display: flex;
flex-wrap: wrap;
.el-form-item {
width: 50%;
display: flex;
align-items: center;
height: 4vh;
.el-form-item__label {
font-size: calc(100vh * 28 / 1920);
font-weight: bold;
width: 5.5vw;
}
.el-input__inner {
font-size: calc(100vh * 26 / 1920);
height: 3.5vh;
}
.supplier_container {
display: flex;
align-items: center;
width: 25vw;
height: 3.5vh;
border: 1px solid #dcdfe6;
border-radius: 4px;
.left_supplier {
width: 89%;
display: flex;
align-items: center;
justify-content: space-between;
.el-input__inner {
border: none;
}
i {
font-size: calc(100vh * 32 / 1920);
margin-right: 0.8vw;
}
}
.right_supplier {
border-left: 1px solid #dcdfe6;
width: 11%;
height: 100%;
background: #f1f1f1;
display: flex;
justify-content: center;
align-items: center;
i {
font-size: calc(100vh * 32 / 1920);
}
}
}
}
}
.tip_content {
width: 81%;
display: flex;
justify-content: space-between;
.left_tip {
font-size: calc(100vh * 45 / 1920);
}
.right_tip {
font-size: calc(100vh * 30 / 1920);
color: #e60000;
}
}
.btn_container {
display: flex;
align-items: center;
.el-pagination {
text-align: left;
margin-bottom: 1.5vh;
width: 75%;
}
.el-button {
width: 4vw;
height: 3vh;
line-height: 3vh;
padding: 0;
}
}
}
::v-deep .el-table th .cell {
font-size: calc(100vh * 28 / 1920);
}
::v-deep .el-table td .cell {
font-size: calc(100vh * 24 / 1920);
}
</style>
src/views/vab/orderDownload/index.vue
<template>
<div></div>
<div class="container">
<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="事业公司:">
<el-select
v-model="form.company"
style="width: 25vw"
placeholder="请选择事业公司"
></el-select>
</el-form-item>
<el-form-item label="供应商:">
<div class="supplier_container">
<div class="left_supplier">
<el-input v-model="form.supplier"></el-input>
<i class="el-icon-edit"></i>
</div>
<div class="right_supplier">
<i class="el-icon-search"></i>
</div>
</div>
</el-form-item>
</el-form>
<div class="btn_container">
<el-button type="info">主单批量下载</el-button>
<span>用户名所管辖的供应商，未下载的主单单据</span>
</div>
<div class="tip_content">2022年12月16日订单已经可以正常下载</div>
</div>
</template>
<script>
export default {
name: 'OrderDownload',
data() {
return {
form: {
company: '',
supplier: '',
},
}
},
}
</script>
<style></style>
<style lang="scss" scoped>
.container::v-deep {
padding: 1.5vh 1vw;
box-sizing: border-box;
.btn_container {
margin: 3vh 0;
display: flex;
align-items: center;
.el-button {
margin-right: 0.5vw;
}
span {
font-size: calc(100vh * 27 / 1920);
}
}
.el-form-item {
display: flex;
align-items: center;
height: 3.5vh;
.el-form-item__label {
font-size: calc(100vh * 28 / 1920);
font-weight: bold;
width: 5vw;
}
.el-input__inner {
font-size: calc(100vh * 26 / 1920);
height: 3.5vh;
}
.supplier_container {
display: flex;
align-items: center;
width: 25vw;
height: 3.5vh;
border: 1px solid #dcdfe6;
border-radius: 4px;
.left_supplier {
width: 89%;
display: flex;
align-items: center;
justify-content: space-between;
.el-input__inner {
border: none;
}
i {
font-size: calc(100vh * 32 / 1920);
margin-right: 0.8vw;
}
}
.right_supplier {
width: 11%;
height: 100%;
background: #f1f1f1;
border-left: 1px solid #dcdfe6;
display: flex;
justify-content: center;
align-items: center;
i {
font-size: calc(100vh * 32 / 1920);
}
}
}
}
.tip_content {
font-size: calc(100vh * 45 / 1920);
}
}
</style>
src/views/vab/orderProgress/index.vue
<template>
<div></div>
<div>
<el-form :model="form">
<el-form-item label="供应商:" style="margin-right: 0.6vw">
<div class="supplier_container">
<el-input v-model="form.supplier"></el-input>
<i class="el-icon-search"></i>
</div>
</el-form-item>
<el-form-item>
<el-input
v-model="form.supplierName"
disabled
style="width: 20vw"
></el-input>
</el-form-item>
<el-form-item label="事业公司:">
<el-select
v-model="form.company"
style="width: 12vw"
placeholder="请选择事业公司"
></el-select>
</el-form-item>
<el-form-item label="物流中心:">
<el-select
v-model="form.logistics"
style="width: 16vw"
placeholder="请选择物流中心"
></el-select>
</el-form-item>
<el-form-item label="日期区间:">
<el-select
v-model="form.dateType"
style="width: 12vw"
placeholder="请选择日期区间"
></el-select>
</el-form-item>
<el-form-item>
<el-date-picker
v-model="form.date"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 25vw"
></el-date-picker>
</el-form-item>
<el-form-item label="城市:">
<el-select
v-model="form.city"
style="width: 12vw"
placeholder="请选择城市"
></el-select>
</el-form-item>
<el-form-item label="门店:">
<div class="supplier_container">
<el-input v-model="form.store"></el-input>
<i class="el-icon-search"></i>
</div>
</el-form-item>
<el-form-item label="罗森订单号:">
<el-input v-model="form.lawSonOrder" style="width: 12vw"></el-input>
</el-form-item>
<el-form-item label="供应商单号:">
<el-input v-model="form.supplierOrder" style="width: 12vw"></el-input>
</el-form-item>
<el-form-item label="状态:">
<el-select
v-model="form.city"
style="width: 12vw"
placeholder="请选择状态"
></el-select>
</el-form-item>
<span class="tip">只提供查询近2个月 (上月和本月)的订单明细</span>
<div class="btn_container">
<el-button type="primary">查询</el-button>
<el-button type="primary">下载</el-button>
</div>
</el-form>
<div class="table_container">
<el-table
:data="table"
border
:header-cell-style="headerStyle"
:cell-style="rowStyle"
>
<el-table-column type="index" label="序号" width="80"></el-table-column>
<el-table-column prop="payment" label="供应商编号"></el-table-column>
<el-table-column prop="buyer" label="供应商"></el-table-column>
<el-table-column prop="user" label="送货地址"></el-table-column>
<el-table-column prop="content" label="进/退"></el-table-column>
<el-table-column prop="status" label="单据编号"></el-table-column>
<el-table-column prop="money" label="预定送货日"></el-table-column>
<el-table-column prop="purchaseDate" label="验收日"></el-table-column>
<el-table-column prop="eTime" label="应送品相数"></el-table-column>
<el-table-column prop="way" label="实收品相数"></el-table-column>
<el-table-column
prop="invoicing"
label="应送商品数量"
></el-table-column>
<el-table-column
prop="invoicing"
label="实收商品数量"
></el-table-column>
<el-table-column prop="invoicing" label="入账日"></el-table-column>
</el-table>
<el-pagination
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</div>
</template>
<script>
export default {
name: 'OrderProgress',
data() {
return {
form: {
supplier: '',
supplierName: '',
company: '',
logistics: '',
date: '',
dateType: '',
city: '',
store: '',
lawSonOrder: '',
supplierOrder: '',
status: '',
},
table: [],
currentPage: 1,
total: 100,
pageSize: 8,
}
},
methods: {
headerStyle() {
return 'background:#409eff;text-align:center;color:#fff;'
},
rowStyle() {
return 'text-align:center;'
},
handleSizeChange(val) {
this.pageSize = val
},
handleCurrentChange(val) {
this.currentPage = val
},
},
}
</script>
<style></style>
<style lang="scss" scoped>
.el-form::v-deep {
width: 100%;
display: flex;
flex-wrap: wrap;
padding-top: 2vh;
box-sizing: border-box;
.tip {
color: red;
line-height: 4vh;
font-size: calc(100vh * 28 / 1920);
margin-left: 3vw;
font-weight: bold;
}
.btn_container {
margin-left: 5vw;
line-height: 4vh;
}
.el-form-item {
display: flex;
align-items: center;
height: 4vh;
.el-form-item__label {
font-size: calc(100vh * 28 / 1920);
font-weight: bold;
width: 6vw;
}
.el-input__inner {
font-size: calc(100vh * 26 / 1920);
height: 3.5vh;
}
.supplier_container {
display: flex;
align-items: center;
width: 16vw;
height: 3.5vh;
border: 1px solid #dcdfe6;
border-radius: 4px;
.el-input__inner {
border: none;
width: 100%;
}
i {
border-left: 1px solid #dcdfe6;
width: 15%;
height: 100%;
background: #f1f1f1;
text-align: center;
font-size: calc(100vh * 30 / 1920);
line-height: 3.5vh;
}
}
}
}
.table_container {
border-top: 4px solid #f1f1f1;
padding: 0.5vh 0.5vw;
box-sizing: border-box;
.el-pagination {
text-align: left;
margin-top: 1.5vh;
}
}
::v-deep .el-table th .cell {
color: #fff;
font-size: calc(100vh * 28 / 1920);
}
::v-deep .el-table td .cell {
font-size: calc(100vh * 24 / 1920);
}
</style>
src/views/vab/payRecord/index.vue
<template>
<div></div>
<div>
<div class="title">支付记录</div>
<div>
<el-table
:data="table"
border
:header-cell-style="headerStyle"
:cell-style="rowStyle"
>
<el-table-column prop="order" label="订单号"></el-table-column>
<el-table-column prop="payment" label="支付交易号"></el-table-column>
<el-table-column prop="buyer" label="购买人"></el-table-column>
<el-table-column prop="user" label="使用人"></el-table-column>
<el-table-column prop="content" label="购买内容"></el-table-column>
<el-table-column prop="status" label="支付状态"></el-table-column>
<el-table-column prop="money" label="支付金额"></el-table-column>
<el-table-column prop="purchaseDate" label="购买日期"></el-table-column>
<el-table-column prop="eTime" label="到期日期"></el-table-column>
<el-table-column prop="way" label="支付方式"></el-table-column>
<el-table-column prop="invoicing" label="是否开票"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: 'PayRecord',
data() {
return {
table: [],
}
},
methods: {
headerStyle() {
return 'background:#409eff;text-align:center;color:#fff;'
},
rowStyle() {
return 'text-align:center;'
},
},
}
</script>
<style></style>
<style lang="scss" scoped>
.title {
font-size: calc(100vh * 45 / 1920);
font-weight: bold;
text-align: center;
line-height: 7vh;
}
::v-deep .el-table th .cell {
color: #fff;
font-size: calc(100vh * 28 / 1920);
}
::v-deep .el-table td .cell {
font-size: calc(100vh * 24 / 1920);
}
</style>
src/views/vab/profitDetailsQuery/index.vue
<template>
<div></div>
<div>
<el-form :model="form">
<el-form-item label="供应商:" style="margin-right: 0.6vw">
<div class="supplier_container">
<el-input v-model="form.supplier"></el-input>
<i class="el-icon-search"></i>
</div>
</el-form-item>
<el-form-item>
<el-input
v-model="form.supplierName"
disabled
style="width: 20vw"
></el-input>
</el-form-item>
<el-form-item label="事业公司:">
<el-select
v-model="form.company"
style="width: 12vw"
placeholder="请选择事业公司"
></el-select>
</el-form-item>
<el-form-item label="返利类型:">
<el-select
v-model="form.type"
style="width: 12vw"
placeholder="请选择返利类型"
></el-select>
</el-form-item>
<el-form-item label="账表月:">
<el-date-picker
v-model="form.date"
type="monthrange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 25vw"
></el-date-picker>
</el-form-item>
<el-form-item label="采购组:">
<el-select
v-model="form.purchaseGroup"
style="width: 24vw"
placeholder="请选择采购组"
></el-select>
</el-form-item>
<el-form-item label="票扣/账扣:">
<el-select
v-model="form.bill"
style="width: 12vw"
placeholder="请选择票扣/账扣"
></el-select>
</el-form-item>
<el-form-item label="返利项目:">
<el-select
v-model="form.project"
style="width: 16vw"
placeholder="请选择返利项目"
></el-select>
</el-form-item>
<el-form-item label="支付方式:">
<el-select
v-model="form.payWay"
style="width: 14vw"
placeholder="请选择支付方式"
></el-select>
</el-form-item>
<el-form-item label="应付状态:">
<el-select
v-model="form.status"
style="width: 12vw"
placeholder="请选择应付状态"
></el-select>
</el-form-item>
<div class="btn_container">
<el-button type="primary">查询</el-button>
<el-button type="primary">下载</el-button>
</div>
</el-form>
<div class="table_container">
<div class="money_container">
<div class="money_item">
<span class="money_title">票扣金额 (末税)合计:</span>
<span>0.00</span>
</div>
<div class="money_item">
<span class="money_title">税额合计:</span>
<span>0.00</span>
</div>
<div class="money_item">
<span class="money_title">票扣金额 (含税) 合计:</span>
<span>0.00</span>
</div>
<div class="money_item">
<span class="money_title">账扣金额(未税)合计:</span>
<span>0.00</span>
</div>
<div class="money_item">
<span class="money_title">税额合计:</span>
<span>0.00</span>
</div>
<div class="money_item">
<span class="money_title">账扣金额 (含税) 合计:</span>
<span>0.00</span>
</div>
</div>
<el-table
:data="table"
border
:header-cell-style="headerStyle"
:cell-style="rowStyle"
>
<el-table-column type="index" label="序号" width="80"></el-table-column>
<el-table-column prop="payment" label="供应商编号"></el-table-column>
<el-table-column prop="buyer" label="供应商"></el-table-column>
<el-table-column prop="user" label="结算厂编"></el-table-column>
<el-table-column prop="content" label="返利类型"></el-table-column>
<el-table-column prop="status" label="票扣/账扣"></el-table-column>
<el-table-column prop="money" label="返利项目"></el-table-column>
<el-table-column prop="purchaseDate" label="账表月"></el-table-column>
<el-table-column prop="eTime" label="返利金额(未税)"></el-table-column>
<el-table-column prop="way" label="税率"></el-table-column>
<el-table-column prop="invoicing" label="支付方式"></el-table-column>
<el-table-column prop="invoicing" label="追湖月"></el-table-column>
<el-table-column prop="invoicing" label="备注"></el-table-column>
<el-table-column prop="invoicing" label="确认状态"></el-table-column>
<el-table-column prop="invoicing" label="应付状态"></el-table-column>
</el-table>
<el-pagination
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</div>
</template>
<script>
export default {
name: 'ProfitDetailsQuery',
data() {
return {
form: {},
table: [],
currentPage: 1,
total: 100,
pageSize: 8,
}
},
methods: {
headerStyle() {
return 'background:#409eff;text-align:center;color:#fff;'
},
rowStyle() {
return 'text-align:center;'
},
handleSizeChange(val) {
this.pageSize = val
},
handleCurrentChange(val) {
this.currentPage = val
},
},
}
</script>
<style></style>
<style lang="scss" scoped>
.el-form::v-deep {
width: 100%;
display: flex;
flex-wrap: wrap;
padding-top: 2vh;
box-sizing: border-box;
.btn_container {
margin-left: 5vw;
line-height: 4vh;
}
.el-form-item {
display: flex;
align-items: center;
height: 4vh;
.el-form-item__label {
font-size: calc(100vh * 28 / 1920);
font-weight: bold;
width: 6vw;
}
.el-input__inner {
font-size: calc(100vh * 26 / 1920);
height: 3.5vh;
}
.supplier_container {
display: flex;
align-items: center;
width: 16vw;
height: 3.5vh;
border: 1px solid #dcdfe6;
border-radius: 4px;
.el-input__inner {
border: none;
width: 100%;
}
i {
border-left: 1px solid #dcdfe6;
width: 15%;
height: 100%;
background: #f1f1f1;
text-align: center;
font-size: calc(100vh * 30 / 1920);
line-height: 3.5vh;
}
}
}
}
.table_container {
border-top: 4px solid #f1f1f1;
padding: 0.5vh 0.5vw;
box-sizing: border-box;
.el-pagination {
text-align: left;
margin-top: 1.5vh;
}
.money_container {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
.money_item {
width: 33.3%;
height: 4vh;
line-height: 4vh;
font-size: calc(100vh * 28 / 1920);
.money_title {
font-weight: bold;
margin-right: 0.8vw;
}
}
}
}
::v-deep .el-table th .cell {
color: #fff;
font-size: calc(100vh * 28 / 1920);
}
::v-deep .el-table td .cell {
font-size: calc(100vh * 24 / 1920);
}
</style>
src/views/vab/profitQuery/index.vue
<template>
<div></div>
<div>
<el-form :model="form">
<el-form-item label="供应商:" style="margin-right: 0.6vw">
<div class="supplier_container">
<el-input v-model="form.supplier"></el-input>
<i class="el-icon-search"></i>
</div>
</el-form-item>
<el-form-item>
<el-input
v-model="form.supplierName"
disabled
style="width: 25vw"
></el-input>
</el-form-item>
<el-form-item label="事业公司:">
<el-select
v-model="form.company"
style="width: 22vw"
placeholder="请选择事业公司"
></el-select>
</el-form-item>
<el-form-item label="账表月:">
<el-date-picker
v-model="form.date"
type="monthrange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 25vw"
></el-date-picker>
</el-form-item>
<div class="btn_container">
<el-button type="primary">查询</el-button>
<el-button type="primary">下载</el-button>
</div>
</el-form>
<div class="table_container">
<el-table
:data="table"
border
:header-cell-style="headerStyle"
:cell-style="rowStyle"
>
<el-table-column type="index" label="序号" width="80"></el-table-column>
<el-table-column prop="payment" label="供应商编号"></el-table-column>
<el-table-column prop="buyer" label="供应商"></el-table-column>
<el-table-column prop="user" label="账表月"></el-table-column>
<el-table-column
prop="content"
label="票扣金额(未税)"
></el-table-column>
<el-table-column prop="status" label="票扣税额"></el-table-column>
<el-table-column prop="money" label="票扣金额(含税)"></el-table-column>
<el-table-column
prop="purchaseDate"
label="账扣金额(未税)"
></el-table-column>
<el-table-column prop="eTime" label="账扣税额"></el-table-column>
<el-table-column prop="way" label="账扣金额(含税)"></el-table-column>
<el-table-column prop="invoicing" label="合计(未税)"></el-table-column>
<el-table-column prop="invoicing" label="合计税额"></el-table-column>
<el-table-column prop="invoicing" label="合计(含税)"></el-table-column>
<el-table-column
prop="invoicing"
label="应收款金额(含税)"
></el-table-column>
</el-table>
<el-pagination
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</div>
</template>
<script>
export default {
name: 'ProfitQuery',
data() {
return {
form: {
supplier: '',
supplierName: '',
company: '',
date: '',
},
table: [],
currentPage: 1,
total: 100,
pageSize: 8,
}
},
methods: {
headerStyle() {
return 'background:#409eff;text-align:center;color:#fff;'
},
rowStyle() {
return 'text-align:center;'
},
handleSizeChange(val) {
this.pageSize = val
},
handleCurrentChange(val) {
this.currentPage = val
},
},
}
</script>
<style></style>
<style lang="scss" scoped>
.el-form::v-deep {
width: 100%;
display: flex;
flex-wrap: wrap;
padding-top: 2vh;
box-sizing: border-box;
.btn_container {
margin-left: 5vw;
line-height: 4vh;
}
.el-form-item {
display: flex;
align-items: center;
height: 4vh;
.el-form-item__label {
font-size: calc(100vh * 28 / 1920);
font-weight: bold;
width: 6vw;
}
.el-input__inner {
font-size: calc(100vh * 26 / 1920);
height: 3.5vh;
}
.supplier_container {
display: flex;
align-items: center;
width: 22vw;
height: 3.5vh;
border: 1px solid #dcdfe6;
border-radius: 4px;
.el-input__inner {
border: none;
width: 100%;
}
i {
border-left: 1px solid #dcdfe6;
width: 15%;
height: 100%;
background: #f1f1f1;
text-align: center;
font-size: calc(100vh * 30 / 1920);
line-height: 3.5vh;
}
}
}
}
.table_container {
border-top: 4px solid #f1f1f1;
padding: 0.5vh 0.5vw;
box-sizing: border-box;
.el-pagination {
text-align: left;
margin-top: 1.5vh;
}
}
::v-deep .el-table th .cell {
color: #fff;
font-size: calc(100vh * 28 / 1920);
}
::v-deep .el-table td .cell {
font-size: calc(100vh * 24 / 1920);
}
</style>
src/views/vab/supplierInvoicing/index.vue
<template>
<div></div>
<div>
<div class="top_container">
<div class="left_btn">
<el-button type="primary">①查询</el-button>
<el-button type="success" plain>④保存</el-button>
<el-button type="primary">对账明细下载</el-button>
<el-button type="primary" plain>发票录入</el-button>
<el-button type="danger" plain>取消</el-button>
</div>
<div class="right_text">
<div class="right_content_one">
*已勾单对账到【供应商发查询】界面按结算单录入发票
<br />
负数税率优先且必须勾单对账
</div>
<div class="right_content_two">
操作步骤：①查询→②勾单对账→③勾单→④保存→⑤勾单下载。
<br />
开票规则：1、发票未税金额必须与系统一致：即货单的未税合计、票扣的未税合计，分别要和系统数据一致（即差额=0）；2、发票含税合计必须符合允许差额±X元内
</div>
</div>
</div>
<el-form :model="form">
<el-form-item label="供应商:">
<el-select
v-model="form"
style="width: 14vw"
placeholder="请选择供应商"
></el-select>
</el-form-item>
<el-form-item label="账期:">
<el-date-picker
v-model="form.date"
type="date"
style="width: 14vw"
></el-date-picker>
</el-form-item>
<el-form-item label="开放对账期间:">
<el-date-picker
v-model="form.date"
type="date"
style="width: 14vw"
></el-date-picker>
</el-form-item>
<el-form-item label="当前账表月:">
<el-date-picker
v-model="form.date"
type="date"
style="width: 14vw"
></el-date-picker>
</el-form-item>
<el-form-item label="结算单号:">
<el-input style="width: 14vw"></el-input>
</el-form-item>
<el-form-item label="当前支付预定日:">
<el-date-picker
v-model="form.date"
type="date"
style="width: 14vw"
></el-date-picker>
</el-form-item>
<el-form-item label="对账申请日:">
<el-date-picker
v-model="form.date"
type="date"
style="width: 14vw"
></el-date-picker>
</el-form-item>
<el-form-item label="结算状态:">
<el-select
v-model="form"
style="width: 14vw"
placeholder="请选择结算状态"
></el-select>
</el-form-item>
</el-form>
<div class="middle_container">
<div class="left_middle">
<div class="left_item">
<span class="left_title">总货款(含税):</span>
<span>0.00</span>
</div>
<div class="left_item">
<span class="left_title">数据:</span>
<span>0条</span>
</div>
<div class="left_item">
<span class="left_title">总票扣(含税):</span>
<span>0.00</span>
</div>
<div class="left_item">
<span class="left_title">数据:</span>
<span>0条</span>
</div>
<div class="left_item">
<span class="left_title">货单税率:</span>
<el-select v-model="form"></el-select>
</div>
<div class="left_item">
<span class="left_title">已选货款(含税):</span>
<span>0.00</span>
</div>
<div class="left_item">
<span class="left_title">数据:</span>
<span>0条</span>
</div>
<div class="left_item">
<span class="left_title">已选票扣(含税):</span>
<span>0.00</span>
</div>
<div class="left_item">
<span class="left_title">数据:</span>
<span>0条</span>
</div>
<div class="left_item">
<span class="left_title">合计金额:</span>
<span>0.00</span>
</div>
</div>
<div class="right_middle">
<div class="btn_container">
<el-button type="success" plain>②勾单对账</el-button>
<el-button type="success" plain>⑤勾单下载</el-button>
</div>
<span>*已勾单对账的明细请点击勾单下载</span>
</div>
</div>
<div class="table_container">
<el-table
:data="table"
border
:header-cell-style="headerStyle"
:cell-style="rowStyle"
>
<el-table-column type="selection"></el-table-column>
<el-table-column type="index" label="序号" width="80"></el-table-column>
<el-table-column prop="buyer" label="分类"></el-table-column>
<el-table-column prop="user" label="类型" sortable></el-table-column>
<el-table-column prop="content" label="单号" sortable></el-table-column>
<el-table-column prop="status" label="主档/结厂编"></el-table-column>
<el-table-column prop="money" label="税率" sortable></el-table-column>
<el-table-column
prop="purchaseDate"
label="验收日"
sortable
></el-table-column>
<el-table-column prop="eTime" label="账表日" sortable></el-table-column>
<el-table-column prop="way" label="金额(未税)"></el-table-column>
<el-table-column prop="invoicing" label="税额"></el-table-column>
<el-table-column prop="invoicing" label="金额(含税)"></el-table-column>
</el-table>
<el-pagination
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</div>
</template>
<script>
export default {
name: 'SupplierInvoicing',
data() {
return {
form: {},
table: [],
currentPage: 1,
total: 100,
pageSize: 8,
}
},
methods: {
headerStyle() {
return 'background:#409eff;text-align:center;color:#fff;'
},
rowStyle() {
return 'text-align:center;'
},
handleSizeChange(val) {
this.pageSize = val
},
handleCurrentChange(val) {
this.currentPage = val
},
},
}
</script>
<style></style>
<style lang="scss" scoped>
.top_container {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.8vh 0.5vw;
box-sizing: border-box;
.left_btn {
display: flex;
}
.right_text {
display: flex;
// align-items: center;
flex-wrap: wrap;
line-height: 1.8vh;
color: red;
font-size: calc(100vh * 27 / 1920);
font-weight: bold;
.right_content_one {
width: 14vw;
margin-right: 1vw;
}
.right_content_two {
width: 27vw;
}
}
}
.el-form::v-deep {
width: 100%;
display: flex;
flex-wrap: wrap;
border-top: 3px solid #f1f1f1;
border-bottom: 3px solid #f1f1f1;
&::after {
flex: 22%;
content: '';
}
.el-form-item {
flex: 22%;
display: flex;
align-items: center;
.el-form-item__label {
font-size: calc(100vh * 28 / 1920);
font-weight: bold;
width: 7vw;
}
.el-input__inner {
font-size: calc(100vh * 26 / 1920);
height: 3.5vh;
}
&:nth-child(1),
&:nth-child(2),
&:nth-child(3) {
margin-top: 10px;
}
}
}
.middle_container {
width: 100%;
display: flex;
align-items: center;
.left_middle {
width: 84%;
display: flex;
flex-wrap: wrap;
align-items: center;
.left_item {
width: 20%;
display: flex;
align-items: center;
margin-top: 0.8vh;
font-size: calc(100vh * 27 / 1920);
.left_title {
width: 5vw;
margin-right: 0.5vw;
text-align: right;
font-weight: bold;
}
}
}
.right_middle {
padding-left: 1.5vw;
box-sizing: border-box;
.btn_container {
margin-bottom: 0.5vh;
display: flex;
}
span {
color: red;
font-size: calc(100vh * 27 / 1920);
}
}
}
.table_container {
padding: 0.5vh 0.5vw;
box-sizing: border-box;
.el-pagination {
text-align: left;
margin-top: 1.5vh;
}
}
::v-deep .el-table th .cell {
color: #fff;
font-size: calc(100vh * 28 / 1920);
}
::v-deep .el-table td .cell {
font-size: calc(100vh * 24 / 1920);
}
</style>
src/views/vab/supplierInvoicingQuery/index.vue
<template>
<div></div>
<div>
<el-button type="primary">下载</el-button>
<el-form :model="form">
<el-form-item label="供应商:">
<div class="supplier_container">
<el-input v-model="form.supplier"></el-input>
<i class="el-icon-search"></i>
</div>
</el-form-item>
<el-form-item>
<el-input
v-model="form.supplierName"
disabled
style="width: 22.2vw"
></el-input>
</el-form-item>
<el-form-item label="税率:">
<el-select v-model="form" placeholder="请选择税率"></el-select>
</el-form-item>
<el-form-item label="状态:">
<el-select v-model="form" placeholder="请选择状态"></el-select>
</el-form-item>
<el-form-item label="支付预定日:">
<el-date-picker
v-model="form.orderDate"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 24vw"
></el-date-picker>
</el-form-item>
<el-form-item label="账表月(结算单):">
<el-date-picker
v-model="form.orderDate"
type="monthrange"
range-separator="-"
start-placeholder="开始月"
end-placeholder="结束月"
style="width: 24vw"
></el-date-picker>
</el-form-item>
<el-form-item label="结算单号:">
<el-input
v-model="form.supplierName"
style="width: 17vw"
placeholder="请输入结算单号"
></el-input>
</el-form-item>
<el-button type="primary">查询</el-button>
</el-form>
<div class="table_container">
<div class="money_container">
<div class="money_item">
<span class="money_title">发票金额(未税)合计:</span>
<span>0.00</span>
</div>
<div class="money_item">
<span class="money_title">税额合计:</span>
<span>0.00</span>
</div>
<div class="money_item">
<span class="money_title">发票金额(含税)合计:</span>
<span>0.00</span>
</div>
</div>
<el-table
:data="table"
border
:header-cell-style="headerStyle"
:cell-style="rowStyle"
>
<el-table-column type="index" label="序号" width="80"></el-table-column>
<el-table-column prop="buyer" label="结算厂编"></el-table-column>
<el-table-column prop="user" label="主档厂编"></el-table-column>
<el-table-column prop="content" label="供应商名称"></el-table-column>
<el-table-column prop="status" label="结算单号"></el-table-column>
<el-table-column prop="money" label="状态"></el-table-column>
<el-table-column
prop="purchaseDate"
label="对账申请日"
></el-table-column>
<el-table-column prop="eTime" label="预定支付日"></el-table-column>
<el-table-column prop="way" label="税率"></el-table-column>
<el-table-column
prop="invoicing"
label="货款金额(含税)"
></el-table-column>
<el-table-column
prop="invoicing"
label="票扣金额(含税)"
></el-table-column>
<el-table-column
prop="invoicing"
label="发票金额(含税)"
></el-table-column>
<el-table-column
prop="invoicing"
label="已比对发票张数"
></el-table-column>
<el-table-column
prop="invoicing"
label="未比对发票张数"
></el-table-column>
<el-table-column
prop="invoicing"
label="操作"
fixed="right"
></el-table-column>
</el-table>
<el-pagination
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</div>
</template>
<script>
export default {
name: 'SupplierInvoicingQuery',
data() {
return {
form: {},
table: [],
currentPage: 1,
total: 100,
pageSize: 8,
}
},
methods: {
headerStyle() {
return 'background:#409eff;text-align:center;color:#fff;'
},
rowStyle() {
return 'text-align:center;'
},
handleSizeChange(val) {
this.pageSize = val
},
handleCurrentChange(val) {
this.currentPage = val
},
},
}
</script>
<style></style>
<style lang="scss" scoped>
.el-button {
margin: 1vh 0.6vw;
}
.el-form::v-deep {
width: 100%;
display: flex;
flex-wrap: wrap;
padding-top: 2vh;
box-sizing: border-box;
.btn_container {
margin-left: 5vw;
line-height: 4vh;
}
.el-form-item {
display: flex;
align-items: center;
height: 4vh;
.el-form-item__label {
font-size: calc(100vh * 28 / 1920);
font-weight: bold;
width: 6.8vw;
}
.el-input__inner {
font-size: calc(100vh * 26 / 1920);
height: 3.5vh;
}
.supplier_container {
display: flex;
align-items: center;
width: 14vw;
height: 3.5vh;
border: 1px solid #dcdfe6;
border-radius: 4px;
margin-right: 0.6vw;
.el-input__inner {
border: none;
width: 100%;
}
i {
border-left: 1px solid #dcdfe6;
width: 15%;
height: 100%;
background: #f1f1f1;
text-align: center;
font-size: calc(100vh * 30 / 1920);
line-height: 3.5vh;
}
}
}
}
.table_container {
border-top: 4px solid #f1f1f1;
padding: 0.5vh 0.5vw;
box-sizing: border-box;
.el-pagination {
text-align: left;
margin-top: 1.5vh;
}
.money_container {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
.money_item {
width: 33.3%;
height: 4vh;
line-height: 4vh;
font-size: calc(100vh * 28 / 1920);
.money_title {
font-weight: bold;
margin-right: 0.8vw;
}
}
}
}
::v-deep .el-table th .cell {
color: #fff;
font-size: calc(100vh * 28 / 1920);
}
::v-deep .el-table td .cell {
font-size: calc(100vh * 24 / 1920);
}
</style>
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