realty/virgo.wzfrontend/console/src/views/work/crm/customer.vue

<template>
	<div class="hui-flex hui-content">
		<div class="customer-test">
			<div class="test-item" v-for="(item,index) in $field.field.customerType" :key="item.id">
				<div class="name">{{item.name}}</div>
				<div class="label alibaba color-cyan">{{countItem(item)}}</div>
			</div>
		</div>
		<div class="customer-line"></div>
		<div class="hui-content-title">
			<div class="hui-title-item active">客户列表</div>
		</div>
		<div class="hui-flex-box hui-flex hui-table">
			<list-filter type="customer" @filter="filterInit"></list-filter>
			<div class="hui-content-insert">
				<el-button type="primary" size="medium" @click="insertCustomer">新增客户</el-button>
				<el-button type="info" size="medium" @click="downloadFile">标准模板下载</el-button>
				<el-button type="info" size="medium" @click="$refs.upload.reloadUpload()">批量导入</el-button>
				<customer-upload ref="upload" v-show="false" @changeFile="init"></customer-upload>
			</div>
			<div class="hui-flex-box">
				<el-table :data="tableData" row-key="id" border height="100%">
					<el-table-column label="序号" width="50">
						<template slot-scope="scope">
							<div style="text-align: center;">{{scope.$index + 1}}</div>
						</template>
					</el-table-column>
					<el-table-column label="客户类型">
						<template slot-scope="scope">
							<span>{{$field.findTypeName('customerType',scope.row.type)}}</span>
						</template>
					</el-table-column>
					<el-table-column label="客户名称" prop="name"></el-table-column>
					<el-table-column label="客户行业" prop="customerIndustry"></el-table-column>
					<el-table-column label="需求区间" prop="demand"></el-table-column>
					<el-table-column label="公海客户" width="100">
						<template slot-scope="scope">
							<div class="hui-table-operation">
								<el-switch v-model="scope.row.highSeas" :active-value="1" :inactive-value="2"
									@change="val=>putHighSeas(val,scope.row)">
								</el-switch>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="跟进记录" width="100">
						<template slot-scope="scope">
							<div class="hui-table-operation">
								<span class="table-operation" @click="lookCustomer(scope.row,'followUpRecord')">
									查看
								</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="邀请项目" width="150">
						<template slot-scope="scope">
							<div class="hui-table-operation" v-if="!scope.row.status">
								<span class="table-operation" @click="inviteCustomer(scope.row)">发送邀请</span>
							</div>
							<div class="hui-table-operation" v-if="scope.row.status === 3">
								<span class="table-operation" @click="inviteCustomer(scope.row)">重新邀请</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="邀请状态" width="150">
						<template slot-scope="scope">
							<div v-if="!scope.row.status" class="hui-state">
								<span class="hui-state-bage hui-state-primary"></span>
								<span class="hui-state-label">待邀请</span>
							</div>
							<div v-if="scope.row.status == 1" class="hui-state">
								<span class="hui-state-bage hui-state-info"></span>
								<span class="hui-state-label">邀请中</span>
							</div>
							<div v-if="scope.row.status == 2" class="hui-state">
								<span class="hui-state-bage hui-state-success"></span>
								<span class="hui-state-label">通过邀请</span>
							</div>
							<div v-if="scope.row.status == 3" class="hui-state">
								<span class="hui-state-bage hui-state-error"></span>
								<span class="hui-state-label">拒绝邀请</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="200">
						<template slot-scope="scope">
							<div class="hui-table-operation">
								<span class="table-operation" @click="lookCustomer(scope.row,'customer')">详情</span>
								<span class="table-operation" @click="updateCustomer(scope.row)">编辑</span>
								<span class="table-operation" @click="deleteCustomer(scope.row)">删除</span>
							</div>
						</template>
					</el-table-column>
					<template slot="empty">
						<empty description="暂无数据"></empty>
					</template>
				</el-table>
			</div>
			<div class="hui-content-pagination">
				<el-pagination :page-size="pageSize" :pager-count="9" layout="prev, pager, next" :total="totalCount"
					@current-change="currentChange">
				</el-pagination>
			</div>
		</div>
		<el-dialog :title="isUpdate?'编辑':'新增'" :visible.sync="visible" width="900px" :append-to-body="true">
			<edit v-if="visible" @callback="callback" :isUpdate="isUpdate" :detailId="detailId"></edit>
		</el-dialog>
		<el-drawer :title="type === 'customer'?'客户详情':'跟进列表'" :visible.sync="drawer" :size="400" :append-to-body="true">
			<detail v-if="drawer && type === 'customer'" :detailId="detailId"></detail>
			<follow-up-record-detail v-if="drawer && type === 'followUpRecord'" :detailId="detailId">
			</follow-up-record-detail>
		</el-drawer>
	</div>
</template>

<script>
	import {
		getCustomerListByPage,
		deleteCustomerById,
		updateCustomer,
		getCustomerCount
	} from '@/httpApi/crm'
	import {
		testPhone
	} from '@/httpApi/organization'
	import edit from '@/components/work/crm/customer/edit'
	import detail from '@/components/work/crm/customer/detail'
	import followUpRecordDetail from '@/components/work/crm/customer/followUpRecordDetail'
	import listFilter from '@/components/common/listFilter'
	import customerUpload from '@/components/work/crm/customer/customerUpload'
	import config from '@/config'
	export default {
		data() {
			return {
				tableData: [],
				currPage: 1,
				pageSize: 10,
				totalCount: 0,
				visible: false,
				detailId: '',
				isUpdate: false,
				drawer: false,
				type: 'customer',
				filterOption: {},
				countBox: []
			}
		},
		created() {
			this.init();
		},
		methods: {
			init() {
				let postData = {
					currPage: this.currPage,
					pageSize: this.pageSize,
					organizationId: this.$store.getters.organization.id,
					userId: this.$store.getters.user.id
				}
				postData = Object.assign(postData, this.filterOption);
				getCustomerListByPage(postData).then(res => {
					if (res.state) {
						this.tableData = res.data.dataList;
						this.totalCount = res.data.totalCount;
					}
				})
				getCustomerCount({
					organizationId: this.$store.getters.organization.id,
					userId: this.$store.getters.user.id
				}).then(res => {
					if (res.state) {
						this.countBox = res.data;
					}
				})
			},
			downloadFile() {
				window.location.href = config.baseURL + '/manager/client/downloadModel';
			},
			countItem(item) {
				let list = this.countBox.filter(node => node.type === item.id);
				if (list.length === 0) return 0;
				return list[0].number;
			},
			filterInit(option) {
				this.filterOption = option;
				this.currPage = 1;
				this.init();
			},
			currentChange(currPage) {
				this.currPage = currPage;
				this.init();
			},
			insertCustomer() {
				this.isUpdate = false;
				this.visible = true;
			},
			updateCustomer(val) {
				this.detailId = val.id;
				this.isUpdate = true;
				this.visible = true;
			},
			lookCustomer(val, type) {
				this.detailId = val.id;
				this.type = type;
				this.drawer = true;
			},
			putHighSeas(val, item) {
				updateCustomer({
					id: item.id,
					highSeas: val
				}).then(res => {
					if (res.state) {
						this.init();
						this.$message.success('操作成功');
					}
				})
			},
			inviteCustomer(user) {
				testPhone(user.phone).then(res => {
					if (res.state) {
						this.$confirm('是否邀请该客户至当前项目?', () => {
							this.$msg.send({
								dataId: user.id,
								identityId: 1
							}, {
								messageType: 2,
								userIds: res.data.id
							}).then(node => {
								if (node.state) {
									updateCustomer({
										id: user.id,
										status: 1
									}).then(res => {
										if (res.state) {
											this.init();
											this.$message.success('邀请成功');
										}
									})
								}
							})
						});
					} else {
						this.$message.warning('用户不存在，无法绑定');
					}
				})
			},
			deleteCustomer(val) {
				this.$confirm('确定要删除该客户?', () => {
					deleteCustomerById(val.id).then(res => {
						if (res.state) {
							this.init();
							this.$message.success('操作成功');
						}
					})
				});
			},
			callback(type) {
				if (type === 'init') this.init();
				this.visible = false;
			}
		},
		components: {
			edit,
			detail,
			followUpRecordDetail,
			listFilter,
			customerUpload
		},
	}
</script>

<style lang="scss">
	.customer-test {
		padding: 15px 20px;
		display: flex;

		.test-item {
			border-right: 1px solid $--color-border;
			width: 160px;
			margin-right: 20px;

			.name {
				font-size: 12px;
				opacity: 0.8;
			}

			.label {
				font-size: 16px;
				font-weight: 600;
				padding-top: 5px;
			}
		}
	}

	.customer-line {
		height: 12px;
		background: $--background;
	}
</style>