| | |
|---|
| | | <template> |
|---|
| | | <div class="sales-opportunity"> |
|---|
| | | <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" /> |
|---|
| | | <div class="btn-pager"> |
|---|
| | | <PublicFunctionBtnView |
|---|
| | | :duplicate-check="true" |
|---|
| | | :statistics="true" |
|---|
| | | :custom-funnel="true" |
|---|
| | | :operates-list="operatesList" |
|---|
| | | /> |
|---|
| | | <PagerView class="page" /> |
|---|
| | | <div v-if="isDetail" class="detail-top"> |
|---|
| | | <DetailListCommonBtn :query-class-options="queryClassOptions" /> |
|---|
| | | </div> |
|---|
| | | <TableCommonView ref="tableListRef" :table-list="tableList"> |
|---|
| | | <template slot="tableButton"> |
|---|
| | | <el-table-column label="操作" width="100"> |
|---|
| | | <template slot-scope="scope"> |
|---|
| | | <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button> |
|---|
| | | <el-button type="text" size="small">跟进</el-button> |
|---|
| | | |
|---|
| | | <div class="filter" v-else> |
|---|
| | | <div class="filter-card"> |
|---|
| | | <CommonSearch |
|---|
| | | :show-add="false" |
|---|
| | | :show-download="false" |
|---|
| | | :amount-view="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> |
|---|
| | | </el-table-column> |
|---|
| | | </template> |
|---|
| | | </TableCommonView> |
|---|
| | | </CommonSearch> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="body"> |
|---|
| | | <div class="body-card"> |
|---|
| | | <div class="list-view"> |
|---|
| | | <TableCommonView |
|---|
| | | ref="tableListRef" |
|---|
| | | :table-list="tableList" |
|---|
| | | :select-box="false" |
|---|
| | | @selClientClick="selClientClick" |
|---|
| | | @selContactsClick="selContactsClick" |
|---|
| | | @selCommonClick="selCommonClick" |
|---|
| | | @getSelectArray="getSelectArray" |
|---|
| | | @selTableCol="selTableCol" |
|---|
| | | > |
|---|
| | | <template slot="tableButton"> |
|---|
| | | <el-table-column label="操作" width="120"> |
|---|
| | | <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="deleteItem(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> |
|---|
| | | <!-- 新建/编辑 --> |
|---|
| | | <AddSalesOpportunityDialog v-if="editConfig.visible" :edit-common-config="editConfig" /> |
|---|
| | | <!-- 机会详情 --> |
|---|
| | | <DetailOpportunity v-if="opportunityDeail.visible" :opportunity-detail="opportunityDeail" /> |
|---|
| | | <!-- 客户详情 --> |
|---|
| | | <DetailClientManage v-if="clientDeail.visible" :client-manage-detail="clientDeail" /> |
|---|
| | | <!-- 联系人详情 --> |
|---|
| | | <DetailContacts v-if="contactsDeail.visible" :contacts-detail="contactsDeail" /> |
|---|
| | | <!-- 新建/编辑跟进记录 --> |
|---|
| | | <AddFollowupRecordsDialog v-if="editFollowupConfig.visible" :edit-contacts-config="editFollowupConfig" /> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import AddSalesOpportunityDialog from "@/views/sales/salesOpportunity/AddSalesOpportunityDialog" |
|---|
| | | import { getSaleChanceList, getDelSaleChance } from "@/api/sales/salesOpportunity" |
|---|
| | | import pageMixin from "@/components/makepager/pager/mixin/pageMixin" |
|---|
| | | import DetailOpportunity from "@/views/sales/salesOpportunity/DetailOpportunity" |
|---|
| | | import AddFollowupRecordsDialog from "@/views/client/followupRecords/AddFollowupRecordsDialog" |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: "SalesOpportunity", |
|---|
| | | props: {}, |
|---|
| | | components: { |
|---|
| | | AddSalesOpportunityDialog |
|---|
| | | }, |
|---|
| | | computed: { |
|---|
| | | searchCommonHeight() { |
|---|
| | | return this.$refs.searchCommonView.offsetHeight |
|---|
| | | props: { |
|---|
| | | isDetail: { |
|---|
| | | type: Boolean, |
|---|
| | | default: false |
|---|
| | | }, |
|---|
| | | addConfig: { |
|---|
| | | type: Object, |
|---|
| | | default: () => { |
|---|
| | | return {} |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | mixins: [pageMixin], |
|---|
| | | components: { |
|---|
| | | AddSalesOpportunityDialog, |
|---|
| | | DetailOpportunity, |
|---|
| | | DetailContacts: () => import("@/views/client/contacts/DetailContacts"), |
|---|
| | | DetailClientManage: () => import("@/views/client/client/DetailClientManage"), |
|---|
| | | AddFollowupRecordsDialog |
|---|
| | | }, |
|---|
| | | computed: {}, |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | tableList: {}, |
|---|
| | |
|---|
| | | visible: false, |
|---|
| | | title: "新建", |
|---|
| | | infomation: {} |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | opportunityDeail: { |
|---|
| | | visible: false, |
|---|
| | | infomation: {} |
|---|
| | | }, |
|---|
| | | contactsDeail: { |
|---|
| | | visible: false, |
|---|
| | | infomation: {} |
|---|
| | | }, |
|---|
| | | clientDeail: { |
|---|
| | | visible: false, |
|---|
| | | infomation: {} |
|---|
| | | }, |
|---|
| | | search_map: {}, |
|---|
| | | selValueList: [], |
|---|
| | | editFollowupConfig: { |
|---|
| | | visible: false, |
|---|
| | | title: "新建", |
|---|
| | | infomation: {} |
|---|
| | | }, |
|---|
| | | tableColumn: [ |
|---|
| | | { label: "机会名称", prop: "name", min: 120, isCommonClick: true ,default:true}, // 机会名称 |
|---|
| | | { label: "客户名称", prop: "client_name", min: 90, isClientClick: true }, // 客户名称 |
|---|
| | | { label: "销售机会编号", prop: "number" }, // 销售机会编号 |
|---|
| | | { label: "联系人姓名", prop: "contact_name", min: 100, isContactClick: true }, // 联系人姓名 |
|---|
| | | { label: "销售阶段", prop: "sale_stage_name" }, // 销售阶段 |
|---|
| | | { label: "可能性(%)", prop: "possibility_name" }, // 可能性 |
|---|
| | | { label: "预计成交日期", prop: "expected_time", min: 130 }, // 预计成交日期 |
|---|
| | | { label: "预计合同金额", prop: "projected_amount" }, // 预计合同金额 |
|---|
| | | { label: "预算绝对值", prop: "budget" }, // 预算绝对值 |
|---|
| | | { label: "销售负责人", prop: "member_name" } // 销售负责人 |
|---|
| | | ], |
|---|
| | | showCol:["机会名称", "客户名称", "销售机会编号", "联系人姓名", "销售阶段", "可能性(%)", "预计成交日期", "预计合同金额", "预算绝对值", "销售负责人"] |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | this.setTable() |
|---|
| | | if (!this.isDetail) { |
|---|
| | | this.search_map = {} |
|---|
| | | } else { |
|---|
| | | this.search_map = { |
|---|
| | | [this.addConfig.id_name]: this.addConfig.id |
|---|
| | | } |
|---|
| | | } |
|---|
| | | this.getData(this.search_map) |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | setTable() { |
|---|
| | | this.tableList = { |
|---|
| | | tableInfomation: [ |
|---|
| | | { |
|---|
| | | opportunityName: "123123", |
|---|
| | | customName: "上海铃铛", |
|---|
| | | salesOpportunityNo: "POT205", |
|---|
| | | contactName: "刘总", |
|---|
| | | saleStage: "初期沟通", |
|---|
| | | possible: "A类客户", |
|---|
| | | expectDealDate: "50", |
|---|
| | | expectContractAmount: "2023-05-28", |
|---|
| | | budgetAbsoluteValue: "￥200,000.00", |
|---|
| | | salesHead: "系统管理员" |
|---|
| | | } |
|---|
| | | ], |
|---|
| | | tableColumn: [ |
|---|
| | | { label: "机会名称", prop: "opportunityName", min: 120 }, // 机会名称 |
|---|
| | | { label: "客户名称", prop: "customName", min: 90 }, // 客户名称 |
|---|
| | | { label: "销售机会编号", prop: "salesOpportunityNo" }, // 销售机会编号 |
|---|
| | | { label: "联系人姓名", prop: "contactName", min: 100 }, // 联系人姓名 |
|---|
| | | { label: "销售阶段", prop: "saleStage" }, // 销售阶段 |
|---|
| | | { label: "可能性(%)", prop: "possible" }, // 可能性 |
|---|
| | | { label: "预计成交日期", prop: "expectDealDate" }, // 预计成交日期 |
|---|
| | | { label: "预计合同金额", prop: "expectContractAmount" }, // 预计合同金额 |
|---|
| | | { label: "预算绝对值", prop: "budgetAbsoluteValue" }, // 预算绝对值 |
|---|
| | | { label: "销售负责人", prop: "salesHead" } // 销售负责人 |
|---|
| | | ] |
|---|
| | | selectIndex:true, |
|---|
| | | tableInfomation: [], |
|---|
| | | 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() { |
|---|
| | | this.loading = true |
|---|
| | | await getSaleChanceList({ |
|---|
| | | search_map: this.search_map, |
|---|
| | | page: this.pagerOptions.currPage, |
|---|
| | | pageSize: this.pagerOptions.pageSize |
|---|
| | | }) |
|---|
| | | .then((res) => { |
|---|
| | | console.log(res) |
|---|
| | | if (res.code === 200) { |
|---|
| | | if (res.data.list && res.data.list.length > 0) { |
|---|
| | | const list = res.data.list.map((item) => { |
|---|
| | | return { |
|---|
| | | ...item, |
|---|
| | | client_name: item.client.name, |
|---|
| | | contact_name: item.contact.name, |
|---|
| | | sale_stage_name: item.sale_stage.name, |
|---|
| | | member_name: item.member.username, |
|---|
| | | possibility_name: item.possibility.name |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | this.tableList.tableInfomation = list || [] |
|---|
| | | this.pagerOptions.totalCount = res.data.count |
|---|
| | | } else { |
|---|
| | | this.tableList.tableInfomation = [] |
|---|
| | | } |
|---|
| | | } else { |
|---|
| | | this.tableList.tableInfomation = [] |
|---|
| | | } |
|---|
| | | this.loading = false |
|---|
| | | }) |
|---|
| | | .catch((err) => { |
|---|
| | | console.log(err) |
|---|
| | | this.tableList.tableInfomation = [] |
|---|
| | | this.loading = false |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | // 搜索 |
|---|
| | | onFilterSearch(searchText){ |
|---|
| | | this.search_map.name = searchText ?? '' |
|---|
| | | this.pagerOptions.currPage = 1 |
|---|
| | | this.getData() |
|---|
| | | }, |
|---|
| | | // 新建 |
|---|
| | | addBtnClick() { |
|---|
| | | this.editConfig.visible = true |
|---|
| | | this.editConfig.title = "新建" |
|---|
| | | this.editConfig.infomation = { |
|---|
| | | customName: "", |
|---|
| | | salesOpportunityNo: "POT521", |
|---|
| | | opportunityName: "", |
|---|
| | | contactName: "", |
|---|
| | | businessSource: "", |
|---|
| | | businessType: "", |
|---|
| | | saleStage: "", |
|---|
| | | salesHead: "", |
|---|
| | | oldCustomerMarket: "", |
|---|
| | | competitor: "", |
|---|
| | | possible: "", |
|---|
| | | currency: "", |
|---|
| | | budgetAbsoluteValue: "", |
|---|
| | | expectDealDate: "", |
|---|
| | | expectContractAmount: "", |
|---|
| | | currentState: "", |
|---|
| | | demandPainPoint: "", |
|---|
| | | projectApproval: "", |
|---|
| | | fundBudget: "", |
|---|
| | | decisionMaker: "", |
|---|
| | | decisionFactors: "", |
|---|
| | | decisionFlow: "", |
|---|
| | | programme: "", |
|---|
| | | advantage: "", |
|---|
| | | disadvantage: "", |
|---|
| | | opportunity: "", |
|---|
| | | threaten: "", |
|---|
| | | position: "", |
|---|
| | | map: "", |
|---|
| | | country: "1", |
|---|
| | | province: "1", |
|---|
| | | city: "1", |
|---|
| | | region: "1", |
|---|
| | | notes: "" |
|---|
| | | } |
|---|
| | | this.editConfig.infomation = { city_id: 0, ...this.addConfig,currency:1,} |
|---|
| | | }, |
|---|
| | | // 编辑 |
|---|
| | | handleClick(row) { |
|---|
| | | console.log(row) |
|---|
| | | this.editConfig.visible = true |
|---|
| | | this.editConfig.title = "编辑" |
|---|
| | | this.editConfig.infomation = { |
|---|
| | | customName: "", |
|---|
| | | salesOpportunityNo: "POT521", |
|---|
| | | opportunityName: "", |
|---|
| | | contactName: "", |
|---|
| | | businessSource: "", |
|---|
| | | businessType: "", |
|---|
| | | saleStage: "", |
|---|
| | | salesHead: "", |
|---|
| | | oldCustomerMarket: "", |
|---|
| | | competitor: "", |
|---|
| | | possible: "", |
|---|
| | | currency: "", |
|---|
| | | budgetAbsoluteValue: "", |
|---|
| | | expectDealDate: "", |
|---|
| | | expectContractAmount: "", |
|---|
| | | currentState: "", |
|---|
| | | demandPainPoint: "", |
|---|
| | | projectApproval: "", |
|---|
| | | fundBudget: "", |
|---|
| | | decisionMaker: "", |
|---|
| | | decisionFactors: "", |
|---|
| | | decisionFlow: "", |
|---|
| | | programme: "", |
|---|
| | | advantage: "", |
|---|
| | | disadvantage: "", |
|---|
| | | opportunity: "", |
|---|
| | | threaten: "", |
|---|
| | | position: "", |
|---|
| | | map: "", |
|---|
| | | country: "1", |
|---|
| | | province: "1", |
|---|
| | | city: "1", |
|---|
| | | region: "1", |
|---|
| | | notes: "" |
|---|
| | | this.editConfig.infomation = { ...row } |
|---|
| | | }, |
|---|
| | | // 批量删除 |
|---|
| | | delClick() { |
|---|
| | | if (this.selValueList && this.selValueList.length > 0) { |
|---|
| | | this.$confirm("是否确认删除?", "警告", { |
|---|
| | | confirmButtonText: "确定", |
|---|
| | | cancelButtonText: "取消", |
|---|
| | | type: "warning" |
|---|
| | | }) |
|---|
| | | .then(() => { |
|---|
| | | console.log("dddd") |
|---|
| | | getDelSaleChance({ ids: this.selValueList }).then((response) => { |
|---|
| | | if (response.code === 200) { |
|---|
| | | this.$message.success("删除成功") |
|---|
| | | this.getData() |
|---|
| | | } else { |
|---|
| | | this.$message.warning("删除失败") |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | .catch(() => {}) |
|---|
| | | } else { |
|---|
| | | this.$message.warning("请至少选择一条记录") |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | /** |
|---|
| | | * 单个删除 |
|---|
| | | * @param id 销售机会id |
|---|
| | | */ |
|---|
| | | deleteItem(id) { |
|---|
| | | this.$confirm("是否确认删除?", "警告", { |
|---|
| | | confirmButtonText: "确定", |
|---|
| | | cancelButtonText: "取消", |
|---|
| | | type: "warning" |
|---|
| | | }) |
|---|
| | | .then(() => { |
|---|
| | | getDelSaleChance({ids: [id]}).then((response) => { |
|---|
| | | if (response.code === 200) { |
|---|
| | | this.$message.success("删除成功") |
|---|
| | | this.getData() |
|---|
| | | } else { |
|---|
| | | this.$message.warning("删除失败") |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }) |
|---|
| | | .catch((err) => { |
|---|
| | | if (err!== 'cancel'){ |
|---|
| | | console.error(err) |
|---|
| | | this.$message.warning("删除失败") |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | }, |
|---|
| | | getSelectArray(val) { |
|---|
| | | console.log(val) |
|---|
| | | this.selValueList = [] |
|---|
| | | const list = val.map((item) => { |
|---|
| | | return item.id |
|---|
| | | }) |
|---|
| | | this.selValueList = list |
|---|
| | | }, |
|---|
| | | // 客户名称详情 |
|---|
| | | selClientClick(row) { |
|---|
| | | console.log(row) |
|---|
| | | this.clientDeail.visible = true |
|---|
| | | this.clientDeail.infomation = { |
|---|
| | | ...row.client, |
|---|
| | | client_name: row.client.name, |
|---|
| | | client_level: row.client.client_level.name, |
|---|
| | | client_status: row.client.client_status.name |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // 联系人详情 |
|---|
| | | selContactsClick(row) { |
|---|
| | | console.log(row) |
|---|
| | | this.contactsDeail.visible = true |
|---|
| | | this.contactsDeail.infomation = { |
|---|
| | | ...row.contact, |
|---|
| | | sale_chance_name: row.name, |
|---|
| | | sale_chance_id: row.id, |
|---|
| | | Client: { name: row.client.name, client_status_id: row.client.client_status_id }, |
|---|
| | | client_name: row.name |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | // 机会名称详情 |
|---|
| | | selCommonClick(row) { |
|---|
| | | console.log(row) |
|---|
| | | this.opportunityDeail.visible = true |
|---|
| | | this.opportunityDeail.infomation = { ...row } |
|---|
| | | }, |
|---|
| | | // 跟进 |
|---|
| | | followupClick(row) { |
|---|
| | | console.log(row) |
|---|
| | | this.editFollowupConfig.title = "新建" |
|---|
| | | this.editFollowupConfig.infomation = { |
|---|
| | | ...row, |
|---|
| | | currency:1, |
|---|
| | | number: "", |
|---|
| | | sale_chance_name: row.name, |
|---|
| | | sale_chance_id: row.id |
|---|
| | | } |
|---|
| | | this.editFollowupConfig.infomation.codeStandID='' |
|---|
| | | this.editFollowupConfig.visible = true |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | |
|---|
| | | |
|---|
| | | <!-- Add "scoped" attribute to limit CSS to this component only --> |
|---|
| | | <style lang="scss" scoped> |
|---|
| | | .sales-opportunity { |
|---|
| | | .btn-pager { |
|---|
| | | .sales-opportunity{ |
|---|
| | | height: 100%; |
|---|
| | | overflow: hidden; |
|---|
| | | .filter{ |
|---|
| | | height: 80px; |
|---|
| | | display: flex; |
|---|
| | | .page { |
|---|
| | | margin-left: auto; |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
