boyue2025/dbd-meeting-html
3
0
Fork 0
mirror of https://gitee.com/elegant_wings/dbd-meeting-html.git synced 2025-06-21 05:39:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

描述：企业管理

Browse Source
This commit is contained in:
SelfRidicule 2024-03-27 16:45:22 +08:00
parent a99c1e0732
commit d815cd1e7f
2 changed files with 281 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

469
src/views/admin/CustomerEdit.vue
View File

@ -1,267 +1,301 @@
<template> <template>
<a-card :body-style="{padding: '24px 32px'}" :bordered="false"> <a-card :body-style="{padding: '24px 32px'}" :bordered='false'>
<a-form @submit="handleSubmit" :form="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 6 }"> <a-form @submit='handleSubmit' :form='form' :label-col='{ span: 4 }' :wrapper-col='{ span: 6 }'>
<a-tabs :defaultActiveKey="defaultActiveKey" @change="callback"> <a-tabs :defaultActiveKey='defaultActiveKey' @change='callback'>
<a-tab-pane tab="客户详情" key="1"> <a-tab-pane tab='企业详情' key='1'>
<a-form-item style="display:none"> <a-form-item style='display:none'>
<a-input v-decorator="['id']"/> <a-input v-decorator="['id']" />
</a-form-item> </a-form-item>
<a-row> <a-row>
<a-col :span="12"> <a-col :span='12'>
<a-form-item :labelCol="labelColHalf" :wrapperCol="wrapperColHalf" label="客户名称"> <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='企业名称'>
<a-input placeholder="客户名称" v-decorator="['name', {rules: [{required: true, message: '请输入客户名称'}]}]" /> <a-input placeholder='企业名称'
v-decorator="['name', {rules: [{required: true, message: '请输入企业名称'}]}]" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span='12'>
<a-form-item :labelCol="labelColHalf" :wrapperCol="wrapperColHalf" label="简称"> <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='简称'>
<a-input placeholder="简称" v-decorator="['shortName']" /> <a-input placeholder='简称' v-decorator="['shortName']" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span='12'>
<a-form-item :labelCol="labelColHalf" :wrapperCol="wrapperColHalf" label="客户类型"> <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='企业类型'>
<a-select v-decorator="['type', {initialValue:'COMPANY',rules: [{required: true, message: '请选择客户类型'}]}]"> <a-select
<a-select-option value="COMPANY">公司</a-select-option> v-decorator="['type', {initialValue:'COMPANY',rules: [{required: true, message: '请选择企业类型'}]}]">
<a-select-option value="PERSON">个人</a-select-option> <a-select-option value='COMPANY'>公司</a-select-option>
<a-select-option value='PERSON'>个人</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span='12'>
<a-form-item :labelCol="labelColHalf" :wrapperCol="wrapperColHalf" label="客户状态"> <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='企业状态'>
<a-select v-decorator="['customerStatus', {initialValue:'DEAL',rules: [{required: true, message: '请选择客户状态'}]}]"> <a-select
<a-select-option value="POTENTIAL">潜在客户</a-select-option> v-decorator="['customerStatus', {initialValue:'DEAL',rules: [{required: true, message: '请选择企业状态'}]}]">
<a-select-option value="PURPOSE">意向客户</a-select-option> <a-select-option value='POTENTIAL'>潜在企业</a-select-option>
<a-select-option value="DEAL">成交客户</a-select-option> <a-select-option value='PURPOSE'>意向企业</a-select-option>
<a-select-option value="LOSE">流失客户</a-select-option> <a-select-option value='DEAL'>成交企业</a-select-option>
<a-select-option value='LOSE'>流失企业</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12">
<a-form-item :labelCol="labelColHalf" :wrapperCol="wrapperColHalf" label="所属行业"> <a-col :span='12'>
<a-input placeholder="所属行业" v-decorator="['sector']" /> <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='楼层'>
<a-select v-decorator="['buildId',{rules: [{ required: true, message: '请选择所属楼层' }]}]"
placeholder='所属楼层' @change='getRoomList'>
<a-select-option v-for='item in floorList' :key='item.id' :value='item.id'>
{{ item.floorName }}
</a-select-option>
</a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span='12'>
<a-form-item :labelCol="labelColHalf" :wrapperCol="wrapperColHalf" label="所属国家"> <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='房间'>
<a-input placeholder="所属国家" v-decorator="['country']" /> <a-select v-decorator="['roomId',{rules: [{ required: true, message: '选择所属房间' }]}]"
placeholder='所属房间'>
<a-select-option v-for='item in roomList' :key='item.id' :value='item.id'>
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12">
<a-form-item :labelCol="labelColHalf" :wrapperCol="wrapperColHalf" label="过程管理">
<a-col :span='12'>
<a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='所属行业'>
<a-input placeholder='所属行业' v-decorator="['sector']" />
</a-form-item>
</a-col>
<a-col :span='12'>
<a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='所属国家'>
<a-input placeholder='所属国家' v-decorator="['country']" />
</a-form-item>
</a-col>
<a-col :span='12'>
<a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='过程管理'>
<a-select v-decorator="['process']"> <a-select v-decorator="['process']">
<a-select-option value="FIRST_VISIT">初次拜访</a-select-option> <a-select-option value='FIRST_VISIT'>初次拜访</a-select-option>
<a-select-option value="NEED_GUID">需求引导分析</a-select-option> <a-select-option value='NEED_GUID'>需求引导分析</a-select-option>
<a-select-option value="COMPETE">竞争阶段</a-select-option> <a-select-option value='COMPETE'>竞争阶段</a-select-option>
<a-select-option value="PREDETERMINE">预定阶段</a-select-option> <a-select-option value='PREDETERMINE'>预定阶段</a-select-option>
<a-select-option value="CONTRACT">合同阶段</a-select-option> <a-select-option value='CONTRACT'>合同阶段</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span='12'>
<a-form-item :labelCol="labelColHalf" :wrapperCol="wrapperColHalf" label="联系人"> <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='联系人'>
<a-input placeholder="联系人" v-decorator="['contacts']" /> <a-input placeholder='联系人' v-decorator="['contacts']" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span='12'>
<a-form-item :labelCol="labelColHalf" :wrapperCol="wrapperColHalf" label="联系电话"> <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='联系电话'>
<a-input placeholder="联系电话" v-decorator="['phone']" /> <a-input placeholder='联系电话' v-decorator="['phone']" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span='12'>
<a-form-item :labelCol="labelColHalf" :wrapperCol="wrapperColHalf" label="邮箱"> <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='邮箱'>
<a-input placeholder="邮箱" v-decorator="['email']" /> <a-input placeholder='邮箱' v-decorator="['email']" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span='12'>
<a-form-item :labelCol="labelColHalf" :wrapperCol="wrapperColHalf" label="统一信用代码"> <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='统一信用代码'>
<a-input placeholder="统一信用代码" v-decorator="['creditNo']" /> <a-input placeholder='统一信用代码' v-decorator="['creditNo']" />
<a-button type="primary" @click="getQiXinBasicInfo">同步工商数据</a-button> <a-button type='primary' @click='getQiXinBasicInfo'>同步工商数据</a-button>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span='12'>
<a-form-item :labelCol="labelColHalf" :wrapperCol="wrapperColHalf" label="邮编"> <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='邮编'>
<a-input placeholder="邮编" v-decorator="['postalCode']" /> <a-input placeholder='邮编' v-decorator="['postalCode']" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="24"> <a-col :span='24'>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="通讯地址"> <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='通讯地址'>
<a-input placeholder="通讯地址" v-decorator="['mailAddress']" /> <a-input placeholder='通讯地址' v-decorator="['mailAddress']" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="24"> <a-col :span='24'>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上传公司头像" extra="尺寸建议：宽160px，高160px"> <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='上传公司头像'
extra='尺寸建议：宽160px，高160px'>
<a-upload <a-upload
v-decorator="['headImg']" v-decorator="['headImg']"
list-type="picture-card" list-type='picture-card'
class="avatar-uploader" class='avatar-uploader'
:show-upload-list="false" :show-upload-list='false'
:action="uploadUrl" :action='uploadUrl'
:headers="headers" :headers='headers'
:before-upload="beforeUpload" :before-upload='beforeUpload'
@change="handleChange" @change='handleChange'
> >
<img v-if="imageUrl" :src="imageUrl" style="width: 102px; height: 102px" /> <img v-if='imageUrl' :src='imageUrl' style='width: 102px; height: 102px' />
<div v-else> <div v-else>
<a-icon :type="loading ? 'loading' : 'plus'" /> <a-icon :type="loading ? 'loading' : 'plus'" />
<div class="ant-upload-text"> 上传 </div> <div class='ant-upload-text'> 上传</div>
</div> </div>
</a-upload> </a-upload>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="24"> <a-col :span='24'>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上传照片墙"> <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='上传照片墙'>
<a-upload <a-upload
v-decorator="['bannerImages', {rules: [{ required: false, message: '上传照片墙' }]}]" v-decorator="['bannerImages', {rules: [{ required: false, message: '上传照片墙' }]}]"
list-type="picture-card" list-type='picture-card'
class="avatar-uploader" class='avatar-uploader'
:file-list="fileList" :file-list='fileList'
:action="uploadUrl" :action='uploadUrl'
:headers="headers" :headers='headers'
@preview="handlePreview" @preview='handlePreview'
@change="handleChangeFileList" @change='handleChangeFileList'
> >
<div v-if="fileList.length < 4"> <div v-if='fileList.length < 4'>
<a-icon type="plus" /> <a-icon type='plus' />
<div class="ant-upload-text"> 上传 </div> <div class='ant-upload-text'> 上传</div>
</div> </div>
</a-upload> </a-upload>
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel"> <a-modal :visible='previewVisible' :footer='null' @cancel='handleCancel'>
<img style="width: 100%" :src="previewImage" /> <img style='width: 100%' :src='previewImage' />
</a-modal> </a-modal>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="8"> <a-col :span='8'>
<a-form-item :labelCol="labelColOneThird" :wrapperCol="wrapperColOneThird" label="渠道类型"> <a-form-item :labelCol='labelColOneThird' :wrapperCol='wrapperColOneThird' label='渠道类型'>
<a-select v-decorator="['channelType']"> <a-select v-decorator="['channelType']">
<a-select-option value="AGENT">中介公司</a-select-option> <a-select-option value='AGENT'>中介公司</a-select-option>
<a-select-option value="AD">广告</a-select-option> <a-select-option value='AD'>广告</a-select-option>
<a-select-option value="COOPERATE">合作推荐</a-select-option> <a-select-option value='COOPERATE'>合作推荐</a-select-option>
<a-select-option value="MY_CHANNEL">自开发渠道</a-select-option> <a-select-option value='MY_CHANNEL'>自开发渠道</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="8"> <a-col :span='8'>
<a-form-item :labelCol="labelColOneThird" :wrapperCol="wrapperColOneThird" label="渠道名称"> <a-form-item :labelCol='labelColOneThird' :wrapperCol='wrapperColOneThird' label='渠道名称'>
<a-input placeholder="渠道名称" v-decorator="['channelName']" /> <a-input placeholder='渠道名称' v-decorator="['channelName']" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="8"> <a-col :span='8'>
<a-form-item :labelCol="labelColOneThird" :wrapperCol="wrapperColOneThird" label="是否黑名单"> <a-form-item :labelCol='labelColOneThird' :wrapperCol='wrapperColOneThird' label='是否黑名单'>
<a-switch :checked="customerForm.isBlacklist" @change="onChangeBlacklist" v-decorator="['isBlacklist']" /> <a-switch :checked='customerForm.isBlacklist' @change='onChangeBlacklist'
v-decorator="['isBlacklist']" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="24"> <a-col :span='24'>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperColOneThird" label="客户备注"> <a-form-item :labelCol='labelCol' :wrapperCol='wrapperColOneThird' label='企业备注'>
<a-input placeholder="客户备注" v-decorator="['remark']" /> <a-input placeholder='企业备注' v-decorator="['remark']" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="24"> <a-col :span='24'>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="工商注册号"> <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='工商注册号'>
<a-input placeholder="工商注册号" v-decorator="['regNo']" /> <a-input placeholder='工商注册号' v-decorator="['regNo']" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span='12'>
<a-form-item :labelCol="labelColHalf" :wrapperCol="wrapperColHalf" label="组织机构代码"> <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='组织机构代码'>
<a-input placeholder="组织机构代码" v-decorator="['orgNo']" /> <a-input placeholder='组织机构代码' v-decorator="['orgNo']" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span='12'>
<a-form-item :labelCol="labelColHalf" :wrapperCol="wrapperColHalf" label="法人名"> <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='法人名'>
<a-input placeholder="法人名" v-decorator="['operName']" /> <a-input placeholder='法人名' v-decorator="['operName']" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span='12'>
<a-form-item :labelCol="labelColHalf" :wrapperCol="wrapperColHalf" label="经营状态"> <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='经营状态'>
<a-input placeholder="经营状态" v-decorator="['status']" /> <a-input placeholder='经营状态' v-decorator="['status']" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span='12'>
<a-form-item :labelCol="labelColHalf" :wrapperCol="wrapperColHalf" label="公司类型(企业性质)"> <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='公司类型(企业性质)'>
<a-input placeholder="公司类型(企业性质)" v-decorator="['econKind']" /> <a-input placeholder='公司类型(企业性质)' v-decorator="['econKind']" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span='12'>
<a-form-item :labelCol="labelColHalf" :wrapperCol="wrapperColHalf" label="注册资金"> <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='注册资金'>
<a-input placeholder="注册资金" v-decorator="['registCapi']" /> <a-input placeholder='注册资金' v-decorator="['registCapi']" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span='12'>
<a-form-item :labelCol="labelColHalf" :wrapperCol="wrapperColHalf" label="成立日期"> <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='成立日期'>
<a-date-picker @change="onChange" v-decorator="['startDate']" placeholder="成立日期" /> <a-date-picker @change='onChange' v-decorator="['startDate']" placeholder='成立日期' />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span='12'>
<a-form-item :labelCol="labelColHalf" :wrapperCol="wrapperColHalf" label="营业结束日期"> <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='营业结束日期'>
<a-date-picker @change="onChange" v-decorator="['endDate']" placeholder="营业结束日期" /> <a-date-picker @change='onChange' v-decorator="['endDate']" placeholder='营业结束日期' />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span='12'>
<a-form-item :labelCol="labelColHalf" :wrapperCol="wrapperColHalf" label="登记机关"> <a-form-item :labelCol='labelColHalf' :wrapperCol='wrapperColHalf' label='登记机关'>
<a-input placeholder="登记机关" v-decorator="['belongOrg',{rules: [{required: true, message: '请选择登记机关'}]}]" /> <a-input placeholder='登记机关'
v-decorator="['belongOrg',{rules: [{required: true, message: '请选择登记机关'}]}]" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="24"> <a-col :span='24'>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="注册地址"> <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='注册地址'>
<a-input placeholder="注册地址" v-decorator="['address',{rules: [{required: true, message: '请选择注册地址'}]}]" /> <a-input placeholder='注册地址'
v-decorator="['address',{rules: [{required: true, message: '请选择注册地址'}]}]" />
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="24"> <a-col :span='24'>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="经营范围"> <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='经营范围'>
<!-- <a-input placeholder="经营范围" v-decorator="['scope']" /> --> <!-- <a-input placeholder="经营范围" v-decorator="['scope']" /> -->
<a-textarea placeholder="经营范围" v-decorator="['scope']" :autoSize="{ minRows: 3, maxRows: 5 }"></a-textarea> <a-textarea placeholder='经营范围' v-decorator="['scope']"
:autoSize='{ minRows: 3, maxRows: 5 }'></a-textarea>
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-row> </a-row>
<a-form-item :wrapperCol="{ span: 24 }" style="text-align: center"> <a-form-item :wrapperCol='{ span: 24 }' style='text-align: center'>
<a-button htmlType="submit" type="primary">提交</a-button> <a-button htmlType='submit' type='primary'>提交</a-button>
<a-button icon="rollback" style="margin-left: 8px" @click="rollback">关闭</a-button> <a-button icon='rollback' style='margin-left: 8px' @click='rollback'>关闭</a-button>
</a-form-item> </a-form-item>
</a-tab-pane> </a-tab-pane>
<a-tab-pane tab="关联合同" key="2" forceRender v-if="$route.query.customerId"> <a-tab-pane tab='关联合同' key='2' forceRender v-if='$route.query.customerId'>
<div style="margin: 10px"> <div style='margin: 10px'>
<a-button type="primary" @click="navContract" >新增合同</a-button> <a-button type='primary' @click='navContract'>新增合同</a-button>
</div> </div>
<a-table <a-table
:pagination="false" :pagination='false'
:columns="contractColumns" :columns='contractColumns'
:dataSource="contractData" :dataSource='contractData'
rowKey="id" rowKey='id'
> >
<div slot="sn" slot-scope="text, record" style="cursor:pointer;color:#1890ff" @click="handleDetail(record.id)"> <div slot='sn' slot-scope='text, record' style='cursor:pointer;color:#1890ff'
@click='handleDetail(record.id)'>
<span>{{ text }}</span> <span>{{ text }}</span>
</div> </div>
<span slot="serial" slot-scope="text, record, index"> <span slot='serial' slot-scope='text, record, index'>
{{ index + 1 }} {{ index + 1 }}
</span> </span>
<span slot="status" slot-scope="text"> <span slot='status' slot-scope='text'>
{{ text | statusFilter }} {{ text | statusFilter }}
</span> </span>
</a-table> </a-table>
</a-tab-pane> </a-tab-pane>
<a-tab-pane tab="联系人" key="3" v-if="$route.query.customerId"> <a-tab-pane tab='联系人' key='3' v-if='$route.query.customerId'>
<div style="margin: 10px"> <div style='margin: 10px'>
<a-button type="primary" @click="$refs.contactModal.add({ customerId: $route.query.customerId })">新建联系人</a-button> <a-button type='primary' @click='$refs.contactModal.add({ customerId: $route.query.customerId })'>
新建联系人
</a-button>
</div> </div>
<a-table :pagination="false" :columns="contactsItemColumns" :dataSource="contactsItemData" rowKey="id"> <a-table :pagination='false' :columns='contactsItemColumns' :dataSource='contactsItemData' rowKey='id'>
<template slot="operation" slot-scope="text, record"> <template slot='operation' slot-scope='text, record'>
<!-- <a-button type="link" @click="$refs.contactModal.add(record)">编辑</a-button>--> <!-- <a-button type="link" @click="$refs.contactModal.add(record)">编辑</a-button>-->
<!-- <a-divider type="vertical" />--> <!-- <a-divider type="vertical" />-->
<a-popconfirm @confirm="handleDeleteContact(record)"> <a-popconfirm @confirm='handleDeleteContact(record)'>
<template slot="title"> <template slot='title'>
<span>确定删除 {{ record.name }} 吗？</span> <span>确定删除 {{ record.name }} 吗？</span>
</template> </template>
<a-icon slot="icon" type="question-circle-o" style="color: red" /> <a-icon slot='icon' type='question-circle-o' style='color: red' />
<a-button type="link">删除</a-button> <a-button type='link'>删除</a-button>
</a-popconfirm> </a-popconfirm>
</template> </template>
</a-table> </a-table>
</a-tab-pane> </a-tab-pane>
<a-tab-pane tab="相关文件" key="4" v-if="$route.query.customerId"> <a-tab-pane tab='相关文件' key='4' v-if='$route.query.customerId'>
<customer-attachment-list :customer-id="$route.query.customerId"></customer-attachment-list> <customer-attachment-list :customer-id='$route.query.customerId'></customer-attachment-list>
</a-tab-pane> </a-tab-pane>
</a-tabs> </a-tabs>
</a-form> </a-form>
<customer-contacts-modal ref="contactModal" @ok="handleContactSaved"/> <customer-contacts-modal ref='contactModal' @ok='handleContactSaved' />
</a-card> </a-card>
</template> </template>
@ -269,7 +303,18 @@
import moment from 'moment' import moment from 'moment'
import storage from 'store' import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types' import { ACCESS_TOKEN } from '@/store/mutation-types'
import { saveCustomer, getCustomer, getQiXinBasicInfo, getCustomerContactsList,getStaffList, delCustomerContacts } from '@/api/admin/customer' import {
saveCustomer,
getCustomer,
getQiXinBasicInfo,
getCustomerContactsList,
getStaffList,
delCustomerContacts
} from '@/api/admin/customer'
import {
getFloorList,
getRoomListByFloorId
} from '@/api/admin/meeting/roomContent'
import { getCustomerContractList } from '@/api/admin/customerContract' import { getCustomerContractList } from '@/api/admin/customerContract'
import CustomerContactsModal from './modules/CustomerContactsModal.vue' import CustomerContactsModal from './modules/CustomerContactsModal.vue'
import CustomerAttachmentList from './modules/CustomerAttachmentList.vue' import CustomerAttachmentList from './modules/CustomerAttachmentList.vue'
@ -281,7 +326,7 @@ export default {
CustomerContactsModal, CustomerContactsModal,
CustomerAttachmentList CustomerAttachmentList
}, },
data () { data() {
return { return {
id: '', id: '',
defaultActiveKey: '1', defaultActiveKey: '1',
@ -326,11 +371,11 @@ export default {
contactsItemColumns: [ contactsItemColumns: [
{ {
title: '昵称', title: '昵称',
dataIndex: 'username', dataIndex: 'username'
}, },
{ {
title: '手机号', title: '手机号',
dataIndex: 'mobile', dataIndex: 'mobile'
}, },
{ {
title: '操作', title: '操作',
@ -375,11 +420,13 @@ export default {
loading: false, loading: false,
imageUrl: '', imageUrl: '',
// form // form
form: this.$form.createForm(this) form: this.$form.createForm(this),
floorList: [],
roomList: [],
} }
}, },
filters: { filters: {
statusFilter (type) { statusFilter(type) {
const statusMap = { const statusMap = {
'DRAFT': '草稿', 'DRAFT': '草稿',
'APPROVING': '待审批', 'APPROVING': '待审批',
@ -393,24 +440,45 @@ export default {
return statusMap[type] return statusMap[type]
} }
}, },
created () { created() {
this.id = this.$route.query.customerId this.id = this.$route.query.customerId
if (this.$route.query.types) { if (this.$route.query.types) {
this.defaultActiveKey = '2' this.defaultActiveKey = '2'
} }
this.handleInit() this.handleInit()
// 获取楼层
this.getFloorDataList();
}, },
methods: { methods: {
handleDetail (id) { // 获取楼层
this.$router.push({ name: 'customerContractDetailModal', query: { id: id, customerId: this.$route.query.customerId, url: 'customerEdit' } }) getFloorDataList() {
getFloorList().then((res) => {
this.floorList = res.data
})
}, },
navContract (e) { // 获取房间
getRoomList(value) {
let param = {
'buildingDetailId': value,
'type': 0
}
getRoomListByFloorId(param).then((res) => {
this.roomList = res.data
})
},
handleDetail(id) {
this.$router.push({
name: 'customerContractDetailModal',
query: { id: id, customerId: this.$route.query.customerId, url: 'customerEdit' }
})
},
navContract(e) {
this.$router.push({ name: 'customerContractEdit', query: { customerId: this.id, url: 'customerEdit' } }) this.$router.push({ name: 'customerContractEdit', query: { customerId: this.id, url: 'customerEdit' } })
}, },
onChangeBlacklist (checked) { onChangeBlacklist(checked) {
this.customerForm.isBlacklist = checked this.customerForm.isBlacklist = checked
}, },
getQiXinBasicInfo () { getQiXinBasicInfo() {
var keyword = this.form.getFieldValue('creditNo') var keyword = this.form.getFieldValue('creditNo')
getQiXinBasicInfo({ 'keyword': keyword }).then(res => { getQiXinBasicInfo({ 'keyword': keyword }).then(res => {
if (res.code === 0) { if (res.code === 0) {
@ -424,11 +492,18 @@ export default {
} }
}) })
}, },
handleInit () { handleInit() {
const { customerId } = this.$route.query const { customerId } = this.$route.query
if (customerId) { if (customerId) {
getCustomer(customerId).then(res => { getCustomer(customerId).then(res => {
this.customerForm = res this.customerForm = res
// 房间
if (this.customerForm.roomId) {
this.roomList.push({
id: this.customerForm.roomId,
name: this.customerForm.roomName
})
}
// 头像 // 头像
if (this.customerForm.headImg) { if (this.customerForm.headImg) {
this.imageUrl = process.env.VUE_APP_API_BASE_URL + this.customerForm.headImg this.imageUrl = process.env.VUE_APP_API_BASE_URL + this.customerForm.headImg
@ -446,11 +521,11 @@ export default {
this.getContastsList() this.getContastsList()
this.getContractList() this.getContractList()
}, },
onChange (date, dateString) { onChange(date, dateString) {
console.log(date, dateString) console.log(date, dateString)
}, },
// handler // handler
handleSubmit (e) { handleSubmit(e) {
e.preventDefault() e.preventDefault()
this.form.validateFields((err, values) => { this.form.validateFields((err, values) => {
if (!err) { if (!err) {
@ -489,20 +564,20 @@ export default {
} }
}) })
}, },
rollback () { rollback() {
this.$router.push('/admin/service/customer') this.$router.push('/admin/service/customer')
}, },
// 联系人列表 // 联系人列表
getContastsList () { getContastsList() {
let param = { let param = {
customerId: this.$route.query.customerId customerId: this.$route.query.customerId
} }
getStaffList(param).then(res =>{ getStaffList(param).then(res => {
this.contactsItemData =res.rows this.contactsItemData = res.rows
}) })
}, },
// 合同列表 // 合同列表
getContractList () { getContractList() {
getCustomerContractList({ customerId: this.$route.query.customerId }).then(res => { getCustomerContractList({ customerId: this.$route.query.customerId }).then(res => {
// console.log(res) // console.log(res)
if (res.code === 0) { if (res.code === 0) {
@ -511,11 +586,11 @@ export default {
}) })
}, },
// 新增联系人回调 // 新增联系人回调
handleContactSaved () { handleContactSaved() {
this.getContastsList() this.getContastsList()
}, },
// 删除联系人 // 删除联系人
handleDeleteContact (contactInfo) { handleDeleteContact(contactInfo) {
delCustomerContacts({ ids: contactInfo.id }).then(res => { delCustomerContacts({ ids: contactInfo.id }).then(res => {
if (res.code === 0) { if (res.code === 0) {
this.$message.success('删除成功') this.$message.success('删除成功')
@ -531,7 +606,7 @@ export default {
}) })
}, },
beforeUpload (file) { beforeUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
if (!isJpgOrPng) { if (!isJpgOrPng) {
this.$message.error('You can only upload JPG file!') this.$message.error('You can only upload JPG file!')
@ -542,7 +617,7 @@ export default {
} }
return isJpgOrPng && isLt2M return isJpgOrPng && isLt2M
}, },
handleChange (info) { handleChange(info) {
if (info.file.status === 'uploading') { if (info.file.status === 'uploading') {
this.loading = true this.loading = true
return return
@ -563,32 +638,32 @@ export default {
}) })
} }
}, },
async handlePreview (file) { async handlePreview(file) {
if (!file.url && !file.preview) { if (!file.url && !file.preview) {
file.preview = await getBase64FileList(file.originFileObj) file.preview = await getBase64FileList(file.originFileObj)
} }
this.previewImage = file.url || file.preview this.previewImage = file.url || file.preview
this.previewVisible = true this.previewVisible = true
}, },
handleCancel () { handleCancel() {
this.previewVisible = false this.previewVisible = false
}, },
// 上传照片墙 // 上传照片墙
handleChangeFileList ({ fileList }) { handleChangeFileList({ fileList }) {
this.fileList = fileList this.fileList = fileList
} }
} }
} }
// 上传头像 // 上传头像
function getBase64 (img, callback) { function getBase64(img, callback) {
const reader = new FileReader() const reader = new FileReader()
reader.addEventListener('load', () => callback(reader.result)) reader.addEventListener('load', () => callback(reader.result))
reader.readAsDataURL(img) reader.readAsDataURL(img)
} }
// 上传照片墙 // 上传照片墙
function getBase64FileList (file) { function getBase64FileList(file) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const reader = new FileReader() const reader = new FileReader()
reader.readAsDataURL(file) reader.readAsDataURL(file)
@ -599,18 +674,18 @@ function getBase64FileList (file) {
</script> </script>
<style> <style>
.avatar-uploader>.ant-upload { .avatar-uploader > .ant-upload {
width: 102px; width: 102px;
height: 102px; height: 102px;
} }
.ant-upload-select-picture-card i { .ant-upload-select-picture-card i {
font-size: 32px; font-size: 32px;
color: #999; color: #999;
} }
.ant-upload-select-picture-card .ant-upload-text { .ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px; margin-top: 8px;
color: #666; color: #666;
} }
</style> </style>

18
src/views/admin/CustomerList.vue
View File

@ -4,8 +4,8 @@
<a-form layout="inline"> <a-form layout="inline">
<a-row :gutter="48"> <a-row :gutter="48">
<a-col :md="5" :sm="15"> <a-col :md="5" :sm="15">
<a-form-item label="客户名称"> <a-form-item label="企业名称">
<a-input placeholder="请输入客户名称" v-model="queryParam.name"/> <a-input placeholder="请输入企业名称" v-model="queryParam.name"/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :md="5" :sm="15"> <a-col :md="5" :sm="15">
@ -93,16 +93,16 @@ export default {
fixed: 'left' fixed: 'left'
}, },
{ {
title: '客户名称', title: '企业名称',
dataIndex: 'name' dataIndex: 'name'
}, },
{ {
title: '客户类型', title: '企业类型',
dataIndex: 'type', dataIndex: 'type',
scopedSlots: { customRender: 'type' } scopedSlots: { customRender: 'type' }
}, },
{ {
title: '客户状态', title: '企业状态',
dataIndex: 'customerStatus', dataIndex: 'customerStatus',
scopedSlots: { customRender: 'customerStatus' } scopedSlots: { customRender: 'customerStatus' }
}, },
@ -180,10 +180,10 @@ export default {
}, },
customerStatusFilter (customerStatus) { customerStatusFilter (customerStatus) {
const customerStatusMap = { const customerStatusMap = {
'POTENTIAL': '潜在客户', 'POTENTIAL': '潜在企业',
'PURPOSE': '意向客户', 'PURPOSE': '意向企业',
'DEAL': '成交客户', 'DEAL': '成交企业',
'LOSE': '流失客户' 'LOSE': '流失企业'
} }
return customerStatusMap[customerStatus] return customerStatusMap[customerStatus]
} }