You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1526 lines
53 KiB
1526 lines
53 KiB
<template> |
|
<div> |
|
<el-card shadow="hover" |
|
class="mgb20"> |
|
<div class="flex-between"> |
|
<div class="per_title" |
|
v-preventReClick |
|
@click="goback(0)"> |
|
<i class="el-icon-arrow-left"></i> |
|
<span class="per_back">返回</span> |
|
<span v-if="form.customerName || !customerId" |
|
class="per_school" |
|
v-text="isDetail ? form.customerName + '/查看' : (customerId ? form.customerName + '/编辑' : '新增')"></span> |
|
</div> |
|
</div> |
|
</el-card> |
|
|
|
<el-card shadow="hover" |
|
class="card"> |
|
<div class="tabs" |
|
v-if="customerId"> |
|
<a class="item" |
|
v-for="(item, i) in tabs" |
|
:key="i" |
|
:class="{active: i == curTab}" |
|
@click="tabChange(i)">{{ item }}</a> |
|
</div> |
|
<div v-show="curTab === 'tab1'"> |
|
<el-form :model="form" |
|
:rules="rules" |
|
ref="form" |
|
label-width="120px" |
|
class="flex-start-around info" |
|
:disabled="isDetail"> |
|
<el-col :span="6" |
|
style="margin-right: 60px;"> |
|
<el-form-item prop="countries" |
|
label="国家"> |
|
<el-select v-model="form.countries" |
|
clearable |
|
placeholder="请选择国家"> |
|
<el-option v-for="(item,index) in countryList" |
|
:key="index" |
|
:label="item.name" |
|
:value="item.name"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item prop="schoolId" |
|
label="客户名称"> |
|
<div class="flex a-center"> |
|
<el-select v-model="form.schoolId" |
|
filterable |
|
clearable |
|
placeholder="请选择学校" |
|
:disabled="!!customerId" |
|
@change="SchoolChange" |
|
@clear="clearSchool"> |
|
<el-option v-for="(item,index) in schoolList" |
|
:key="index" |
|
:label="item.schoolName" |
|
:value="item.schoolId"></el-option> |
|
</el-select> |
|
<i v-if="!isDetail" |
|
class="el-icon-circle-plus-outline plus-cus" |
|
@click="addCustomer"></i> |
|
<!-- <el-button style="margin-left: 5px" |
|
type="primary" |
|
size="mini" |
|
@click="addCustomer">设置</el-button> --> |
|
</div> |
|
</el-form-item> |
|
<el-form-item prop="cityId" |
|
label="城市"> |
|
<el-select v-model="form.cityId" |
|
placeholder="" |
|
disabled> |
|
<el-option v-for="(item,index) in cityList" |
|
:key="index" |
|
:label="item.cityName" |
|
:value="item.cityId"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item prop="industryId" |
|
label="行业"> |
|
<el-select v-model="form.industryId" |
|
clearable |
|
placeholder="请选择行业" |
|
:disabled="form.industryClassId ? false : true"> |
|
<el-option v-for="(item,index) in industryList" |
|
:key="index" |
|
:label="item.industryName" |
|
:value="item.industryId"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
|
|
<el-form-item prop="account" |
|
label="账号"> |
|
<el-input placeholder="请输入账号" |
|
v-model="form.account"></el-input> |
|
</el-form-item> |
|
<el-form-item label="职务"> |
|
<el-input placeholder="请输入职务名称" |
|
v-model="form.position" |
|
maxlength="11"></el-input> |
|
</el-form-item> |
|
<el-form-item label="产品到期时间"> |
|
<el-date-picker type="date" |
|
disabled |
|
v-model="form.expireDate" |
|
style="width: 100%;" |
|
value-format="yyyy-MM-dd"></el-date-picker> |
|
</el-form-item> |
|
</el-col> |
|
|
|
<el-col :span="6" |
|
style="margin-left: 60px;"> |
|
<el-form-item label="客户类型"> |
|
<el-select v-model="form.customerType" |
|
placeholder="下单后客户类型自动补充" |
|
disabled> |
|
<el-option v-for="(item,index) in customerTypeList" |
|
:key="index" |
|
:label="item.name" |
|
:value="item.value"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item prop="provinceId" |
|
label="省份"> |
|
<el-select v-model="form.provinceId" |
|
placeholder="" |
|
disabled> |
|
<el-option v-for="(item,index) in provinceList" |
|
:key="index" |
|
:label="item.provinceName" |
|
:value="item.provinceId"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item prop="industryClassId" |
|
label="行业类型"> |
|
<el-select v-model="form.industryClassId" |
|
clearable |
|
placeholder="请选择行业类型" |
|
@change="changIndustry" |
|
@clear="clearIndustry()"> |
|
<el-option v-for="(item,index) in IndustryClassList" |
|
:key="index" |
|
:label="item.industryClassName" |
|
:value="item.industryClassId"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item prop="name" |
|
label="联系人姓名"> |
|
<el-input placeholder="请输入联系人姓名" |
|
v-model="form.name"></el-input> |
|
</el-form-item> |
|
<el-form-item prop="phone" |
|
label="手机号"> |
|
<el-input placeholder="请输入联系人手机号" |
|
v-model="form.phone" |
|
maxlength="11"></el-input> |
|
</el-form-item> |
|
<el-form-item prop="email" |
|
label="邮箱"> |
|
<el-input placeholder="请输入邮箱" |
|
v-model="form.email"></el-input> |
|
</el-form-item> |
|
</el-col> |
|
</el-form> |
|
<div v-if="!isDetail" |
|
style="margin-top: 20px;text-align: center"> |
|
<el-button type="primary" |
|
v-preventReClick |
|
@click="saveAdd(0)">确定</el-button> |
|
<el-button v-preventReClick |
|
@click="$router.back()">取消</el-button> |
|
</div> |
|
</div> |
|
|
|
<div v-show="curTab === 'tab2'"> |
|
<div class="tool"> |
|
<ul class="filter"> |
|
<li> |
|
<label>产品分类</label> |
|
<el-select v-model="form2.productType" |
|
placeholder="请选择产品类型" |
|
clearable |
|
@change="filterForm2"> |
|
<el-option v-for="(item,index) in productTypeList" |
|
:key="index" |
|
:label="item.classificationName" |
|
:value="item.classificationId"></el-option> |
|
</el-select> |
|
</li> |
|
<li> |
|
<label>订阅状态</label> |
|
<el-select v-model="form2.status" |
|
placeholder="请选择订阅状态" |
|
@change="filterForm2"> |
|
<el-option v-for="(item,index) in subStatusList" |
|
:key="index" |
|
:label="item.name" |
|
:value="item.name"></el-option> |
|
</el-select> |
|
</li> |
|
<li> |
|
<el-input style="width: 250px;" |
|
placeholder="请输入产品名称" |
|
prefix-icon="el-icon-search" |
|
clearable |
|
v-model="form2.keyword"></el-input> |
|
</li> |
|
</ul> |
|
<div> |
|
<el-button type="primary" |
|
@click="exportList">导出列表</el-button> |
|
</div> |
|
</div> |
|
<el-table :data="products" |
|
class="orderTable" |
|
stripe |
|
header-align="center" |
|
@selection-change="handleSelectionChange" |
|
row-key="id"> |
|
<el-table-column type="selection" |
|
width="55" |
|
align="center" |
|
:reserve-selection="true"></el-table-column> |
|
<el-table-column type="index" |
|
width="100" |
|
label="序号" |
|
align="center"> |
|
</el-table-column> |
|
<el-table-column prop="goodsName" |
|
label="产品名称" |
|
align="center"></el-table-column> |
|
<el-table-column prop="productTypeName" |
|
label="产品分类" |
|
align="center"></el-table-column> |
|
<el-table-column label="起止日期" |
|
align="center"> |
|
<template slot-scope="scope"> |
|
{{ scope.row.status === '已过期' ? '' : scope.row.startAndEndTime }} |
|
<el-tooltip v-if="scope.row.other" |
|
class="item" |
|
effect="dark" |
|
placement="top"> |
|
<div slot="content"> |
|
还有<span v-html="scope.row.other"></span><br>的订单还未生效 |
|
</div> |
|
<i class="el-icon-warning warning"></i> |
|
</el-tooltip> |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="剩余期限" |
|
align="center"> |
|
<template slot-scope="scope"> |
|
{{scope.row.remain}} 天 |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="status" |
|
label="订阅状态" |
|
align="center"></el-table-column> |
|
<el-table-column label="产品状态" |
|
align="center"> |
|
<template slot-scope="scope"> |
|
<el-switch v-model="scope.row.isEnable" |
|
:active-value="1" |
|
:inactive-value="0" |
|
:active-text="scope.row.isEnable ? '启用' : '禁用'" |
|
:disabled="scope.row.status === '已过期'" |
|
@change="switchOff($event,scope.row,scope.$index)"></el-switch> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<div class="pagination"> |
|
<el-pagination background |
|
layout="total, prev, pager, next" |
|
@current-change="handleCurrentChangeProduct" |
|
:current-page="pageProduct" |
|
:page-size="pageSizeProduct" |
|
:total="totalProduct"></el-pagination> |
|
</div> |
|
</div> |
|
|
|
<div v-show="curTab === 'tab3'"> |
|
<div class="tool"> |
|
<ul class="filter"> |
|
<li> |
|
<label>订单类型</label> |
|
<el-select v-model="form3.orderType" |
|
clearable |
|
placeholder="请选择订单类型" |
|
@change="getOrder"> |
|
<el-option v-for="(item,index) in orderTypeList" |
|
:key="index" |
|
:label="item.name" |
|
:value="item.value"></el-option> |
|
</el-select> |
|
</li> |
|
<li> |
|
<label>订单状态</label> |
|
<el-select v-model="form3.orderStatus" |
|
clearable |
|
placeholder="请选择订单状态" |
|
@change="getOrder"> |
|
<el-option v-for="(item,index) in orderStatusList" |
|
:key="index" |
|
:label="item.name" |
|
:value="item.id"></el-option> |
|
</el-select> |
|
</li> |
|
</ul> |
|
<div> |
|
<el-input style="width: 250px;" |
|
placeholder="请输入订单编号、内容" |
|
prefix-icon="el-icon-search" |
|
clearable |
|
v-model="form3.keyword"></el-input> |
|
</div> |
|
</div> |
|
<el-table :data="orders" |
|
class="orderTable" |
|
stripe |
|
header-align="center" |
|
@selection-change="handleSelectionChange" |
|
row-key="orderId"> |
|
<el-table-column type="selection" |
|
width="55" |
|
align="center" |
|
:reserve-selection="true"></el-table-column> |
|
<el-table-column type="index" |
|
width="100" |
|
label="序号" |
|
align="center"> |
|
</el-table-column> |
|
<el-table-column prop="orderNumber" |
|
label="订单编号" |
|
align="center"></el-table-column> |
|
<el-table-column prop="orderContent" |
|
label="订单内容" |
|
align="center"> |
|
<template slot-scope="scope"> |
|
<el-popover trigger="hover" |
|
placement="top" |
|
style='width: 500px' |
|
v-if='scope.row.orderContent.length >14'> |
|
<p> {{ scope.row.orderContent }}</p> |
|
<div slot="reference" |
|
class="name-wrapper"> |
|
<el-tag size="medium" |
|
class='tags'>{{ scope.row.orderContent }}</el-tag> |
|
</div> |
|
</el-popover> |
|
<span v-else> |
|
{{ scope.row.orderContent }} |
|
</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="orderAmount" |
|
label="订单金额（元）" |
|
align="center"></el-table-column> |
|
<el-table-column prop="createTime" |
|
label="订单日期" |
|
align="center"></el-table-column> |
|
<el-table-column prop="orderType" |
|
label="订单类型" |
|
align="center"></el-table-column> |
|
<el-table-column prop="orderStatus" |
|
label="订单状态" |
|
align="center"></el-table-column> |
|
<el-table-column label="操作" |
|
align="center"> |
|
<template slot-scope="scope"> |
|
<el-button type="text" |
|
@click="toOrderDetail(scope.row)">订单详情</el-button> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<div class="pagination"> |
|
<el-pagination background |
|
layout="total, prev, pager, next" |
|
@current-change="handleCurrentChangeOrder" |
|
:current-page="pageOrder" |
|
:page-size="pageSizeOrder" |
|
:total="totalOrder"></el-pagination> |
|
</div> |
|
</div> |
|
|
|
<div v-show="curTab === 'tab4'"> |
|
<div class="tool"> |
|
<div> |
|
<el-input style="width: 350px;" |
|
placeholder="请输入订单编号、合同名称、合同编号、产品内容" |
|
prefix-icon="el-icon-search" |
|
clearable></el-input> |
|
</div> |
|
</div> |
|
<el-table :data="contractInformations" |
|
class="table" |
|
stripe |
|
header-align="center"> |
|
<el-table-column type="index" |
|
width="100" |
|
label="序号" |
|
align="center"> |
|
</el-table-column> |
|
<el-table-column prop="contractNumber" |
|
label="订单号" |
|
align="center"></el-table-column> |
|
<el-table-column prop="contractNumber" |
|
label="合同编号" |
|
align="center"></el-table-column> |
|
<el-table-column prop="contractName" |
|
label="合同名称" |
|
align="center"> |
|
</el-table-column> |
|
<el-table-column prop="endTime" |
|
label="合同期限" |
|
align="center"> |
|
<template slot-scope="scope"> |
|
{{scope.row.startTime?scope.row.startTime.split(' ').shift():''}} - {{scope.row.endTime?scope.row.endTime.split(' ').shift():''}} |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="dataOrCourseName" |
|
label="产品内容" |
|
align="center"> |
|
</el-table-column> |
|
<el-table-column prop="contractMoney" |
|
label="合同金额" |
|
align="center"> |
|
<template slot-scope="scope"> |
|
{{scope.row.contractMoney}} 元 |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="操作" |
|
align="center"> |
|
<template slot-scope="scope"> |
|
<el-button type="text" |
|
@click="showContract(scope.row)">查看</el-button> |
|
<el-button type="text" |
|
@click="showContract(scope.row)">下载</el-button> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
|
|
<div v-show="curTab === 'tab5'"> |
|
<div class="tool"> |
|
<div> |
|
<el-input style="width: 300px;" |
|
placeholder="请输入商务经理、手机号" |
|
prefix-icon="el-icon-search" |
|
clearable |
|
v-model="bmsKeyword"></el-input> |
|
</div> |
|
</div> |
|
<el-table :data="bms" |
|
class="table" |
|
stripe |
|
header-align="center"> |
|
<el-table-column type="index" |
|
width="100" |
|
label="序号" |
|
align="center"></el-table-column> |
|
<el-table-column prop="userName" |
|
label="姓名" |
|
width="200" |
|
align="center"> |
|
<template slot-scope="scope"> |
|
{{ scope.row.userName }}{{ scope.row.peopleDel ? '(已被删除)' : '' }} |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="phone" |
|
label="手机号" |
|
width="150" |
|
align="center"></el-table-column> |
|
<el-table-column prop="bmName" |
|
label="所属团队" |
|
align="center"> |
|
<template slot-scope="scope"> |
|
<div v-html="scope.row.bmName"></div> |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="quantityOfOrder" |
|
label="订单数量" |
|
width="100" |
|
align="center"></el-table-column> |
|
<el-table-column prop="latestTime" |
|
label="最近下单时间" |
|
width="200" |
|
align="center"></el-table-column> |
|
<el-table-column prop="productName" |
|
label="产品" |
|
align="center" |
|
show-overflow-tooltip></el-table-column> |
|
<el-table-column label="操作" |
|
width="120" |
|
align="center"> |
|
<template slot-scope="scope"> |
|
<el-button type="text" |
|
@click="toOrder(scope.row)">查看</el-button> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<div class="pagination"> |
|
<el-pagination background |
|
layout="total, prev, pager, next" |
|
@current-change="handleCurrentChangeBm" |
|
:current-page="pageBm" |
|
:page-size="pageSizeBm" |
|
:total="totalBm"></el-pagination> |
|
</div> |
|
</div> |
|
</el-card> |
|
|
|
<el-dialog :visible.sync="showImg" |
|
width="70%" |
|
center> |
|
<img :src="fileSrc" |
|
width="100%" |
|
alt=""> |
|
</el-dialog> |
|
|
|
<el-dialog title="创建客户" |
|
:visible.sync="customerVisible" |
|
width="300px" |
|
class="dialog" |
|
:close-on-click-modal="false"> |
|
<el-form label-width="70px"> |
|
<el-form-item label="客户名称"> |
|
<el-input v-model="customerForm.schoolName" |
|
placeholder="请输入客户名称"></el-input> |
|
</el-form-item> |
|
<el-form-item prop="userName" |
|
label="省份"> |
|
<el-select v-model="customerForm.provinceName" |
|
placeholder="请选择省份" |
|
@change="provinceChange"> |
|
<el-option v-for="(item,index) in provinceList" |
|
:key="index" |
|
:label="item.provinceName" |
|
:value="item.provinceName"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item prop="userName" |
|
label="城市"> |
|
<el-select v-model="customerForm.cityName" |
|
placeholder="请选择城市" |
|
:disabled="customerForm.provinceName ? false : true"> |
|
<el-option v-for="(item,index) in cities" |
|
:key="index" |
|
:label="item.cityName" |
|
:value="item.cityName"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-form> |
|
<span slot="footer" |
|
class="dialog-footer"> |
|
<el-button @click="customerVisible = false">取消</el-button> |
|
<el-button type="primary" |
|
@click="submitCustomer">确定</el-button> |
|
</span> |
|
</el-dialog> |
|
|
|
<el-dialog title="客户设置" |
|
:visible.sync="customerListVisible" |
|
width="800px" |
|
class="dialog" |
|
:close-on-click-modal="false" |
|
custom-class="customer-dia"> |
|
<div style="width: 300px;margin-bottom: 10px"> |
|
<el-input placeholder="请输入客户名称" |
|
prefix-icon="el-icon-search" |
|
v-model="customerKeyword" |
|
clearable></el-input> |
|
</div> |
|
<el-table :data="customers" |
|
class="table" |
|
ref="table" |
|
stripe |
|
header-align="center" |
|
row-key="customerId"> |
|
<el-table-column type="index" |
|
width="100" |
|
label="序号" |
|
align="center"> |
|
<template slot-scope="scope"> |
|
{{scope.$index + (page - 1) * pageSize + 1}} |
|
</template> |
|
</el-table-column> |
|
<el-table-column prop="customerName" |
|
label="客户名称" |
|
align="center"> |
|
</el-table-column> |
|
<el-table-column prop="provinceName" |
|
label="省份" |
|
align="center"> |
|
</el-table-column> |
|
<el-table-column prop="cityName" |
|
label="城市" |
|
align="center"> |
|
</el-table-column> |
|
<el-table-column prop="countries" |
|
label="是否创建" |
|
align="center"> |
|
<template slot-scope="scope"> |
|
是 |
|
</template> |
|
</el-table-column> |
|
<el-table-column label="操作" |
|
width="100" |
|
align="center"> |
|
<template slot-scope="scope"> |
|
<i class="el-icon-edit icon" |
|
@click="editCustomer(item)"></i> |
|
<i class="el-icon-delete icon" |
|
@click="delCustomer(item, i)"></i> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<div class="pagination"> |
|
<el-pagination background |
|
layout="total, prev, pager, next" |
|
:total="totalCustomer" |
|
@current-change="handleCurrentChangeCustomer" |
|
:current-page="pageCustomer" |
|
:page-size="pageSizeCustomer"> |
|
</el-pagination> |
|
</div> |
|
<span slot="footer" |
|
class="dialog-footer"> |
|
<el-button @click="customerListVisible = false">取消</el-button> |
|
<el-button type="primary" |
|
@click="submitCustomer">确定</el-button> |
|
</span> |
|
</el-dialog> |
|
<pdf :visible.sync="pdfVisible" |
|
:src.sync="fileSrc"></pdf> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import pdf from '../../components/pdf.vue' |
|
import util from '@/utils/util' |
|
import axios from 'axios' |
|
import qs from 'qs' |
|
export default { |
|
components: { pdf }, |
|
data () { |
|
return { |
|
token: sessionStorage.getItem('token'), |
|
customerId: this.$route.query.id, |
|
isDetail: Boolean(this.$route.query.show), |
|
curTab: this.$route.query.type || 'tab1', |
|
tabs: { |
|
tab1: '基本信息', |
|
tab2: '已订阅产品', |
|
tab3: '订单记录', |
|
tab4: '合同信息', |
|
tab5: '商务经理', |
|
}, |
|
showFile: false, |
|
pdfVisible: false, |
|
showImg: false, |
|
fileSrc: '', |
|
form: { |
|
customerId: "", |
|
customerName: '', |
|
countries: '中国', |
|
industryClassId: '', |
|
industryId: '', |
|
provinceId: '', |
|
account: '', |
|
name: '', |
|
phone: '', |
|
position: '', |
|
cityId: '', |
|
customerType: '', |
|
expireDate: '', |
|
email: '', |
|
schoolId: '' |
|
}, |
|
rules: { |
|
countries: [ |
|
{ required: true, message: '请输入国家', trigger: 'blur' } |
|
], |
|
provinceId: [ |
|
{ required: true, message: '请输入省份', trigger: 'blur' } |
|
], |
|
cityId: [ |
|
{ required: true, message: '请输入城市', trigger: 'blur' } |
|
], |
|
// customerType: [ |
|
// { required: true, message: '请选择客户类型', trigger: 'change' } |
|
// ], |
|
name: [ |
|
{ required: true, message: '请输入联系人姓名', trigger: 'blur' } |
|
], |
|
account: [ |
|
{ required: true, message: '请输入账号', trigger: 'blur' }, |
|
{ |
|
pattern: /^[A-Za-z0-9]{4,}$/, |
|
message: "请输入正确的账号", |
|
trigger: "blur" |
|
} |
|
], |
|
phone: [ |
|
{ required: true, message: '请输入手机号', trigger: 'blur' }, |
|
{ |
|
pattern: /^1[3456789]\d{9}$/, |
|
message: '请输入正确的手机号', |
|
trigger: 'blur' |
|
} |
|
], |
|
schoolId: [ |
|
{ required: true, message: '请选择客户名称', trigger: 'change' } |
|
], |
|
email: [ |
|
// { required: true, message: '请输入邮箱', trigger: 'blur' }, |
|
{ |
|
pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/, |
|
message: '请输入正确的邮箱', |
|
trigger: 'blur' |
|
} |
|
], |
|
industryId: [ |
|
{ required: true, message: '请选择行业', trigger: 'change' } |
|
], |
|
industryClassId: [ |
|
{ required: true, message: '请选择行业类型', trigger: 'change' } |
|
], |
|
}, |
|
customerTypeList: [{ |
|
name: '正式', |
|
value: 1 |
|
}, |
|
{ |
|
name: '试用', |
|
value: 2 |
|
}, |
|
{ |
|
name: '到期', |
|
value: 3 |
|
}], |
|
|
|
form2: { |
|
productType: '', |
|
status: '全部', |
|
keyword: '' |
|
}, |
|
// 产品类型 |
|
productTypeList: [ |
|
{ |
|
id: '', |
|
name: '全部' |
|
}, |
|
{ |
|
id: 1, |
|
name: '实训课程产品' |
|
}, |
|
{ |
|
id: 0, |
|
name: '理论课程产品' |
|
}, |
|
{ |
|
id: 3, |
|
name: '数据产品' |
|
}, |
|
{ |
|
id: 4, |
|
name: '职站增值模块' |
|
} |
|
], |
|
// 订阅状态 |
|
subStatusList: [ |
|
{ |
|
id: '', |
|
name: '全部' |
|
}, |
|
{ |
|
id: 1, |
|
name: '生效中' |
|
}, |
|
{ |
|
id: 2, |
|
name: '已过期' |
|
}, |
|
{ |
|
id: 3, |
|
name: '待生效' |
|
} |
|
], |
|
products: [], |
|
productAll: [], |
|
pageProduct: this.$route.query.type === 'tab2' ? (+this.$route.query.page || 1) : 1, |
|
pageSizeProduct: 10, |
|
totalProduct: 0, |
|
|
|
form3: { |
|
orderType: +this.$route.query.orderType || '', |
|
orderStatus: +this.$route.query.orderStatus || '', |
|
keyword: this.$route.query.keyword || '' |
|
}, |
|
// 订单类型 |
|
orderTypeList: [{ |
|
name: '全部', |
|
value: '' |
|
}, { |
|
name: '正式', |
|
value: 1 |
|
}, { |
|
name: '试用', |
|
value: 2 |
|
}], |
|
// 订单状态 |
|
orderStatusList: [ |
|
{ |
|
id: '', |
|
name: '全部' |
|
}, |
|
{ |
|
id: 1, |
|
name: '已完成' |
|
}, |
|
{ |
|
id: 2, |
|
name: '待发货' |
|
} |
|
], |
|
pageOrder: this.$route.query.type === 'tab3' ? (+this.$route.query.page || 1) : 1, |
|
pageSizeOrder: 10, |
|
totalOrder: 0, |
|
orders: [], |
|
orderAll: [], |
|
|
|
bmsKeyword: '', |
|
bms: [], |
|
pageBm: this.$route.query.type === 'tab5' ? (+this.$route.query.page || 1) : 1, |
|
pageSizeBm: 10, |
|
totalBm: 0, |
|
|
|
countryList: [{ |
|
name: '中国' |
|
}], |
|
provinceList: this.$store.state.provinceList, |
|
cityList: [], |
|
IndustryClassList: [], |
|
industryList: [], |
|
schoolList: [], |
|
contractInformations: [], |
|
coursePermissionss: [], |
|
dataPermissionss: [], |
|
multipleSelection: [], |
|
NoAdd: true, |
|
phoneRepeat: false, |
|
emailRepeat: false, |
|
submiting: false, // 新增编辑防抖标识 |
|
updateTime: 0, |
|
customerVisible: false, |
|
cities: [], |
|
customerForm: { |
|
schoolName: '', |
|
provinceName: '', |
|
cityName: '', |
|
}, |
|
|
|
customerListVisible: false, |
|
customers: [{}], |
|
pageCustomer: 1, |
|
pageSizeCustomer: 10, |
|
totalCustomer: 0, |
|
customerKeyword: '', |
|
}; |
|
}, |
|
watch: { |
|
// 监听信息是否有更改,有的话页面离开的时候要询问是否要保存 |
|
form: { |
|
handler () { |
|
this.updateTime++ |
|
}, |
|
deep: true |
|
}, |
|
'form2.keyword': function (val) { |
|
clearTimeout(this.searchTimer) |
|
this.searchTimer = setTimeout(() => { |
|
this.filterForm2() |
|
}, 500) |
|
}, |
|
'form3.keyword': function (val) { |
|
this.pageOrder = 1 |
|
clearTimeout(this.searchTimer) |
|
this.searchTimer = setTimeout(() => { |
|
this.handlePageOrder() |
|
}, 500) |
|
}, |
|
bmsKeyword: function (val) { |
|
clearTimeout(this.searchTimer) |
|
this.searchTimer = setTimeout(() => { |
|
this.getBm() |
|
}, 500) |
|
}, |
|
}, |
|
mounted () { |
|
this.getIndustryClass() |
|
this.getBm() |
|
this.getCategory() |
|
if (this.customerId) { |
|
this.getProduct() |
|
this.$get(this.api.queryCustomerDetails, { |
|
customerId: this.customerId |
|
}).then((res) => { |
|
let customer = res.result.customer |
|
this.form = { |
|
customerId: customer.customerId, |
|
customerName: customer.customerName, |
|
schoolId: customer.schoolId, |
|
countries: customer.countries, |
|
industryClassId: customer.industryClassId, |
|
industryId: customer.industryId, |
|
provinceId: customer.provinceId, |
|
account: customer.account, |
|
phone: customer.phone, |
|
cityId: customer.cityId, |
|
customerType: customer.customerType, |
|
expireDate: customer.expireDate, |
|
email: customer.email, |
|
name: customer.name, |
|
position: customer.position, |
|
} |
|
this.getOrder() |
|
this.contractInformations = res.result.contractInformations.filter(e => e.contractNumber || e.contractName); // 必须有合同编号或者名称，否则不展示 |
|
this.coursePermissionss = res.result.coursePermissionss |
|
this.dataPermissionss = res.result.dataPermissionss |
|
this.getCityData() |
|
this.changIndustryData() |
|
this.getSchoolData() |
|
}).catch((res) => { }) |
|
} else { |
|
this.getSchoolData() |
|
} |
|
}, |
|
methods: { |
|
// 获取已订阅产品 |
|
getProduct () { |
|
this.$get(this.api.getProductsSubscribedByCustomers, { |
|
customeId: this.customerId |
|
}).then(({ data }) => { |
|
data = data.filter(e => !e.productDel) // productDel=1的不显示 |
|
const { productTypeList } = this |
|
data.map((e, i) => { |
|
e.id = i |
|
const list = e.startAndEndTimeList |
|
if (list && list.length) { |
|
let connect = true // 每个订单的开始结束日期是否连续 |
|
list.map((n, i) => { |
|
// 第一个不用计算。用当前订单的开始日期跟上一个订单的结束日期做比较，只差一天，就表示是连续订单 |
|
if (i) { |
|
if (new Date(n.startTime).getTime() - 86400000 !== new Date(list[i - 1].endTime).getTime()) connect = false |
|
} |
|
}) |
|
// 如果是连续订单，则取第一个订单的开始日期和最后一个订单的结束日期 |
|
const now = Date.now() |
|
// if (list[0].startTime && list[0].endTime) { |
|
if (list[0].startTime && now < new Date(list[0].startTime).getTime()) { |
|
e.startTime = list[0].startTime |
|
e.endTime = connect ? list[list.length - 1].endTime : list[0].endTime |
|
e.status = '未生效' |
|
e.orderEnable = list[0].isEnable |
|
|
|
// 如果还有未生效的订单，页面上要显示出来 |
|
if (!connect && list[1]) { |
|
const notActive = list.slice(1) // 取第一个订单以后的所有订单 |
|
e.other = '' |
|
notActive.map(j => { |
|
e.other += `<br>${j.startTime} ~ ${j.endTime}` |
|
}) |
|
} |
|
} else if (list[list.length - 1].endTime && now > new Date(list[list.length - 1].endTime).getTime()) { |
|
e.status = '已过期' |
|
} else { |
|
// 连续订单 |
|
if (connect) { |
|
e.startTime = list[0].startTime |
|
e.endTime = list[list.length - 1].endTime |
|
e.status = '生效中' |
|
e.orderEnable = list[0].isEnable |
|
} else { |
|
for (const j in list) { |
|
const i = +j |
|
const n = list[i] |
|
if (n.startTime && n.endTime && now >= new Date(n.startTime).getTime() && now <= new Date(n.endTime).getTime()) { |
|
// 生效中的订单，直接取该订单的开始结束日期 |
|
e.startTime = n.startTime |
|
e.endTime = n.endTime |
|
e.status = '生效中' |
|
e.orderEnable = n.isEnable |
|
// 如果还有未生效的订单，页面上要显示出来 |
|
if (list[i + 1]) { |
|
const notActive = list.slice(i + 1) // 取当前订单以后的所有订单 |
|
e.other = '' |
|
notActive.map(j => { |
|
e.other += `<br>${j.startTime} ~ ${j.endTime}` |
|
}) |
|
} |
|
break |
|
} else if (i != 0 && list[i - 1].endTime && n.startTime && n.endTime && now > new Date(list[i - 1].endTime).getTime() && now < new Date(n.startTime).getTime()) { |
|
// 当前时间位于两个订单时间之间，则取次订单的开始结束日期，并且为未生效 |
|
e.startTime = n.startTime |
|
e.endTime = n.endTime |
|
e.status = '未生效' |
|
e.orderEnable = n.isEnable |
|
break |
|
} |
|
} |
|
} |
|
} |
|
// } |
|
const date = new Date() |
|
date.setHours(0) |
|
date.setMinutes(0) |
|
date.setSeconds(0) |
|
e.remain = e.status === '已过期' ? 0 : this.getRemain(date.getTime(), e.endTime) // 获取剩余期限 |
|
e.startAndEndTime = e.status === '已过期' ? '' : e.startTime + ' ~ ' + e.endTime |
|
const isHave = productTypeList.find(n => n.classificationId === e.productType) |
|
if (isHave) { |
|
e.productTypeName = isHave.classificationName |
|
} else { |
|
e.productTypeName = '' |
|
} |
|
// 1开启 0禁用（已过期的订单，或者当前生效的订单为禁用，则显示为禁用，否则是启用） |
|
e.isEnable = (e.status === '未生效' || e.status === '已过期' || !e.orderEnable) ? |
|
0 : |
|
1 |
|
} |
|
}) |
|
this.productAll = data |
|
this.totalProduct = data.length |
|
this.handlePage() |
|
}).catch(res => { }) |
|
}, |
|
// 获取剩余日期 |
|
getRemain (startTime, endTime) { |
|
return parseInt(((new Date(endTime).getTime() - new Date(startTime).getTime()) / 86400000)) |
|
}, |
|
// 分页 |
|
handlePage () { |
|
this.products = this.productAll.slice((this.pageProduct - 1) * this.pageSizeProduct, this.pageProduct * this.pageSizeProduct) |
|
}, |
|
handleCurrentChangeProduct (val) { |
|
this.pageProduct = val |
|
this.handlePage() |
|
this.$router.push(`addcustomer?id=${this.customerId}&type=tab2&page=${val}`) |
|
}, |
|
// 创建客户 |
|
addCustomer () { |
|
// this.customerListVisible = true |
|
this.customerVisible = true |
|
}, |
|
handleCurrentChangeCustomer (val) { |
|
this.pageCustomer = val |
|
// this.getCustomer() |
|
}, |
|
// 获取客户列表 |
|
getCustomer () { |
|
this.$get(this.api.queryCity, { |
|
provinceId: this.provinceList.find(e => e.provinceName == name).provinceId |
|
}).then(({ list }) => { |
|
this.cities = list |
|
this.customerForm.cityName = '' |
|
}).catch(res => { }); |
|
}, |
|
// 编辑客户 |
|
editCustomer (row) { |
|
this.customerVisible = true |
|
// this.customerForm = { |
|
// schoolName: '', |
|
// provinceName: '', |
|
// cityName: '', |
|
// } |
|
}, |
|
// 删除客户 |
|
delCustomer (row, i) { |
|
this.$confirm('确定要删除吗？', '提示', { |
|
type: 'warning' |
|
}).then(() => { |
|
|
|
}).catch(() => { }) |
|
}, |
|
// 获取城市 |
|
provinceChange (name) { |
|
this.$get(this.api.queryCity, { |
|
provinceId: this.provinceList.find(e => e.provinceName == name).provinceId |
|
}).then(({ list }) => { |
|
this.cities = list |
|
this.customerForm.cityName = '' |
|
}).catch(res => { }); |
|
}, |
|
// 客户新增提交 |
|
submitCustomer () { |
|
if (this.submiting) return false |
|
const form = this.customerForm |
|
if (!form.schoolName) return this.$message.warning('请输入客户名称') |
|
if (!form.provinceName) return this.$message.warning('请选择省份') |
|
if (!form.cityName) return this.$message.warning('请选择城市') |
|
this.submiting = true |
|
this.$get(this.api.addNewCustomersByOneself, form).then(res => { |
|
this.customerVisible = false |
|
this.submiting = false |
|
this.$message.success('添加成功') |
|
this.getSchoolData(res.schoolId) |
|
}).catch((res) => { |
|
this.submiting = false |
|
}) |
|
}, |
|
// 获取产品分类 |
|
getCategory () { |
|
this.$get(this.api.productCategoryList).then(res => { |
|
this.productTypeList = res.classificationList |
|
}).catch(err => { }) |
|
}, |
|
// 已订阅产品筛选 |
|
filterForm2 () { |
|
const list = this.productAll |
|
const { productType, status, keyword } = this.form2 |
|
this.products = list.filter(e => (productType === '' || productType === e.productType) && (e.status === status || status === '全部') && (!e.goodsName || (e.goodsName && e.goodsName.includes(keyword)))) |
|
}, |
|
// 已订阅产品导出 |
|
exportList () { |
|
let list = this.productAll |
|
if (this.multipleSelection.length) list = this.multipleSelection |
|
const data = [] |
|
list.map(e => { |
|
data.push({ |
|
productName: e.productName, |
|
productStatus: e.status, |
|
productType: e.productTypeName, |
|
remainingPeriod: e.remain, |
|
startAndEndTime: e.startAndEndTime, |
|
subscriptionStatus: e.isEnable ? '启用' : '禁用', |
|
}) |
|
}) |
|
axios.post(this.api.exportSubscribedRecords, data, { |
|
headers: { |
|
token: this.token |
|
}, |
|
responseType: 'blob' |
|
}).then((res) => { |
|
util.downloadFileDirect(`已订阅产品.xls`, new Blob([res.data])) |
|
}).catch(res => { }) |
|
}, |
|
|
|
// 订单记录 |
|
getOrder () { |
|
const { orderStatus, orderType } = this.form3 |
|
this.$post(this.api.orderList, { |
|
cityId: '', |
|
customerName: this.form.customerName, |
|
orderStatus, |
|
orderType, |
|
pageNo: 1, |
|
pageSize: 10000, |
|
provinceId: '' |
|
}).then(({ orderPage }) => { |
|
orderPage.orders.forEach(e => { |
|
e.orderType = this.orderTypeFn(e.orderType) |
|
e.orderStatus = this.orderStatusFn(e.orderStatus) |
|
e.orderNature = this.orderNatureFn(e.orderNature) |
|
}); |
|
this.orderAll = orderPage.orders |
|
this.totalOrder = orderPage.total |
|
this.handlePageOrder() |
|
}).catch(res => { }) |
|
}, |
|
// 订单模糊查询 |
|
filterOrder () { |
|
const { keyword } = this.form3 |
|
const { orders } = this |
|
this.orders = keyword ? this.orderAll.filter(e => e.orderNumber.includes(keyword) || e.orderContent.includes(keyword)) : orders |
|
}, |
|
// 分页 |
|
handlePageOrder () { |
|
this.orders = this.orderAll.slice((this.pageOrder - 1) * this.pageSizeOrder, this.pageOrder * this.pageSizeOrder) |
|
this.filterOrder() |
|
}, |
|
handleCurrentChangeOrder (val) { |
|
this.pageOrder = val |
|
this.handlePageOrder() |
|
this.$router.push(`addcustomer?id=${this.customerId}&type=tab3&page=${val}`) |
|
}, |
|
// 订单详情 |
|
toOrderDetail (row) { |
|
this.$router.push(`/addcustomer?id=${this.customerId}&type=tab3&${qs.stringify(this.form3)}&page=${this.pageOrder}`) |
|
this.$router.push(`/AddOrder?val=watch&orderId=${row.orderId}&orderStatus=${row.orderStatus === '已完成' ? 1 : 0}`) |
|
}, |
|
|
|
// 商务经理 |
|
getBm () { |
|
this.$post(this.api.getAListOfClientBusinessManagers, { |
|
keywords: this.bmsKeyword, |
|
customerId: this.customerId, |
|
pageNum: this.pageBm, |
|
pageSize: this.pageSizeBm |
|
}).then(({ data }) => { |
|
data.records.map(e => { |
|
let name = '' |
|
// 拼接团队名称，teamDel：1已删除，0未删除 |
|
e.teamInformationRespList.map(n => name += `${n.partnerClassificationName}${n.teamDel ? '（被解散）' : ''}<br>`) |
|
e.bmName = name |
|
}) |
|
this.bms = data.records |
|
this.totalBm = data.total |
|
}).catch(res => { }) |
|
}, |
|
handleCurrentChangeBm (val) { |
|
this.pageBm = val |
|
this.getBm() |
|
this.$router.push(`addcustomer?id=${this.customerId}&type=tab5&page=${val}`) |
|
}, |
|
// 商务经理查看 |
|
toOrder (row) { |
|
this.$router.push(`/addcustomer?id=${this.customerId}&type=tab5&keyword=${this.bmsKeyword}&page=${this.pageOrder}`) |
|
this.$router.push(`/bmOrder?businessManagerId=${row.businessManagerId}&customerId=${this.customerId}&customerName=${this.form.customerName}&userName=${row.userName}&teamId=${row.teamId}`) |
|
}, |
|
|
|
// tab切换 |
|
tabChange (index, to) { |
|
// 当前tab是第一个，并且不是从确认询问后跳过来的，就直接调询问框询问是否保存 |
|
if (this.curTab === 'tab1' && !to) { |
|
this.goback(index) |
|
} else { |
|
this.curTab = index |
|
this.$router.push(`addcustomer?id=${this.customerId}&type=${index}`) |
|
this.pageProduct = 1 |
|
this.pageOrder = 1 |
|
this.pageBm = 1 |
|
index === 'tab3' && this.handlePageOrder() |
|
this.updateTime = this.form.customerId ? 1 : 0 |
|
} |
|
}, |
|
// 获取城市 |
|
getCityData () { |
|
this.$get(this.api.queryCity, { |
|
provinceId: this.form.provinceId |
|
}).then(res => { |
|
this.cityList = res.list |
|
}).catch(res => { }); |
|
}, |
|
// 清除学校 |
|
clearSchool () { |
|
this.form.provinceId = '', |
|
this.form.cityId = '', |
|
this.form.customerName = '' |
|
}, |
|
// 获取学校/客户名称 |
|
getSchoolData (schoolId) { |
|
let data = { |
|
schoolName: '', |
|
provinceId: '', |
|
cityId: '' |
|
} |
|
this.$get(this.api.querySchoolData).then(({ list }) => { |
|
this.schoolList = list |
|
// 有传schoolId，则需要找到这个学校然后赋值表单 |
|
if (schoolId) { |
|
const item = list.find(e => e.schoolId == schoolId) |
|
if (item) { |
|
this.form.schoolId = schoolId |
|
this.form.provinceId = item.provinceId |
|
this.getCityData() |
|
this.form.cityId = item.cityId |
|
} |
|
} |
|
}).catch(res => { }); |
|
}, |
|
// 查询客户是否存在 |
|
SchoolChange (val) { |
|
this.clearSchool() |
|
if (val) { |
|
let obj = {} |
|
obj = this.schoolList.find((item) => { |
|
return item.schoolId === val |
|
}); |
|
this.form.customerName = obj.schoolName |
|
this.form.provinceId = obj.provinceId |
|
this.getCityData() |
|
this.form.cityId = obj.cityId |
|
|
|
this.$get(this.api.queryCustomerIsExists, { |
|
schoolId: this.form.schoolId |
|
}).then(res => { |
|
this.NoAdd = true |
|
}).catch(res => { |
|
this.NoAdd = false |
|
}) |
|
} |
|
}, |
|
// 获取行业类 |
|
getIndustryClass () { |
|
this.$get(this.api.queryCustomerIndustryClass).then(res => { |
|
this.IndustryClassList = res.list |
|
}).catch(res => { }); |
|
}, |
|
// 清除行业类 |
|
clearIndustry () { |
|
this.form.industryId = '' |
|
}, |
|
// 获取行业 |
|
changIndustry () { |
|
this.clearIndustry() |
|
this.changIndustryData() |
|
}, |
|
changIndustryData () { |
|
let data = { |
|
industryClassId: this.form.industryClassId |
|
} |
|
this.$get(this.api.queryCustomerIndustry, data).then(res => { |
|
this.industryList = res.list |
|
}).catch(res => { }); |
|
}, |
|
switchOff (val, row) { |
|
this.$post(`${this.api.orderBulkDisableEnable}?isOpen=${val}`, row.startAndEndTimeList.map(e => e.id)).then(res => { |
|
this.$message.success(val ? '启用成功' : '禁用成功') |
|
}).catch(res => { }) |
|
}, |
|
phoneChange () { // 切换手机号 |
|
let regex = /^1[3456789]\d{9}$/; |
|
if (regex.test(this.form.phone)) { |
|
let url = ""; |
|
if (!this.form.customerId) { |
|
url = `${this.api.checkEmailOrPhone}?phone=${this.form.phone}&email=`; |
|
} else { |
|
url = `${this.api.checkEmailOrPhone}?customerId=${this.form.customerId}&phone=${this.form.phone}&email=`; |
|
} |
|
this.$post(url).then(res => { |
|
if (res.status === 200) { |
|
this.phoneRepeat = false; |
|
} |
|
}).catch(err => { |
|
this.phoneRepeat = true; |
|
}); |
|
} |
|
}, |
|
emailChange () { // 切换邮箱 |
|
let regex = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/; |
|
if (regex.test(this.form.email)) { |
|
let url = ""; |
|
if (!this.form.customerId) { |
|
url = `${this.api.checkEmailOrPhone}?email=${this.form.email}&phone=`; |
|
} else { |
|
url = `${this.api.checkEmailOrPhone}?customerId=${this.form.customerId}&email=${this.form.email}&phone=`; |
|
} |
|
this.$post(url).then(res => { |
|
if (res.status === 200) { |
|
this.emailRepeat = false; |
|
} |
|
}).catch(err => { |
|
this.emailRepeat = true; |
|
}); |
|
} |
|
}, |
|
saveAdd (tab) { |
|
this.$refs.form.validate((valid) => { |
|
if (valid) { |
|
if (this.submiting) return false |
|
if (this.phoneRepeat) { |
|
this.$message.warning("该手机号已存在"); |
|
return; |
|
} |
|
if (this.emailRepeat) { |
|
this.$message.warning("该邮箱已存在"); |
|
return; |
|
} |
|
this.submiting = true |
|
if (this.NoAdd) { |
|
let obj = {}; |
|
obj = this.schoolList.find((item) => { |
|
return item.schoolId == this.form.schoolId; |
|
}); |
|
this.form.customerName = obj.schoolName |
|
this.form.provinceId = obj.provinceId |
|
this.getCityData() |
|
this.form.cityId = obj.cityId |
|
let data = { |
|
customerName: this.form.customerName, |
|
customerId: this.customerId, |
|
schoolId: this.form.schoolId, |
|
countries: this.form.countries, |
|
industryClassId: this.form.industryClassId, |
|
industryId: this.form.industryId, |
|
provinceId: this.form.provinceId, |
|
account: this.form.account, |
|
phone: this.form.phone, |
|
cityId: this.form.cityId, |
|
customerType: this.form.customerType, |
|
expireDate: this.form.expireDate, |
|
email: this.form.email, |
|
name: this.form.name, |
|
position: this.form.position |
|
} |
|
if (this.customerId) { |
|
this.$post(this.api.updateCustomer, data).then((res) => { |
|
setTimeout(() => { |
|
this.submiting = false |
|
}, 1500) |
|
this.$message.success('编辑成功') |
|
tab ? this.tabChange(tab, 1) : this.backPage() |
|
}).catch((res) => { |
|
this.submiting = false |
|
}) |
|
} else { |
|
this.$post(this.api.addCustomer, data).then((res) => { |
|
setTimeout(() => { |
|
this.submiting = false |
|
}, 1500) |
|
this.$store.commit('schoolIdData', { schoolId: this.form.schoolId }) |
|
this.$message.success('添加成功') |
|
tab ? this.tabChange(tab, 1) : this.router.push('list') |
|
}).catch((res) => { |
|
this.submiting = false |
|
}) |
|
} |
|
} else { |
|
this.$message.warning('该客户已存在') |
|
} |
|
} |
|
}) |
|
}, |
|
handleSelectionChange (val) { |
|
this.multipleSelection = val |
|
}, |
|
showContract (row) { |
|
if (!row.contractFile) return this.$message.warning('文件链接无效') |
|
let type = row.contractFile.split('.').pop() |
|
let img = ['jpg', 'gif', 'png', 'jepg'] |
|
|
|
this.fileSrc = row.contractFile |
|
if (img.includes(type)) { |
|
this.showImg = true |
|
} else if ('pdf'.includes(type)) { |
|
this.pdfVisible = true |
|
} else { |
|
window.open(`https://view.officeapps.live.com/op/view.aspx?src=${this.fileSrc}`) |
|
} |
|
}, |
|
goback (i) { |
|
const id = this.form.customerId |
|
const updateTime = this.updateTime |
|
// 更改了信息才需要提示 |
|
if ((id && updateTime > 1) || (!id && updateTime)) { |
|
this.$confirm(`编辑的内容未保存，是否保存？`, '提示', { |
|
type: 'warning', |
|
closeOnClickModal: false |
|
}).then(() => { |
|
this.saveAdd(i) |
|
}).catch(() => { |
|
i ? this.tabChange(i, 1) : this.backPage() |
|
}) |
|
} else { |
|
i ? this.tabChange(i, 1) : this.backPage() |
|
} |
|
}, |
|
backPage () { |
|
this.$router.push(this.$store.state.referrer || '/customer') |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.tabs { |
|
margin-bottom: 30px; |
|
} |
|
.card { |
|
min-height: calc(100vh - 260px); |
|
margin-bottom: 20px; |
|
} |
|
.addhr_tag { |
|
background-color: #666; |
|
width: 6px; |
|
height: 17px; |
|
margin-right: 5px; |
|
} |
|
.radio_icon { |
|
font-size: 26px; |
|
color: #9278ff; |
|
} |
|
/deep/.warning { |
|
margin-left: 5px; |
|
color: #9278ff; |
|
} |
|
.tags { |
|
border: none; |
|
background: none; |
|
color: #000; |
|
white-space: pre-wrap; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
display: -webkit-box; |
|
-webkit-line-clamp: 2; |
|
line-clamp: 2; |
|
-webkit-box-orient: vertical; |
|
} |
|
.info { |
|
margin-top: 20px; |
|
.el-select { |
|
width: 100%; |
|
} |
|
} |
|
.plus-cus { |
|
margin-left: 10px; |
|
font-size: 18px; |
|
color: #666; |
|
cursor: pointer; |
|
} |
|
/deep/.customer-dia { |
|
.icon { |
|
margin-right: 10px; |
|
font-size: 16px; |
|
color: #7a7a7a; |
|
cursor: pointer; |
|
&:hover { |
|
color: #9076ff; |
|
} |
|
} |
|
} |
|
</style>
|
|
|