Browse Source

收款明细

lihui/feature-20250915101448-现金管理
ZhangYong 2 weeks ago
parent
commit
5f424a62db
  1. 239
      src/views/moneyManage/receiveDetail/receiveDetail.vue

239
src/views/moneyManage/receiveDetail/receiveDetail.vue

@ -1,61 +1,87 @@
<template> <template>
<div class="content"> <div class="content">
<el-card style="margin-bottom: 0.5vh; min-height: 110px;">
<div class="row">
<div class="rowItem">
<el-text style="width: 4vw;">精网号</el-text>
<el-input placeholder="请输入精网号" style="width:10vw;" clearable></el-input>
</div>
<div class="rowItem">
<text style="width: 4vw;">客户姓名</text>
<el-input placeholder="请输入客户姓名" style="width:10vw;" clearable></el-input>
</div>
<div class="rowItem">
<text style="width: 4vw;">所属地区</text>
<el-select placeholder="请选择所属地区" style="width:10vw;" clearable></el-select>
</div>
<div class="rowItem">
<text style="width: 4vw;">订单状态</text>
<el-select placeholder="请选择订单状态" style="width: 10vw;" clearable></el-select>
</div>
<div class="rowItem">
<text style="width: 4vw;">支付方式</text>
<el-select placeholder="请选择支付方式" style="width: 10vw;" clearable></el-select>
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="rowItem">
<text style="width: 4vw;">活动名称</text>
<el-select placeholdert="请选择活动方式" style="width: 10vw;" clearable></el-select>
</div>
<div class="rowItem">
<text style="width: 4vw;">产品名称</text>
<el-select placeholder="请选择产品名称" style="width: 10vw;" clearable></el-select>
<div class="card1">
<el-card style="margin-bottom: 0.5vh; min-height: 110px;">
<div class="row">
<div class="rowItem">
<el-text style="width: 4vw;">精网号</el-text>
<el-input placeholder="请输入精网号" style="width:10vw;" clearable></el-input>
</div>
<div class="rowItem">
<text style="width: 4vw;">客户姓名</text>
<el-input placeholder="请输入客户姓名" style="width:10vw;" clearable></el-input>
</div>
<div class="rowItem">
<text style="width: 4vw;">所属地区</text>
<el-select placeholder="请选择所属地区" style="width:10vw;" clearable></el-select>
</div>
<div class="rowItem">
<text style="width: 4vw;">订单状态</text>
<el-select placeholder="请选择订单状态" style="width: 10vw;" clearable></el-select>
</div>
<div class="rowItem">
<text style="width: 4vw;">支付方式</text>
<el-select placeholder="请选择支付方式" style="width: 10vw;" clearable></el-select>
</div>
</div> </div>
<div class="rowItem" style="width: 30vw">
<text style="width: 4vw; margin-left: 0.5vw;">付款时间</text>
<el-date-picker v-model="getTime" type="datetimerange" range-separator="" start-placeholder="起始时间"
end-placeholder="结束时间" style="width: 22vw; " @change="handleDatePickerChange"
:default-time="defaultTime" :disabled-date="disabledDate" />
<div class="row" style="margin-top: 10px;">
<div class="rowItem">
<text style="width: 4vw;">活动名称</text>
<el-select placeholdert="请选择活动方式" style="width: 10vw;" clearable></el-select>
</div>
<div class="rowItem">
<text style="width: 4vw;">产品名称</text>
<el-select placeholder="请选择产品名称" style="width: 10vw;" clearable></el-select>
</div>
<div class="rowItem" style="width: 30vw">
<text style="width: 4vw; margin-left: 0.5vw;">付款时间</text>
<el-date-picker v-model="getTime" type="datetimerange" range-separator=""
start-placeholder="起始时间" end-placeholder="结束时间" style="width: 22vw; "
@change="handleDatePickerChange" :default-time="defaultTime"
:disabled-date="disabledDate" />
</div>
</div> </div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="buttons">
<el-button type="primary">查询</el-button>
<el-button type="success">重置</el-button>
<el-button type="primary">导出excel</el-button>
<el-button type="primary" style="background-color: #5870FF;">导出列表</el-button>
<div class="row" style="margin-top: 10px;">
<div class="buttons">
<el-button type="primary">查询</el-button>
<el-button type="success">重置</el-button>
<el-button type="primary">导出excel</el-button>
<el-button type="primary" style="background-color: #5870FF;">导出列表</el-button>
</div>
</div> </div>
</div>
</el-card>
</el-card>
</div>
<div class="detail">
<div class="card2">
<el-card> <el-card>
<div class="btnAdd">
<el-button @click="openAddForm" type="success">新增收款</el-button>
<div class="btns">
<div class="tabs">
<el-button-group>
<el-button class="btnItem"
:style="{ backgroundColor: activeTab === 'wait' ? '#2741DE' : '#E5EBFE', color: activeTab === 'wait' ? 'white' : '#666' }"
@click="navigateTo('wait')">
待审核
</el-button>
<el-button class="btnItem"
:style="{ backgroundColor: activeTab === 'pass' ? '#2741DE' : '#E5EBFE', color: activeTab === 'pass' ? 'white' : '#666' }"
@click="navigateTo('pass')">
已通过
</el-button>
<el-button class="btnItem"
:style="{ backgroundColor: activeTab === 'reject' ? '#2741DE' : '#E5EBFE', color: activeTab === 'reject' ? 'white' : '#666' }"
@click="navigateTo('reject')">
已驳回
</el-button>
</el-button-group>
</div>
<div class="btnAdd">
<el-button @click="openAddForm" type="success">添加收款</el-button>
</div>
</div> </div>
<div class="form">
<el-table :data="tableData" style="width: 80vw;height:54vh" @sort-change="handleSortChange"
<div class="table">
<el-table :data="tableData" style="width: 80vw;height:54vh;" @sort-change="handleSortChange"
:row-style="{ height: '60px' }" :header-cell-style="{ textAlign: 'center' }" :row-style="{ height: '60px' }" :header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"> :cell-style="{ textAlign: 'center' }">
<el-table-column type="index" label="序号" width="100px" fixed="left"> <el-table-column type="index" label="序号" width="100px" fixed="left">
@ -93,12 +119,12 @@
<el-table-column fixed="right" prop="adminName" label="订单状态" width="100px" /> <el-table-column fixed="right" prop="adminName" label="订单状态" width="100px" />
<el-table-column fixed="right" prop="rejectReason" label="操作" width="100px" /> <el-table-column fixed="right" prop="rejectReason" label="操作" width="100px" />
</el-table> </el-table>
<div class="pagination">
<el-pagination :page-size="pageInfo.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper" :total="total"
@size-change="handlePagination('size', $event)"
@current-change="handlePagination('page', $event)"></el-pagination>
</div>
</div>
<div class="pagination">
<el-pagination :page-size="pageInfo.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
layout="total, sizes, prev, pager, next, jumper" :total="total"
@size-change="handlePagination('size', $event)"
@current-change="handlePagination('page', $event)"></el-pagination>
</div> </div>
</el-card> </el-card>
</div> </div>
@ -132,9 +158,9 @@
<el-time-picker v-model="addFormData.time" placeholder="请选择付款时间" /> <el-time-picker v-model="addFormData.time" placeholder="请选择付款时间" />
</el-form-item> </el-form-item>
<el-form-item label="转账凭证" required> <el-form-item label="转账凭证" required>
<el-upload ref="uploadRef" class="uploader" :show-file-list="false"
list-type="picture-card" :auto-upload="false" :before-upload="beforeUpload"
:on-error="handelImgErr" :on-change="handleImageChange" :http-request="customUpload">
<el-upload ref="uploadRef" class="uploader" :show-file-list="false" list-type="picture-card"
:auto-upload="false" :before-upload="beforeUpload" :on-error="handelImgErr"
:on-change="handleImageChange" :http-request="customUpload">
<img v-if="addFormData.imageUrl" :src="addFormData.imageUrl" class="avatar" <img v-if="addFormData.imageUrl" :src="addFormData.imageUrl" class="avatar"
style="height: 100%; width: 100%; object-fit: cover;" /> style="height: 100%; width: 100%; object-fit: cover;" />
<el-icon v-else class="avatar-uploader-icon"> <el-icon v-else class="avatar-uploader-icon">
@ -150,7 +176,8 @@
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button style="background-color: #7E91FF;" @click="closeAddForm">取消</el-button> <el-button style="background-color: #7E91FF;" @click="closeAddForm">取消</el-button>
<el-button style="background-color: #2741DE; margin-left: 2.5vw;" type="primary" @click="handleReject">确定</el-button>
<el-button style="background-color: #2741DE; margin-left: 2.5vw;" type="primary"
@click="handleReject">确定</el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
@ -161,6 +188,19 @@ import { ref } from 'vue';
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import API from '@/util/http.js' import API from '@/util/http.js'
//==================== =========================
const activeTab = ref('wait')
const navigateTo = (tab) => {
if (tab === 'wait') {
activeTab.value = 'wait'
} else if (tab === 'pass') {
activeTab.value = 'pass'
}
else if (tab === 'reject') {
activeTab.value = 'reject'
}
}
//================= ================== //================= ==================
const addFormData = ref({ const addFormData = ref({
@ -170,9 +210,9 @@ const uploadRef = ref()
const openAddForm = () => { const openAddForm = () => {
addFormisible.value = true addFormisible.value = true
} }
const closeAddForm=()=>{
const closeAddForm = () => {
addFormisible.value = false addFormisible.value = false
addFormData.value={}
addFormData.value = {}
} }
const handleImgSuccess = (response, uploadFile) => { const handleImgSuccess = (response, uploadFile) => {
@ -314,50 +354,74 @@ const tableData = [
<style scoped lang="scss"> <style scoped lang="scss">
.content { .content {
height: 100%; height: 100%;
width: 80vw;
background-color: #E7F4FD !important;
width: 83vw;
.row {
height: 4vh;
width: 80vw;
display: flex;
min-height: 40px;
.card1 {
width: 100%;
.rowItem {
.row {
height: 4vh;
width: 80vw;
display: flex; display: flex;
width: 15vw;
align-items: center;
justify-content: center;
margin-right: 0.5vw;
}
min-height: 40px;
.buttons {
display: flex;
justify-content: center;
align-items: center;
margin-left: 10px;
.rowItem {
display: flex;
width: 15vw;
align-items: center;
justify-content: center;
margin-right: 0.5vw;
}
.buttons {
display: flex;
justify-content: center;
align-items: center;
margin-left: 10px;
}
} }
} }
.detail {
.card2 {
width: 100%;
margin-top: 2vh; margin-top: 2vh;
.el-card__body {}
.btns {
display: flex;
align-items: center;
justify-content: space-between;
.tabs{
min-width: 300px;
.btnItem {
margin-left: 10px;
border-radius: 5px;
}
}
.btnAdd {
flex: 1;
justify-content: flex-end;
margin-right: 1vw;
}
}
.btnAdd {}
.form {
background-color: #E7F4FD !important;
.table {
margin: 10px 3vw;
border-radius: 20px;
} }
.pagination { .pagination {
margin-top: 10px; margin-top: 10px;
padding: 10px 10px;
} }
} }
:deep(.adddialog) { :deep(.adddialog) {
min-width: 450px; min-width: 450px;
background-color: #E7F4FD !important;
background-color: #F3FAFE !important;
.addForm { .addForm {
padding: 0 3vw 1vh 1vw; padding: 0 3vw 1vh 1vw;
@ -368,7 +432,8 @@ const tableData = [
} }
} }
.dialog-footer{
.dialog-footer {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-bottom: 1.5vh; padding-bottom: 1.5vh;

Loading…
Cancel
Save