| | |
| | | <template> |
| | | <div class="sales-lead"> |
| | | <div class="top"> |
| | | <SearchCommonView |
| | | ref="searchCommonView" |
| | | :query-class-options="queryClassOptions" |
| | | :search-options="searchOptions" |
| | | /> |
| | | <div class="btn-pager"> |
| | | <PublicFunctionBtnView :operates-list="operatesList" /> |
| | | <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> |
| | | <div class="filter"> |
| | | <div class="filter-card"> |
| | | <CommonSearch |
| | | :show-add="false" |
| | | :show-download="false" |
| | | :amount-view="false" |
| | | :show-action-btn="false" |
| | | placeholder="请输入客户名称" |
| | | @searchClick="onFilterSearch" |
| | | > |
| | | <template slot="leftButton"> |
| | | <el-button size="small" type="primary" @click="addBtnClick">新建</el-button> |
| | | <!-- <el-button size="small" @click="delClick">删除</el-button> --> |
| | | </template> |
| | | |
| | | </CommonSearch> |
| | | |
| | | </div> |
| | | </div> |
| | | <TableCommonView ref="tableListRef" :table-list="tableList" @selSalesLeadClick="selSalesLeadClick"> |
| | | <template slot="tableButton"> |
| | | <el-table-column label="操作" width="160"> |
| | | <template slot-scope="scope"> |
| | | <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button> |
| | | <el-button type="text" size="small">跟进</el-button> |
| | | <el-button type="text" size="small">推进</el-button> |
| | | <el-button @click="delClick(scope.row.id)" type="text" size="small">删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </template> |
| | | </TableCommonView> |
| | | |
| | | <div class="body"> |
| | | <div class="body-card"> |
| | | <div class="list-view"> |
| | | <TableCommonView |
| | | ref="tableListRef" |
| | | :table-list="tableList" |
| | | @selSalesLeadClick="selSalesLeadClick" |
| | | @getSelectArray="getSelectArray" |
| | | @selTableCol="selTableCol" |
| | | > |
| | | <template slot="tableButton"> |
| | | <el-table-column label="操作" width="150"> |
| | | <template slot-scope="scope"> |
| | | <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button> |
| | | <!-- <el-button @click="followupClick(scope.row)" type="text" size="small">跟进</el-button> --> |
| | | <el-button @click="advanceClick(scope.row)" type="text" size="small">推进</el-button> |
| | | <el-button @click="delClick(scope.row.id)" type="text" size="small">删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </template> |
| | | </TableCommonView> |
| | | </div> |
| | | <div class="btn-pager"> |
| | | <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 新建/编辑销售线索 --> |
| | | <AddSalesLeadDialog v-if="editSalesLeadConfig.visible" :edit-sales-lead-config="editSalesLeadConfig" /> |
| | | <!-- 导入文件 --> |
| | | <ImportFileDialog v-if="importConfig.visible" :import-file-config="importConfig" /> |
| | | <!-- 详情 --> |
| | | <DetailSalesLead v-if="salesLeadDeail.visible" :sales-lead-detail="salesLeadDeail" /> |
| | | <!-- 新建/编辑跟进记录 --> |
| | | <AddFollowupRecordsDialog v-if="editConfig.visible" :edit-contacts-config="editConfig" /> |
| | | <!-- 推进 --> |
| | | <AdvanceDialog v-if="advanceConfig.visible" :advance-config="advanceConfig" /> |
| | | <!-- 分配 --> |
| | | <HighViewScopeDialog v-if="highViewScopeConfig.visible" :editCommonConfig="highViewScopeConfig" /> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import ImportFileDialog from "@/views/other/commonDialog/ImportFileDialog" |
| | | import { getSalesLeadsList, getDeleteSalesLeads } from "@/api/client/salesLead" |
| | | import DetailSalesLead from "@/views/client/salesLead/DetailSalesLead" |
| | | import AddFollowupRecordsDialog from "@/views/client/followupRecords/AddFollowupRecordsDialog" |
| | | import AdvanceDialog from "@/views/client/salesLead/AdvanceDialog" |
| | | import HighViewScopeDialog from "@/views/other/commonDialog/HighViewScopeDialog" |
| | | |
| | | export default { |
| | | name: "SalesLead", |
| | |
| | | components: { |
| | | AddSalesLeadDialog, |
| | | ImportFileDialog, |
| | | DetailSalesLead |
| | | DetailSalesLead, |
| | | AddFollowupRecordsDialog, |
| | | AdvanceDialog, |
| | | HighViewScopeDialog |
| | | }, |
| | | mixins: [pageMixin], |
| | | computed: {}, |
| | | data() { |
| | | return { |
| | | tableList: {}, |
| | | selValueList: [], |
| | | queryClassOptions: [ |
| | | { value: "1", label: "全部" }, |
| | | { value: "2", label: "广告宣传" }, |
| | |
| | | salesLeadDeail: { |
| | | visible: false, |
| | | infomation: {} |
| | | } |
| | | }, |
| | | editConfig: { |
| | | visible: false, |
| | | title: "新建", |
| | | infomation: {} |
| | | }, |
| | | advanceConfig: { |
| | | visible: false, |
| | | sales_status: 1 |
| | | }, |
| | | search_map: {}, |
| | | highViewScopeConfig: { |
| | | // 分配 |
| | | visible: false, |
| | | infomation: {} |
| | | }, |
| | | tableColumn:[ |
| | | { label: "客户名称", prop: "name", min: 190, isSalesLeadClick: true ,default:true}, // 客户名称 |
| | | { label: "销售线索编号", prop: "number", min: 130 }, // 销售线索编号 |
| | | { label: "联系人姓名", prop: "contact_name", min: 130 }, // 联系人姓名 |
| | | { label: "手机号码", prop: "contact_phone", min: 130 }, // 手机号码 |
| | | { label: "商机来源", prop: "sales_resources", min: 130 }, // 商机来源 |
| | | { label: "省份", prop: "province", min: 130 }, // 省份 |
| | | { label: "城市", prop: "city", min: 130 }, // 城市 |
| | | { label: "负责人", prop: "member_name", min: 130 } // 负责人 |
| | | ], |
| | | showCol:["客户名称","销售线索编号","联系人姓名","手机号码","商机来源","省份","城市","负责人"] |
| | | } |
| | | }, |
| | | created() { |
| | |
| | | methods: { |
| | | setTable() { |
| | | this.tableList = { |
| | | selectIndex: true, |
| | | tableInfomation: [], |
| | | tableColumn: [ |
| | | { label: "客户名称", prop: "name", min: 190, isSalesLeadClick: true }, // 客户名称 |
| | | { label: "销售线索编号", prop: "number", min: 130 }, // 销售线索编号 |
| | | { label: "联系人姓名", prop: "contact_name", min: 130 }, // 联系人姓名 |
| | | { label: "手机号码", prop: "contact_phone", min: 130 }, // 手机号码 |
| | | { label: "商机来源", prop: "sales_sources_id", min: 130 }, // 商机来源 |
| | | { label: "省份", prop: "province", min: 130 }, // 省份 |
| | | { label: "城市", prop: "city", min: 130 }, // 城市 |
| | | { label: "负责人", prop: "member_id", min: 130 } // 负责人 |
| | | ] |
| | | allcol: [], |
| | | showcol: this.showCol, |
| | | tableColumn:this.setColumnVisible(this.showCol) |
| | | } |
| | | this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label); |
| | | this.searchOptions = [] |
| | | for (let i = 0; i < this.tableList.tableColumn.length; i++) { |
| | | const label = this.tableList.tableColumn[i].label |
| | | this.searchOptions.push({ value: (i + 1).toString(), label: label }) |
| | | const value = this.tableList.tableColumn[i].prop |
| | | this.searchOptions.push({ value: value, label: label }) |
| | | } |
| | | }, |
| | | setColumnVisible(showCol){ |
| | | return this.tableColumn.map(ele=>{ |
| | | return { |
| | | ...ele, |
| | | isShowColumn:showCol.includes(ele.label) |
| | | } |
| | | }) |
| | | }, |
| | | selTableCol(val) { |
| | | this.showcol = val; |
| | | this.tableList.tableColumn = this.setColumnVisible(val); |
| | | }, |
| | | // 请求数据 |
| | | async getData() { |
| | | await getSalesLeadsList({ |
| | | keyword: "", |
| | | search_map: this.search_map, |
| | | page: this.pagerOptions.currPage, |
| | | pageSize: this.pagerOptions.pageSize |
| | | }) |
| | |
| | | return { |
| | | ...item, |
| | | province: item.Province.name, |
| | | city: item.City.name |
| | | city: item.City.name, |
| | | sales_resources: item.sales_sources.name, |
| | | member_name: item.member.username |
| | | } |
| | | }) |
| | | this.tableList.tableInfomation = list || [] |
| | |
| | | console.log(err) |
| | | }) |
| | | }, |
| | | onFilterSearch(searchText){ |
| | | this.search_map.name = searchText ?? '' |
| | | this.pagerOptions.currPage = 1 |
| | | this.getData() |
| | | }, |
| | | // 新建 |
| | | addBtnClick() { |
| | | this.editSalesLeadConfig.visible = true |
| | | this.editSalesLeadConfig.title = "新建" |
| | | this.editSalesLeadConfig.infomation = { businessStatus: "新建" } |
| | | this.editSalesLeadConfig.infomation = { businessStatus: "新建", city_id: 0 } |
| | | this.editSalesLeadConfig.visible = true |
| | | }, |
| | | // 编辑 |
| | | handleClick(row) { |
| | | console.log(row) |
| | | this.editSalesLeadConfig.visible = true |
| | | this.editSalesLeadConfig.title = "编辑" |
| | | this.editSalesLeadConfig.infomation = { ...row, businessStatus: "新建" } |
| | | this.editSalesLeadConfig.visible = true |
| | | }, |
| | | // 跟进 |
| | | followupClick(row) { |
| | | this.editConfig.title = "新建" |
| | | this.editConfig.infomation = { sales_leads_name: row.name } |
| | | |
| | | this.editConfig.visible = true |
| | | }, |
| | | // 导入 |
| | | importClitk() { |
| | | this.importConfig.visible = true |
| | | this.importConfig.title = "销售线索" |
| | | }, |
| | | // 分配 |
| | | allocationBtnClick() { |
| | | if (this.selValueList && this.selValueList.length > 0) { |
| | | this.highViewScopeConfig.visible = true |
| | | } else { |
| | | this.$message.warning("请至少选择一条记录") |
| | | } |
| | | }, |
| | | // 删除 |
| | | delClick(id) { |
| | | this.$confirm("是否确认删除?", "警告", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning" |
| | | }) |
| | | .then(function () { |
| | | return getDeleteSalesLeads({ id: id }) |
| | | if(!id){ |
| | | if (this.selValueList && this.selValueList.length == 0) { |
| | | this.$message.warning("请至少选择一条记录") |
| | | return true; |
| | | } |
| | | } |
| | | this.$confirm("是否确认删除?", "警告", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning" |
| | | }) |
| | | .then((response) => { |
| | | if (response.code === 200) { |
| | | this.$message.success("删除成功") |
| | | this.getData() |
| | | } else { |
| | | this.$message.warning("删除失败") |
| | | } |
| | | }) |
| | | .catch(function () {}) |
| | | .then(() => { |
| | | console.log("dddd") |
| | | let params={ids: this.selValueList } |
| | | if(id){ |
| | | params={ids: [id]} |
| | | } |
| | | getDeleteSalesLeads(params).then((response) => { |
| | | if (response.code === 200) { |
| | | this.$message.success("删除成功") |
| | | this.getData() |
| | | } else { |
| | | this.$message.warning("删除失败") |
| | | } |
| | | }) |
| | | }) |
| | | .catch(() => {}) |
| | | }, |
| | | getSelectArray(val) { |
| | | console.log(val) |
| | | this.selValueList = [] |
| | | const list = val.map((item) => { |
| | | return item.id |
| | | }) |
| | | this.selValueList = list |
| | | }, |
| | | // 详情 |
| | | selSalesLeadClick(row) { |
| | | console.log(row) |
| | | this.salesLeadDeail.visible = true |
| | | this.salesLeadDeail.infomation = { ...row } |
| | | }, |
| | | // 推进 |
| | | advanceClick(row) { |
| | | console.log(row) |
| | | this.advanceConfig.visible = true |
| | | this.advanceConfig.sales_status = row.sales_status |
| | | this.advanceConfig.infomation = { ...row } |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | <!-- Add "scoped" attribute to limit CSS to this component only --> |
| | | <style lang="scss" scoped> |
| | | .sales-lead { |
| | | .top { |
| | | margin-bottom: 20px; |
| | | .sales-lead{ |
| | | height: 100%; |
| | | overflow: hidden; |
| | | .filter{ |
| | | height: 80px; |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 12px 20px 0 20px; |
| | | &-card{ |
| | | height: 80px; |
| | | display: flex; |
| | | align-items: center; |
| | | box-sizing: border-box; |
| | | padding: 10px 20px; |
| | | flex: 1; |
| | | border-radius: 12px; |
| | | background-color: #fff; |
| | | } |
| | | } |
| | | .body{ |
| | | box-sizing: border-box; |
| | | padding: 10px 20px; |
| | | border-radius: 12px; |
| | | height: calc(100% - 92px); |
| | | .body-card { |
| | | background-color: #fff; |
| | | border-radius: 12px; |
| | | height: 100%; |
| | | overflow: hidden; |
| | | } |
| | | .list-view { |
| | | height: calc(100% - 60px); |
| | | overflow: hidden; |
| | | } |
| | | .btn-pager { |
| | | display: flex; |
| | | margin-top: 10px; |
| | | .page { |
| | | margin-left: auto; |
| | | } |