|
|
<template>
|
|
|
<div class="businessList flex-column">
|
|
|
<a-row class="business-header padding-10">
|
|
|
|
|
|
<a-col :span="10" class="flexLeft">
|
|
|
<a-button class="mgnLeft" v-for="(item, index) in linkMenus" :key="index" :title="`${item.title}`"
|
|
|
@click="clickLinkPg(item.path)">
|
|
|
<span class="material-icons">{{item.icon}}</span>
|
|
|
</a-button>
|
|
|
<a-button class="mgnLeft" title="交易" @click="addBusiness('add')">
|
|
|
<span class="material-icons">add</span>交易
|
|
|
</a-button>
|
|
|
</a-col>
|
|
|
|
|
|
<a-col :span="14" class="flexRight tabsSearchGrp">
|
|
|
<!-- <div v-if="pgView == 'BusinessTable'">
|
|
|
<a class="mgnLeft">總金額：$250,000，3筆交易</a>
|
|
|
<a-dropdown :trigger="['click']" class="mgnLeft">
|
|
|
<a class="ant-dropdown-link" @click="e => e.preventDefault()">
|
|
|
puppy
|
|
|
<a-icon type="down" />
|
|
|
</a>
|
|
|
<a-menu slot="overlay">
|
|
|
<a-menu-item key="0">
|
|
|
<a href="http://www.alipay.com/">管理有空時間</a>
|
|
|
</a-menu-item>
|
|
|
<a-menu-item key="1">
|
|
|
<a href="http://www.taobao.com/">挑選時間</a>
|
|
|
</a-menu-item>
|
|
|
<a-menu-divider />
|
|
|
<a-menu-item key="3">3rd menu item</a-menu-item>
|
|
|
</a-menu>
|
|
|
</a-dropdown>
|
|
|
<a-button class="mgnLeft" title="在完整畫面中開啟細節">
|
|
|
<span class="material-icons">more_horiz</span>
|
|
|
</a-button>
|
|
|
</div>
|
|
|
<div v-else>
|
|
|
<a-date-picker class="mgnLeft" />
|
|
|
<a-dropdown :trigger="['click']" class="mgnLeft">
|
|
|
<a class="ant-dropdown-link" @click="e => e.preventDefault()">
|
|
|
puppy
|
|
|
<a-icon type="down" />
|
|
|
</a>
|
|
|
<a-menu slot="overlay">
|
|
|
<a-menu-item key="0">
|
|
|
<a href="http://www.alipay.com/">管理有空時間</a>
|
|
|
</a-menu-item>
|
|
|
</a-menu>
|
|
|
</a-dropdown>
|
|
|
</div>
|
|
|
<div v-show="pgView == 'BusinessPrediction'">
|
|
|
<a-button title="往前4個月">
|
|
|
<span class="material-icons">arrow_back</span>
|
|
|
</a-button>
|
|
|
<a-button title="上個月">
|
|
|
<span class="material-icons">arrow_back_ios</span>
|
|
|
</a-button>
|
|
|
<a-button title="今天">今天</a-button>
|
|
|
<a-button title="下個月">
|
|
|
<span class="material-icons">arrow_forward_ios</span>
|
|
|
</a-button>
|
|
|
<a-button title="往後4個月">
|
|
|
<span class="material-icons">arrow_forward</span>
|
|
|
</a-button>
|
|
|
</div> -->
|
|
|
|
|
|
<a-button class="flex" style="margin-left: 8px"
|
|
|
@click="onAddFlow" icon="plus">
|
|
|
添加销售流程
|
|
|
</a-button>
|
|
|
|
|
|
|
|
|
<!-- //选择交易流程的下拉菜单 -->
|
|
|
<a-dropdown>
|
|
|
<a-menu slot="overlay">
|
|
|
<template v-for="(item,index) in businessFlowList" >
|
|
|
<a-menu-item :key="index + 1">
|
|
|
{{ item.name }}
|
|
|
</a-menu-item>
|
|
|
</template>
|
|
|
<template>
|
|
|
<a-menu-item :key="0" @click="clickManageFlowList">
|
|
|
====管理銷售流程====
|
|
|
</a-menu-item>
|
|
|
</template>
|
|
|
|
|
|
<!-- <a-menu-item key="1"> <a-icon type="user" />1st menu item </a-menu-item>
|
|
|
<a-menu-item key="2"> <a-icon type="user" />2nd menu item </a-menu-item>
|
|
|
<a-menu-item key="3"> <a-icon type="user" />3rd item </a-menu-item> -->
|
|
|
</a-menu>
|
|
|
<a-button class="flex" style="margin-left: 8px"> 选择销售流程 <a-icon type="down" /> </a-button>
|
|
|
</a-dropdown>
|
|
|
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
|
|
|
<a-row>
|
|
|
<a-col :span="24">
|
|
|
<router-view v-if="isRouterAlive" />
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
|
|
|
<a-modal
|
|
|
title="管理流程"
|
|
|
:visible="visibleFlowManage"
|
|
|
:confirm-loading="confirmLoading"
|
|
|
@ok="handleOkFlow"
|
|
|
@cancel="handleCancelFlow"
|
|
|
width="70%"
|
|
|
:footer="false"
|
|
|
>
|
|
|
<FlowManage msg="管理流程" :formEditFlow="formEditFlow" @handleOk="handleOkFlow" @handleCancel="handleCancelFlow" />
|
|
|
<!-- -->
|
|
|
</a-modal>
|
|
|
|
|
|
<a-modal
|
|
|
title="增加交易"
|
|
|
:visible="visibleAddBusiness"
|
|
|
:confirm-loading="confirmLoading"
|
|
|
@ok="handleOk"
|
|
|
@cancel="handleCancel"
|
|
|
width="70%"
|
|
|
:footer="false"
|
|
|
>
|
|
|
<AddBusiness msg="增加交易" :formEdit="formEdit"
|
|
|
:show="visibleAddBusiness"
|
|
|
@handleOk="handleOk" @handleCancel="handleCancel" />
|
|
|
</a-modal>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
// import BusinessTable from "@/components/Business/BusinessTable.vue";
|
|
|
// import BusinessProcess from "@/components/Business/BusinessProcess.vue";
|
|
|
// import BusinessPrediction from "@/components/Business/BusinessPrediction.vue";
|
|
|
import AddBusiness from "@/components/Business/AddBusiness.vue";
|
|
|
import FlowManage from "@/components/Business/FlowManage.vue";
|
|
|
// import BusinessProcessDrag from "@/components/Business/BusinessProcessDrag.vue";
|
|
|
// import CalendarView from "@/components/Calendar/CalendarView.vue";
|
|
|
import myButton from '@/components/Common/myButton'
|
|
|
|
|
|
export default {
|
|
|
name: "BusinessList",
|
|
|
components: {
|
|
|
AddBusiness,
|
|
|
// BusinessTable,
|
|
|
// BusinessProcess,
|
|
|
// BusinessPrediction,
|
|
|
// BusinessProcessDrag,
|
|
|
// CalendarView
|
|
|
myButton,
|
|
|
FlowManage
|
|
|
|
|
|
},
|
|
|
provide() {
|
|
|
return {
|
|
|
reload: this.reload
|
|
|
};
|
|
|
},
|
|
|
props: ['msg'],
|
|
|
data() {
|
|
|
return {
|
|
|
isRouterAlive: true,
|
|
|
pgView: "BusinessTable",
|
|
|
//model start
|
|
|
ModalText: "Content of the modal",
|
|
|
visibleFlowManage:false,
|
|
|
visibleAddBusiness: false,
|
|
|
confirmLoading: false,
|
|
|
//model end
|
|
|
//a-tabs start
|
|
|
showSearchGrp:false,
|
|
|
//a-tabs end
|
|
|
linkMenus: [
|
|
|
//{ title: '交易流程顯示', path: '/business/flow',icon:'leaderboard' },
|
|
|
//{ title: '交易流程1顯示', path: '/business/BusinessProcess',icon:'leaderboard' },
|
|
|
{ title: '交易流程顯示', path: '/business/BusinessProcessDrag',icon:'leaderboard' },
|
|
|
{ title: '交易行事曆顯示', path: '/business/BusinessCalendar',icon:'date_range' },
|
|
|
{ title: '交易表格顯示', path: '/business/BusinessTable',icon:'list' },
|
|
|
// { title: '銷售預測', path: '/business/BusinessPrediction',icon:'paid' },
|
|
|
// { title: '增加流程', path: '/business/AddFlow',icon:'paid' },
|
|
|
|
|
|
],
|
|
|
currentPage:'/business/BusinessTable',
|
|
|
formEdit:{},
|
|
|
formEditFlow:{},
|
|
|
};
|
|
|
},
|
|
|
created(){
|
|
|
this.getBusinessDeal();//取得 分页查询商机交易列表 資料
|
|
|
console.log("created")
|
|
|
// setTimeout(() => {
|
|
|
// //this.clearForm();
|
|
|
// }, 1000);
|
|
|
},
|
|
|
computed: {
|
|
|
businessFlowList () {
|
|
|
console.log('计算属性里的 businessFlowList', this.$store.state.business.businessFlowList);
|
|
|
return this.$store.state.business.businessFlowList;
|
|
|
},
|
|
|
// clickLinkPg(val){
|
|
|
// console.log('computed')
|
|
|
// let currentPage ='/business/BusinessTable'
|
|
|
// if(val){
|
|
|
// currentPage = val
|
|
|
// this.$router.push(currentPage);
|
|
|
// }else{
|
|
|
// this.$router.push(currentPage);
|
|
|
// }
|
|
|
// },
|
|
|
},
|
|
|
activated () {
|
|
|
// this.get
|
|
|
},
|
|
|
mounted() {
|
|
|
console.log("mounted")
|
|
|
this.clickLinkPg();
|
|
|
//已进入交易组件，获取交易流程列表的结果
|
|
|
this.getBusinessFlowList();
|
|
|
},
|
|
|
methods: {
|
|
|
reload(){
|
|
|
this.isRouterAlive = false;
|
|
|
this.$nextTick(() => {
|
|
|
this.isRouterAlive = true;
|
|
|
});
|
|
|
},
|
|
|
getBusinessDeal () {//取得客戶標籤資料
|
|
|
let params = {
|
|
|
"page": {
|
|
|
"currentPage": 1, //定義目前頁次,後存入store,後面的都找store的 currentPage
|
|
|
"pageSize": 10 //定義目前頁次比數,後存入store,後面的都找store的 pageSize
|
|
|
}
|
|
|
};
|
|
|
this.$store.dispatch('business/getBusinessDeal', params);
|
|
|
},
|
|
|
getBusinessFlowList () {
|
|
|
let params = {
|
|
|
"param": {
|
|
|
"name": "string",
|
|
|
"partnerId": 0
|
|
|
}
|
|
|
};
|
|
|
this.$store.dispatch('business/getBusinessFlowList', params);
|
|
|
},
|
|
|
onAddFlow () {
|
|
|
console.log('添加流程');
|
|
|
this.$router.push('/business/addFlow')
|
|
|
// let param = {
|
|
|
// "addBusinessStageReqList": [
|
|
|
// {
|
|
|
// "defaultProbability": 0,
|
|
|
// "idleDays": 0,
|
|
|
// "idleEnabled": true,
|
|
|
// "name": "string",
|
|
|
// "partnerId": 0,
|
|
|
// "remark": "string",
|
|
|
// "salesFlowId": 0,
|
|
|
// "sort": 0
|
|
|
// }
|
|
|
// ],
|
|
|
// "name": "测试流程" + this.businessFlowList.length,
|
|
|
// "partnerId": 0,
|
|
|
// "probabilityEnabled": true,
|
|
|
// "remark": "string"
|
|
|
// };
|
|
|
// this.$api.businessFlow.addBusinessFlow({ param: param}).then(res => {
|
|
|
// if (res.code != '0') return this.$message.error(res.message);
|
|
|
// // console.log('添加交易流程的接口的结果: ', res);
|
|
|
// setTimeout(() => {
|
|
|
// this.getBusinessFlowList();
|
|
|
// }, 3000);
|
|
|
// })
|
|
|
},
|
|
|
clearForm(){
|
|
|
this.formEdit ={
|
|
|
"companyId":"",
|
|
|
"currencyId": "",
|
|
|
"customerId":"",
|
|
|
"customerName": "",
|
|
|
"dealDate": null,//"2021-11-30 12:00:00",
|
|
|
"emailList": [
|
|
|
{
|
|
|
"id": "0",
|
|
|
"email": "uuu@gmail.com",
|
|
|
"type": "work"
|
|
|
}
|
|
|
],
|
|
|
"money": 0,
|
|
|
"ownerUser": "1",
|
|
|
"phoneList": [
|
|
|
{
|
|
|
"id": "0",
|
|
|
"phone": "09876543",
|
|
|
"type": "work"
|
|
|
}
|
|
|
],
|
|
|
"salesFlowId": 48,
|
|
|
"salesStageId": undefined,
|
|
|
"title": "",
|
|
|
"businessFlowList":this.businessFlowList
|
|
|
}
|
|
|
|
|
|
console.log("formEdit",this.formEdit)
|
|
|
},
|
|
|
clickLinkPg(val){
|
|
|
if(val){
|
|
|
this.currentPage = val;
|
|
|
}
|
|
|
this.$router.push(this.currentPage);
|
|
|
},
|
|
|
clickPgView(val) {
|
|
|
this.pgView = val;
|
|
|
},
|
|
|
//model start
|
|
|
addBusiness(editType) {
|
|
|
this.clearForm();
|
|
|
this.formEdit.editType = editType
|
|
|
console.log("this.formEdit",this.formEdit)
|
|
|
this.visibleAddBusiness = true;
|
|
|
},
|
|
|
handleOk(e) {
|
|
|
this.ModalText = "The modal will be closed after two seconds";
|
|
|
this.confirmLoading = true;
|
|
|
this.getBusinessDeal();
|
|
|
this.reload();
|
|
|
//this.$router.push("/business/BusinessTable");
|
|
|
setTimeout(() => {
|
|
|
this.visibleAddBusiness = false;
|
|
|
this.confirmLoading = false;
|
|
|
}, 1000);
|
|
|
},
|
|
|
handleCancel(e) {
|
|
|
console.log("Clicked cancel button");
|
|
|
this.visibleAddBusiness = false;
|
|
|
},
|
|
|
//model end
|
|
|
clickSearch(){
|
|
|
this.showSearchGrp = !this.showSearchGrp;
|
|
|
},
|
|
|
clickManageFlowList(e){
|
|
|
console.log("e",e)
|
|
|
this.visibleFlowManage = true;
|
|
|
this.businessFlowList.forEach(item=>{
|
|
|
item.key = item.id
|
|
|
})
|
|
|
this.formEditFlow = this.businessFlowList
|
|
|
console.log("this.formEditFlow",this.formEditFlow)
|
|
|
},
|
|
|
handleOkFlow(record){
|
|
|
this.visibleFlowManage = false;
|
|
|
if(record.editType == 'edit'){
|
|
|
setTimeout(() => {
|
|
|
this.$router.push('/business/EditFlow');
|
|
|
}, 800);
|
|
|
}
|
|
|
},
|
|
|
handleCancelFlow(){
|
|
|
this.visibleFlowManage = false;
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style>
|
|
|
</style>
|
|
|
|
