yumoqing/kboss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updata

Browse Source
This commit is contained in:
hrx 2025-11-18 17:51:40 +08:00
parent 80eec794d8
commit 11afca8596
1 changed files with 390 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

550
f/web-kboss/src/views/sales/customerManagement/customerInformationList/index.vue
View File

@ -1,110 +1,174 @@
<template> <template>
<div id="box"> <div class="customer-management-container">
<div> <div class="table-container">
<el-table :data="userList" style="width: 100%; box-sizing: border-box;" height="calc(100vh - 98px)" <el-table
:row-key="getRowKeys" :expand-row-keys="expands" @expand-change="expandChangeHandler" :data="userList"
v-loading="loading"> style="width: 100%;"
height="calc(100vh - 120px)"
:row-key="getRowKeys"
:expand-row-keys="expands"
@expand-change="expandChangeHandler"
v-loading="loading"
class="customer-table"
:default-sort="{prop: 'transfer_time', order: 'descending'}">
<!-- 展开行 - 客户详细信息 -->
<el-table-column type="expand" align="center" header-align="center"> <el-table-column type="expand" align="center" header-align="center">
<template> <template>
<el-form label-position="left" inline class="demo-table-expand"> <div class="customer-detail-panel">
<el-form-item label="客户名称:"> <h3 class="detail-title">客户详细信息</h3>
<span>{{ tableData.name }}</span> <el-row :gutter="20" class="detail-grid">
</el-form-item> <el-col :xs="24" :sm="12" :md="8" class="detail-item">
<el-form-item label="客户地址:"> <div class="detail-label">客户名称</div>
<span>{{ tableData.address }}</span> <div class="detail-value">{{ tableData.name || '--' }}</div>
</el-form-item> </el-col>
<el-form-item label="统一社会信用代码:"> <el-col :xs="24" :sm="12" :md="8" class="detail-item">
<span>{{ tableData.identityCode }}</span> <div class="detail-label">客户地址</div>
</el-form-item> <div class="detail-value">{{ tableData.address || '--' }}</div>
<el-form-item label="联系人:"> </el-col>
<span>{{ tableData.contact }}</span> <el-col :xs="24" :sm="12" :md="8" class="detail-item">
</el-form-item> <div class="detail-label">统一社会信用代码</div>
<el-form-item label="电话:"> <div class="detail-value">{{ tableData.identityCode || '--' }}</div>
<span>{{ tableData.tel }}</span> </el-col>
</el-form-item> <el-col :xs="24" :sm="12" :md="8" class="detail-item">
<el-form-item label="邮箱:"> <div class="detail-label">联系人</div>
<span>{{ tableData.email }}</span> <div class="detail-value">{{ tableData.contact || '--' }}</div>
</el-form-item> </el-col>
<el-form-item label="开户行:"> <el-col :xs="24" :sm="12" :md="8" class="detail-item">
<span>{{ tableData.bankName }}</span> <div class="detail-label">电话</div>
</el-form-item> <div class="detail-value">{{ tableData.tel || '--' }}</div>
<el-form-item label="银行账号:"> </el-col>
<span>{{ tableData.bankAcc }}</span> <el-col :xs="24" :sm="12" :md="8" class="detail-item">
</el-form-item> <div class="detail-label">邮箱</div>
<el-form-item label="发票抬头:"> <div class="detail-value">{{ tableData.email || '--' }}</div>
<span>{{ tableData.identityName }}</span> </el-col>
</el-form-item> <el-col :xs="24" :sm="12" :md="8" class="detail-item">
<el-form-item label="发票联系电话:"> <div class="detail-label">开户行</div>
<span>{{ tableData.taxTel }}</span> <div class="detail-value">{{ tableData.bankName || '--' }}</div>
</el-form-item> </el-col>
<el-form-item label="发票地址:"> <el-col :xs="24" :sm="12" :md="8" class="detail-item">
<span>{{ tableData.taxAddress }}</span> <div class="detail-label">银行账号</div>
</el-form-item> <div class="detail-value">{{ tableData.bankAcc || '--' }}</div>
<el-form-item label="纳税人识别号:"> </el-col>
<span>{{ tableData.taxpayerIdentity }}</span> <el-col :xs="24" :sm="12" :md="8" class="detail-item">
</el-form-item> <div class="detail-label">发票抬头</div>
</el-form> <div class="detail-value">{{ tableData.identityName || '--' }}</div>
</el-col>
<el-col :xs="24" :sm="12" :md="8" class="detail-item">
<div class="detail-label">发票联系电话</div>
<div class="detail-value">{{ tableData.taxTel || '--' }}</div>
</el-col>
<el-col :xs="24" :sm="12" :md="8" class="detail-item">
<div class="detail-label">发票地址</div>
<div class="detail-value">{{ tableData.taxAddress || '--' }}</div>
</el-col>
<el-col :xs="24" :sm="12" :md="8" class="detail-item">
<div class="detail-label">纳税人识别号</div>
<div class="detail-value">{{ tableData.taxpayerIdentity || '--' }}</div>
</el-col>
</el-row>
</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="客户名称" prop="orgname" align="center" header-align="center"></el-table-column>
<el-table-column label="联系电话" prop="contactor_phone" align="center" header-align="center"> <!-- 客户列表列 -->
</el-table-column> <el-table-column label="客户名称" prop="orgname" align="center" header-align="center" min-width="160" show-overflow-tooltip></el-table-column>
<el-table-column label="邮箱" prop="emailaddress" align="center" header-align="center"></el-table-column> <el-table-column label="联系电话" prop="contactor_phone" align="center" header-align="center" min-width="130"></el-table-column>
<el-table-column label="客户地址" prop="address" align="center" header-align="center"></el-table-column> <el-table-column label="邮箱" prop="emailaddress" align="center" header-align="center" min-width="180" show-overflow-tooltip></el-table-column>
<el-table-column label="客户类型" prop="type" align="center" header-align="center"></el-table-column> <el-table-column label="客户地址" prop="address" align="center" header-align="center" min-width="180" show-overflow-tooltip></el-table-column>
<el-table-column label="交接人" prop="previous_sales" align="center" header-align="center"></el-table-column> <el-table-column label="客户类型" prop="type" align="center" header-align="center" min-width="100"></el-table-column>
<el-table-column label="交接时间" prop="transfer_time" align="center" header-align="center"></el-table-column> <el-table-column label="交接人" prop="previous_sales" align="center" header-align="center" min-width="100"></el-table-column>
<el-table-column label="操作" prop="" align="center" header-align="center"> <el-table-column label="交接时间" prop="transfer_time" align="center" header-align="center" min-width="120" sortable></el-table-column>
<el-table-column label="操作" align="center" header-align="center" min-width="120" fixed="right">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="small" type="primary" @click="lookBill(scope.row)">查看账单</el-button> <el-button size="small" type="primary" @click="lookBill(scope.row)" class="action-btn">查看账单</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div>
<!-- 查看账单弹窗 --> <!-- 查看账单弹窗 -->
<el-dialog title="查看账单" :visible.sync="lookBillVisible" width="70%" <el-dialog
style="height: calc(100vh - 0px);" fullscreen center title="查看账单"
class="dialog"> :visible.sync="lookBillVisible"
<div class="pagination"> width="85%"
<div class="two"> top="10px"
<div class="data"> class="bill-dialog"
<el-date-picker :picker-options="endPickerOpts" v-model="dataOne" type="date" placeholder="选择日期"> :close-on-click-modal="false">
<div class="bill-content">
<div class="filter-section">
<div class="date-filter">
<div class="filter-label">账单日期</div>
<el-date-picker
v-model="dataOne"
type="date"
placeholder="开始日期"
:picker-options="startPickerOpts"
class="date-input">
</el-date-picker> </el-date-picker>
<span class="line">至</span> <span class="date-separator">至</span>
<el-date-picker :picker-options="endPickerOpts" type="date" placeholder="选择日期" <el-date-picker
v-model="dataTwo"></el-date-picker> v-model="dataTwo"
</div> type="date"
<div class="button"> placeholder="结束日期"
<el-button size="small" type="primary" @click="onsubmit()">查询</el-button> :picker-options="endPickerOpts"
class="date-input">
</el-date-picker>
<el-button
type="primary"
size="small"
@click="onsubmit()"
class="query-btn"
icon="el-icon-search">
查询
</el-button>
</div> </div>
</div> </div>
<el-table :data="billList" height="calc(100vh - 230px)">
<el-table-column label="产品名称" prop="productname" align="center" header-align="center"> <div class="bill-table-container">
<el-table
:data="billList"
height="calc(100vh - 280px)"
class="bill-table"
empty-text="暂无账单数据">
<el-table-column label="产品名称" prop="productname" align="center" header-align="center" min-width="150" show-overflow-tooltip></el-table-column>
<el-table-column label="账单号" prop="id" align="center" header-align="center" min-width="120"></el-table-column>
<el-table-column label="账单金额" prop="amount" align="center" header-align="center" min-width="120">
<template slot-scope="scope">
<span class="amount">¥{{ scope.row.amount || 0 }}</span>
</template>
</el-table-column> </el-table-column>
<el-table-column label="账单号" prop="id" align="center" header-align="center"></el-table-column> <el-table-column label="账单日期" prop="bill_date" align="center" header-align="center" min-width="120"></el-table-column>
<el-table-column label="账单金额" prop="amount" align="center" header-align="center"></el-table-column> <el-table-column label="账单状态" align="center" header-align="center" min-width="120">
<el-table-column label="账单日期" prop="bill_date" align="center" header-align="center"></el-table-column>
<el-table-column label="账单状态" prop="contactor_phone" align="center" header-align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag <el-tag
:type="getBillstate(scope.row.bill_state * 1).type" :type="getBillstate(scope.row.bill_state * 1).type"
effect="dark"> :effect="getBillstate(scope.row.bill_state * 1).effect || 'light'"
class="status-tag">
{{ getBillstate(scope.row.bill_state * 1).message }} {{ getBillstate(scope.row.bill_state * 1).message }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="购买状态" prop="productname" align="center" header-align="center"> <el-table-column label="购买状态" prop="productname" align="center" header-align="center" min-width="120">
<!-- <template slot-scope="scope">--> <!-- 购买状态逻辑可根据实际情况补充 -->
<!-- {{ getBusinessOp(scope.row.business_op) }}-->
<!-- </template>-->
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination style="margin-top:20px;margin-left:30%" background @current-change="handleCurrentChange" </div>
:page-size="10" :pager-count="11" layout="prev, pager, next" :total='total'>
<div class="pagination-section">
<el-pagination
background
@current-change="handleCurrentChange"
:page-size="10"
:pager-count="7"
layout="total, prev, pager, next, jumper"
:total="total"
class="bill-pagination">
</el-pagination> </el-pagination>
</div> </div>
</el-dialog>
</div> </div>
</el-dialog>
</div> </div>
</template> </template>
@ -159,197 +223,345 @@ export default {
total: null, total: null,
dataOne: null, dataOne: null,
dataTwo: null, dataTwo: null,
startPickerOpts: {
disabledDate: (time) => {
if (this.dataTwo) {
return time.getTime() > new Date(this.dataTwo).getTime();
}
return time.getTime() > Date.now();
}
},
endPickerOpts: { endPickerOpts: {
disabledDate(time) { disabledDate: (time) => {
if (this.dataOne) {
return time.getTime() < new Date(this.dataOne).getTime() || time.getTime() > Date.now();
}
return time.getTime() > Date.now(); return time.getTime() > Date.now();
} }
}, },
}; };
}, },
mounted() { mounted() {
this.loading = true this.loading = true;
this.getuserList(); this.getuserList();
// 设置默认查询日期为最近一个月
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 1);
this.dataOne = start;
this.dataTwo = end;
}, },
methods: { methods: {
handleCurrentChange(index) { handleCurrentChange(index) {
this.current_page = index this.current_page = index;
this.lookUp() this.lookUp();
}, },
lookBill(row) { lookBill(row) {
this.currentRow = row this.currentRow = row;
this.lookBillVisible = true this.lookBillVisible = true;
this.lookUp() this.lookUp();
}, },
lookUp(dataOne, dataTwo) { lookUp(dataOne, dataTwo) {
let params = { let params = {
user_orgid: this.currentRow.id, user_orgid: this.currentRow.id,
start_time: dataOne, start_time: dataOne || this.dataOne,
end_time: dataTwo, end_time: dataTwo || this.dataTwo,
page_size: 10, page_size: 10,
current_page: this.current_page current_page: this.current_page
} };
userGetbillAPI(params).then(res => { userGetbillAPI(params).then(res => {
console.log(res);
if (res.status) { if (res.status) {
if (res.data.total_page != 0) { if (res.data.total_page != 0) {
this.billList = res.data.bill_list;
this.billList = res.data.bill_list this.total = res.data.total_num;
this.total = res.data.total_num
} else { } else {
this.billList = [] this.billList = [];
this.total = 0 this.total = 0;
this.$message({ this.$message({
message: "暂无数据", message: "暂无数据",
type: 'warning' type: 'warning'
}) });
} }
} else { } else {
this.$message({ this.$message({
message: res.msg, message: res.msg,
type: 'error' type: 'error'
}) });
} }
}) }).catch(error => {
this.$message({
message: "请求失败，请稍后重试",
type: 'error'
});
console.error(error);
});
}, },
onsubmit() { onsubmit() {
if (!this.dataOne || !this.dataTwo) { if (!this.dataOne || !this.dataTwo) {
this.$message({ this.$message({
message: "请选择时间", message: "请选择完整的时间范围",
type: 'warning' type: 'warning'
}) });
} else { return;
this.lookUp(this.dataOne, this.dataTwo)
} }
if (this.dataOne > this.dataTwo) {
this.$message({
message: "开始日期不能大于结束日期",
type: 'warning'
});
return;
}
this.current_page = 1;
this.lookUp();
}, },
expandChangeHandler(row, expandedRows) {// 点击展开的时候就会触发这个方法 expandChangeHandler(row, expandedRows) {
if (expandedRows.length) {
this.expands = [];
if (row) {
this.expands.push(row.id);
// 只在需要时请求数据
var orgid = { var orgid = {
orgid: row.id, orgid: row.id,
}; };
getZJUserInfoAPI(orgid).then((res) => { getZJUserInfoAPI(orgid).then((res) => {
this.tableData = res.data; this.tableData = res.data;
}).catch(error => {
console.error("获取客户详情失败:", error);
}); });
if (expandedRows.length) {
this.expands = [];
if (row) {
this.expands.push(row.id);
} }
} else { } else {
this.expands = []; this.expands = [];
} }
}, },
getuserList() {
getuserList() {//获取所有客户
var userid = { var userid = {
userid: sessionStorage.getItem("userId"), userid: sessionStorage.getItem("userId"),
// kv: "zj",
}; };
getZJsaleGetUsersAPI(userid).then((res) => { getZJsaleGetUsersAPI(userid).then((res) => {
this.loading = false this.loading = false;
this.userList = res.data; this.userList = res.data;
}).catch(error => {
this.loading = false;
console.error("获取客户列表失败:", error);
this.$message({
message: "获取客户列表失败",
type: 'error'
});
}); });
},
open4(str) { //错误提示
this.$message.error(str);
},
getBusinessOp(data) {
switch (data) {
case 'BUY':
return "购买";
case 'RECHARGE':
return "充值";
case 'RECHARGE_ALIPAY':
return "支付宝充值";
case 'REFUND':
return "退款";
}
}, },
getBillstate(data) { getBillstate(data) {
switch (data) { switch (data) {
case 0: case 0:
return { return {
message: '未支付', message: '未支付',
type: 'info' type: 'warning'
}; };
case 1: case 1:
return { return {
message: '已支付', message: '已支付',
type: 'success' type: 'success'
} };
case 2: case 2:
return { return {
message: '已取消', message: '已取消',
type: 'info' type: 'info'
} };
case null: case null:
return { return {
message: '已取消', message: '已取消',
type: 'info' type: 'info'
} };
default: default:
return { return {
message: '未知', message: '未知',
type: 'info' type: 'info'
} };
} }
}, },
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
#box { .customer-management-container {
min-width: 800px; padding: 20px;
background-color: #f5f7fa;
min-height: calc(100vh - 40px);
box-sizing: border-box; box-sizing: border-box;
/* overflow: scroll; */
.dialog { .table-container {
height: 100%; background: #fff;
// position: relative; border-radius: 8px;
.pagination { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
.two { overflow: hidden;
.customer-table {
::v-deep .el-table__expanded-cell {
padding: 0;
}
.action-btn {
border-radius: 4px;
}
}
}
.customer-detail-panel {
padding: 20px;
background: #f9fafc;
.detail-title {
margin: 0 0 16px 0;
font-size: 16px;
color: #303133;
font-weight: 600;
border-bottom: 1px solid #e6e8eb;
padding-bottom: 10px;
}
.detail-grid {
.detail-item {
margin-bottom: 16px;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
.data { .detail-label {
line-height: 50px; font-size: 13px;
height: 50px; color: #909399;
margin-bottom: 4px;
font-weight: 500;
}
.detail-value {
font-size: 14px;
color: #606266;
word-break: break-all;
}
}
}
}
.bill-dialog {
::v-deep .el-dialog {
border-radius: 8px;
overflow: hidden;
.el-dialog__header {
background: #f5f7fa;
padding: 15px 20px;
border-bottom: 1px solid #e6e8eb;
.el-dialog__title {
font-weight: 600;
color: #303133;
}
}
.el-dialog__body {
padding: 0;
}
}
.bill-content {
padding: 20px;
.filter-section {
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #e6e8eb;
.date-filter {
display: flex; display: flex;
flex-direction: row; align-items: center;
.line { .filter-label {
margin-left: 5px; margin-right: 10px;
margin-right: 5px; font-weight: 500;
color: #606266;
}
.date-input {
width: 160px;
}
.date-separator {
margin: 0 10px;
color: #909399;
}
.query-btn {
margin-left: 15px;
border-radius: 4px;
}
} }
} }
.button { .bill-table-container {
margin-top: 10px; .bill-table {
margin-left: 15px .amount {
font-weight: 600;
color: #f56c6c;
}
.status-tag {
border-radius: 12px;
padding: 0 10px;
height: 24px;
line-height: 24px;
}
} }
} }
.pagination-section {
margin-top: 20px;
display: flex;
justify-content: center;
.bill-pagination {
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #409eff;
}
}
}
} }
} }
} }
.demo-table-expand { // 响应式调整
font-size: 0; @media (max-width: 768px) {
} .customer-management-container {
padding: 10px;
.demo-table-expand label { .bill-dialog {
width: 90px; width: 95% !important;
color: #99a9bf;
}
.demo-table-expand .el-form-item { .bill-content {
margin-right: 0; .filter-section {
margin-bottom: 0; .date-filter {
width: 40%; flex-wrap: wrap;
}
.el-form-item__label { .filter-label {
width: 140px !important; width: 100%;
margin-bottom: 10px;
}
.date-input {
width: calc(50% - 25px);
}
.query-btn {
width: 100%;
margin: 15px 0 0 0;
}
}
}
}
}
}
} }
</style> </style>