|
|
@@ -3,13 +3,53 @@
|
|
|
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px"
|
|
|
@submit.prevent="handleQuery">
|
|
|
|
|
|
- <el-form-item label="销售名称" prop="memberName">
|
|
|
- <el-input v-model="queryParams.memberName" placeholder="请输入销售名称" clearable size="small"
|
|
|
- @keydown.enter.native="handleQueryEnter" />
|
|
|
+ <el-form-item label="销售公司" prop="companyId">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.companyId"
|
|
|
+ placeholder="请选择或搜索销售公司"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ size="small"
|
|
|
+ style="width: 220px"
|
|
|
+ :disabled="lockedCompany"
|
|
|
+ @change="handleCompanyChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in companyOptions"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.roleName"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="所属公司" prop="roleName">
|
|
|
- <el-input v-model="queryParams.roleName" placeholder="请输入所属公司" clearable size="small"
|
|
|
- @keydown.enter.native="handleQueryEnter" />
|
|
|
+ <el-form-item label="销售" prop="salesId">
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.salesId"
|
|
|
+ placeholder="可全局搜,或先选公司再搜"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ remote
|
|
|
+ reserve-keyword
|
|
|
+ :remote-method="remoteSearchSales"
|
|
|
+ :loading="salesLoading"
|
|
|
+ size="small"
|
|
|
+ style="width: 240px"
|
|
|
+ @focus="handleSalesFocus"
|
|
|
+ @clear="handleSalesClear"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in salesOptions"
|
|
|
+ :key="item.id"
|
|
|
+ :label="formatSalesLabel(item)"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否删除" prop="isDelete">
|
|
|
+ <el-select v-model="queryParams.isDelete" placeholder="全部" clearable size="small" style="width: 140px">
|
|
|
+ <el-option label="未删除" :value="0" />
|
|
|
+ <el-option label="已删除" :value="1" />
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item>
|
|
|
@@ -31,6 +71,12 @@
|
|
|
<el-table-column label="销售id" align="center" prop="id" min-width="100"/>
|
|
|
<el-table-column label="销售名称" align="center" prop="memberName" min-width="140" show-overflow-tooltip/>
|
|
|
<el-table-column label="所属公司" align="center" prop="roleName" min-width="140" show-overflow-tooltip/>
|
|
|
+ <el-table-column label="是否删除" align="center" prop="isDelete" width="90">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag v-if="scope.row.isDelete === 1" type="danger" size="mini">已删除</el-tag>
|
|
|
+ <el-tag v-else type="success" size="mini">未删除</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column label="备注" align="center" prop="remark" min-width="160" show-overflow-tooltip/>
|
|
|
</el-table>
|
|
|
|
|
|
@@ -50,6 +96,7 @@
|
|
|
|
|
|
<script>
|
|
|
import { listRole } from "@/api/app/user/userList";
|
|
|
+import { listCustomerRoleOptions } from "@/api/app/customerRole";
|
|
|
export default {
|
|
|
name: "SelectedCustomer",
|
|
|
props: {
|
|
|
@@ -80,59 +127,190 @@ export default {
|
|
|
type: Array,
|
|
|
default: () => [],
|
|
|
},
|
|
|
+ // 所属公司id:有值时仅查该公司下销售
|
|
|
+ companyId: {
|
|
|
+ type: [Number, String],
|
|
|
+ default: null,
|
|
|
+ },
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
// 遮罩层
|
|
|
loading: true,
|
|
|
+ salesLoading: false,
|
|
|
// 总条数
|
|
|
total: 0,
|
|
|
// 客服成员表格数据
|
|
|
roleList: [],
|
|
|
+ companyOptions: [],
|
|
|
+ salesOptions: [],
|
|
|
// 查询参数
|
|
|
queryParams: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
- memberName: null,
|
|
|
- roleName: null
|
|
|
+ companyId: null,
|
|
|
+ salesId: null,
|
|
|
+ isDelete: 0,
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ lockedCompany() {
|
|
|
+ return this.companyId !== null && this.companyId !== undefined && this.companyId !== '';
|
|
|
+ },
|
|
|
+ },
|
|
|
created() {
|
|
|
this.queryParams.pageNum = this.defaultPageNum;
|
|
|
this.queryParams.pageSize = this.defaultPageSize;
|
|
|
+ this.queryParams.companyId = this.companyId || null;
|
|
|
+ // 解绑预填指定销售时,包含已删除销售
|
|
|
+ if (this.ids && this.ids.length) {
|
|
|
+ this.queryParams.isDelete = null;
|
|
|
+ }
|
|
|
+ this.loadCompanyOptions();
|
|
|
this.getList();
|
|
|
+ this.remoteSearchSales('');
|
|
|
},
|
|
|
watch: {
|
|
|
selected: {
|
|
|
immediate: true,
|
|
|
- handler(nv) {
|
|
|
+ handler() {
|
|
|
this.setSelectionStatus();
|
|
|
}
|
|
|
+ },
|
|
|
+ ids: {
|
|
|
+ deep: true,
|
|
|
+ handler(n, o) {
|
|
|
+ const next = (n || []).map(String).join(',');
|
|
|
+ const prev = (o || []).map(String).join(',');
|
|
|
+ if (next === prev) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ this.queryParams.salesId = null;
|
|
|
+ this.queryParams.isDelete = (n && n.length) ? null : 0;
|
|
|
+ this.getList();
|
|
|
+ this.remoteSearchSales('');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ companyId: {
|
|
|
+ handler(n) {
|
|
|
+ this.reloadByCompany(n);
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ parseId(value) {
|
|
|
+ if (value === null || value === undefined || value === '') {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ const num = Number(value);
|
|
|
+ return Number.isNaN(num) ? value : num;
|
|
|
+ },
|
|
|
+ formatSalesLabel(item) {
|
|
|
+ if (!item) {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+ const name = item.memberName || '';
|
|
|
+ const company = item.roleName ? `(${item.roleName})` : '';
|
|
|
+ return `${name}${company}`;
|
|
|
+ },
|
|
|
+ loadCompanyOptions() {
|
|
|
+ listCustomerRoleOptions().then(response => {
|
|
|
+ this.companyOptions = (response.rows || []).map(item => ({
|
|
|
+ ...item,
|
|
|
+ id: this.parseId(item.id)
|
|
|
+ }));
|
|
|
+ }).catch(() => {
|
|
|
+ this.companyOptions = [];
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 按公司刷新列表
|
|
|
+ */
|
|
|
+ reloadByCompany(companyId) {
|
|
|
+ this.queryParams.companyId = companyId || null;
|
|
|
+ this.queryParams.salesId = null;
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ this.salesOptions = [];
|
|
|
+ this.remoteSearchSales('');
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ handleCompanyChange() {
|
|
|
+ this.queryParams.salesId = null;
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ this.salesOptions = [];
|
|
|
+ this.remoteSearchSales('');
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ handleSalesFocus() {
|
|
|
+ if (!this.salesOptions.length) {
|
|
|
+ this.remoteSearchSales('');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleSalesClear() {
|
|
|
+ this.remoteSearchSales('');
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 远程搜索销售:可选先选公司再搜,也可不选公司全局搜
|
|
|
+ */
|
|
|
+ remoteSearchSales(keyword) {
|
|
|
+ this.salesLoading = true;
|
|
|
+ const qp = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 50,
|
|
|
+ memberName: keyword || null,
|
|
|
+ };
|
|
|
+ const companyId = this.lockedCompany ? this.companyId : this.queryParams.companyId;
|
|
|
+ if (companyId) {
|
|
|
+ qp.companyId = companyId;
|
|
|
+ }
|
|
|
+ if (this.queryParams.isDelete !== '' && this.queryParams.isDelete !== undefined && this.queryParams.isDelete !== null) {
|
|
|
+ qp.isDelete = this.queryParams.isDelete;
|
|
|
+ }
|
|
|
+ listRole(qp).then(response => {
|
|
|
+ this.salesOptions = (response.rows || []).map(item => ({
|
|
|
+ ...item,
|
|
|
+ id: this.parseId(item.id)
|
|
|
+ }));
|
|
|
+ }).catch(() => {
|
|
|
+ this.salesOptions = [];
|
|
|
+ }).finally(() => {
|
|
|
+ this.salesLoading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
/**
|
|
|
* 查询客服成员列表
|
|
|
*/
|
|
|
getList() {
|
|
|
this.loading = true;
|
|
|
- let qp = this.queryParams;
|
|
|
- if (this.ignoreIds && this.ignoreIds.length) {
|
|
|
- qp['ignoreIds'] = this.ignoreIds;
|
|
|
- } else {
|
|
|
- delete qp.ignoreIds;
|
|
|
+ let qp = {
|
|
|
+ pageNum: this.queryParams.pageNum,
|
|
|
+ pageSize: this.queryParams.pageSize,
|
|
|
+ };
|
|
|
+ const companyId = this.lockedCompany ? this.companyId : this.queryParams.companyId;
|
|
|
+ if (companyId) {
|
|
|
+ qp.companyId = companyId;
|
|
|
}
|
|
|
- if (this.ids && this.ids.length) {
|
|
|
- qp['ids'] = this.ids;
|
|
|
- } else {
|
|
|
- delete qp.ids;
|
|
|
+ if (this.queryParams.isDelete !== '' && this.queryParams.isDelete !== undefined && this.queryParams.isDelete !== null) {
|
|
|
+ qp.isDelete = this.queryParams.isDelete;
|
|
|
+ }
|
|
|
+ // 选了具体销售则按销售id精确查;否则按公司(或全局)查列表
|
|
|
+ if (this.queryParams.salesId) {
|
|
|
+ qp.ids = [String(this.queryParams.salesId)];
|
|
|
+ } else if (this.ids && this.ids.length) {
|
|
|
+ qp.ids = this.ids;
|
|
|
+ }
|
|
|
+ if (this.ignoreIds && this.ignoreIds.length) {
|
|
|
+ qp.ignoreIds = this.ignoreIds;
|
|
|
}
|
|
|
listRole(qp).then(response => {
|
|
|
this.roleList = response.rows;
|
|
|
this.total = response.total;
|
|
|
this.loading = false;
|
|
|
this.setSelectionStatus();
|
|
|
+ }).catch(() => {
|
|
|
+ this.loading = false;
|
|
|
});
|
|
|
},
|
|
|
// 取消按钮
|
|
|
@@ -163,10 +341,12 @@ export default {
|
|
|
this.queryParams = {
|
|
|
pageNum: this.defaultPageNum,
|
|
|
pageSize: this.defaultPageSize,
|
|
|
- memberName: null,
|
|
|
- roleName: null,
|
|
|
+ companyId: this.companyId || null,
|
|
|
+ salesId: null,
|
|
|
+ isDelete: (this.ids && this.ids.length) ? null : 0,
|
|
|
}
|
|
|
- this.resetForm("form");
|
|
|
+ this.salesOptions = [];
|
|
|
+ this.resetForm("queryForm");
|
|
|
},
|
|
|
/**
|
|
|
* 确定选择
|
|
|
@@ -185,18 +365,12 @@ export default {
|
|
|
this.queryParams.pageNum = 1;
|
|
|
this.getList();
|
|
|
},
|
|
|
- handleQueryEnter(event) {
|
|
|
- // 确保事件对象存在
|
|
|
- if (event && event.preventDefault) {
|
|
|
- event.preventDefault(); // 阻止默认提交行为
|
|
|
- }
|
|
|
- this.handleQuery();
|
|
|
- },
|
|
|
/**
|
|
|
* 重置按钮操作
|
|
|
*/
|
|
|
resetQuery() {
|
|
|
- this.resetForm("queryForm");
|
|
|
+ this.reset();
|
|
|
+ this.remoteSearchSales('');
|
|
|
this.handleQuery();
|
|
|
},
|
|
|
/**
|