updata
This commit is contained in:
parent
5949af9ca2
commit
19e4a8276b
@ -1,13 +1,69 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<el-card>
|
||||
<el-table v-loading="loading" ref="table" :data="tableData" tooltip-effect="dark" style="width: 100%"
|
||||
@selection-change="handleSelectionChange" height="calc(100vh - 190px)">
|
||||
<!-- 搜索表单 -->
|
||||
<el-form :model="query" inline class="search-form">
|
||||
<el-form-item label="客户名称">
|
||||
<el-input
|
||||
v-model="query.orgname"
|
||||
placeholder="请输入客户名称"
|
||||
size="small"
|
||||
clearable
|
||||
@keyup.enter.native="handleSearch">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式">
|
||||
<el-input
|
||||
v-model="query.contactor_phone"
|
||||
placeholder="请输入联系方式"
|
||||
size="small"
|
||||
clearable
|
||||
@keyup.enter.native="handleSearch">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="small" @click="handleSearch">搜索</el-button>
|
||||
<el-button size="small" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 客户表格 -->
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
ref="table"
|
||||
:data="tableData"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange"
|
||||
height="calc(100vh - 320px)">
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column prop="orgname" label="客户名称"></el-table-column>
|
||||
<el-table-column prop="orgname" label="客户名称">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.orgname || scope.row.contactor_phone || '未知客户' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="联系方式" prop="contactor_phone"></el-table-column>
|
||||
<el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="address" label="地址" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.address || '未填写地址' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页组件 -->
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="query.page"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="query.size"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="button-container">
|
||||
<el-button @click="selectSales()" size="small" type="primary" :disabled="!hasSelection" class="action-button">
|
||||
选择销售
|
||||
@ -18,13 +74,14 @@
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 选择销售对话框 -->
|
||||
<el-dialog class="myDialog" title="选择销售人员" :visible.sync="isShow" width="30%" :before-close="handleClose">
|
||||
<el-form ref="form" :model="form" label-width="130px">
|
||||
<el-form-item label="请选择销售人员:" style="width: 80%;" prop="sales">
|
||||
<!-- 添加一个容器来应用滚动样式 -->
|
||||
<el-form-item label="请选择销售人员:" style="width: 100%;" prop="sales">
|
||||
<div class="radio-group-container">
|
||||
<el-radio-group v-model="form.id">
|
||||
<div class="radio" v-for="(item, index) in salesData" :key="index">
|
||||
<div class="radio-item" v-for="(item, index) in salesData" :key="index">
|
||||
<el-radio :label="item.id">{{ item.username }}</el-radio>
|
||||
</div>
|
||||
</el-radio-group>
|
||||
@ -49,19 +106,22 @@ export default {
|
||||
tableData: [],
|
||||
salesData: [],
|
||||
isShow: false,
|
||||
page: 1,
|
||||
total: 0,
|
||||
form: {
|
||||
username: '',
|
||||
id: ''
|
||||
},
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "username",
|
||||
},
|
||||
customerid: [], // 客户的id
|
||||
hasSelection: false, // 新增：跟踪是否有选中项
|
||||
hasSelection: false, // 跟踪是否有选中项
|
||||
userId: sessionStorage.getItem("userId"),
|
||||
orgid: sessionStorage.getItem("orgid"),
|
||||
query: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
orgid: this.orgid,
|
||||
orgname: '',
|
||||
contactor_phone: ''
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -70,25 +130,26 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
getNoinvitationcode() { // 获取全部客户
|
||||
getNoinvitationcodeAPI({ orgid: this.orgid }).then(res => {
|
||||
this.loading = true;
|
||||
getNoinvitationcodeAPI(this.query).then(res => {
|
||||
this.loading = false;
|
||||
this.tableData = res.data.rows;
|
||||
// console.log(res);
|
||||
this.total = res.pagination.total;
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
getSales() { // 展示所有销售人员
|
||||
getSalesAPI({ role: "销售", userid: this.userId }).then(res => {
|
||||
// console.log(res);
|
||||
if (res.data.length > 0) {
|
||||
if (res.data && res.data.length > 0) {
|
||||
this.salesData = res.data.map((item) => {
|
||||
return {
|
||||
username: item.username,
|
||||
id: item.id,
|
||||
};
|
||||
});
|
||||
// 注意：这里通常不需要设置默认选中第一个销售，
|
||||
// 因为用户需要主动选择。如果需要默认选中，可以取消注释下一行
|
||||
// this.form.id = this.salesData[0]?.id || '';
|
||||
} else {
|
||||
this.salesData = [];
|
||||
}
|
||||
});
|
||||
},
|
||||
@ -98,14 +159,12 @@ export default {
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
// 更新选中的客户ID数组
|
||||
this.customerid = val.map(item => item.id); // 更简洁的写法
|
||||
this.customerid = val.map(item => item.id);
|
||||
// 更新是否有选中项的状态
|
||||
this.hasSelection = this.customerid.length > 0;
|
||||
// console.log(this.customerid);
|
||||
},
|
||||
cancelSelection() {
|
||||
this.$refs.table.clearSelection();
|
||||
// 清除选择后，确保按钮状态更新（虽然通常 clearSelection 会触发 handleSelectionChange）
|
||||
this.hasSelection = false;
|
||||
this.customerid = [];
|
||||
},
|
||||
@ -163,54 +222,84 @@ export default {
|
||||
cancel() {
|
||||
this.isShow = false;
|
||||
},
|
||||
// getFormData(object) { // 转换参数为formdata格式 - 当前未使用
|
||||
// const formData = new FormData();
|
||||
// Object.keys(object).forEach(key => {
|
||||
// const value = object[key];
|
||||
// if (Array.isArray(value)) {
|
||||
// value.forEach((subValue, i) => {
|
||||
// formData.append(key + `[${i}]`, subValue)
|
||||
// })
|
||||
// } else {
|
||||
// formData.append(key, object[key])
|
||||
// }
|
||||
// })
|
||||
// return formData;
|
||||
// },
|
||||
handleSearch() {
|
||||
this.query.page = 1; // 搜索时重置到第一页
|
||||
this.getNoinvitationcode();
|
||||
},
|
||||
handleReset() {
|
||||
this.query = {
|
||||
page: 1,
|
||||
size: 10,
|
||||
orgid: this.orgid,
|
||||
orgname: '',
|
||||
contactor_phone: ''
|
||||
};
|
||||
this.getNoinvitationcode();
|
||||
},
|
||||
handleSizeChange(size) {
|
||||
this.query.size = size;
|
||||
this.getNoinvitationcode();
|
||||
},
|
||||
handleCurrentChange(page) {
|
||||
this.query.page = page;
|
||||
this.getNoinvitationcode();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
padding: 20px;
|
||||
|
||||
.search-form {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 10px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 10px; // 按钮之间的间距
|
||||
}
|
||||
gap: 10px;
|
||||
|
||||
.action-button {
|
||||
padding: 8px 16px; // 增加按钮内边距
|
||||
font-size: 14px; // 调整字体大小
|
||||
border-radius: 4px; // 添加圆角
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.myDialog {
|
||||
.radio-group-container {
|
||||
// 为单选按钮组添加最大高度和滚动条
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #e4e7ed; // 可选：添加边框
|
||||
border-radius: 4px; // 可选：添加圆角
|
||||
padding: 5px; // 可选：内部填充
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.radio {
|
||||
// 单选按钮项的样式（如果需要）
|
||||
margin-bottom: 5px; // 项之间的间距
|
||||
.radio-item {
|
||||
margin-bottom: 8px;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0; // 最后一项移除下边距
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -220,4 +309,7 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/.el-table__row{
|
||||
height: 62px!important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user