|
|
|
<template>
|
|
|
|
<view :class="{page: isDetail}">
|
|
|
|
<uni-card v-if="customerId" :is-shadow="false" :border="false" is-full>
|
|
|
|
<view class="info">
|
|
|
|
<view class="name">{{ form.customerName }}</view>
|
|
|
|
<view class="text">客户类型:{{ customerType }}</view>
|
|
|
|
<view class="text">产品到期时间:{{ form.expireDate || '' }}</view>
|
|
|
|
</view>
|
|
|
|
</uni-card>
|
|
|
|
|
|
|
|
<uni-section title="基本信息" type="line">
|
|
|
|
<view class="form">
|
|
|
|
<uni-forms ref="form" :modelValue="form" :rules="rules" label-width="100" disabled>
|
|
|
|
<uni-forms-item label="客户名称" name="schoolId" required>
|
|
|
|
<uni-easyinput v-if="isDetail" v-model="form.customerName" disabled />
|
|
|
|
<view v-else :class="['school-input', {active: form.customerName}]" @click="schoolVisible = true">{{ form.customerName || '请选择学校' }}</view>
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="省份">
|
|
|
|
<uni-easyinput v-model="form.provinceName" disabled />
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="城市">
|
|
|
|
<uni-easyinput v-model="form.cityName" disabled />
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="行业类型" name="industryClassId" required>
|
|
|
|
<uni-easyinput v-if="isDetail" v-model="form.industryClassName" disabled />
|
|
|
|
<uni-data-picker v-else placeholder="请选择行业类型" popup-title="请选择行业类型" preload :clear-icon="false" :localdata="industryClassList" :map="{text: 'industryClassName', value: 'industryClassId'}" v-model="form.industryClassId" @change="industryClassChange">
|
|
|
|
</uni-data-picker>
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="行业" name="industryId" required>
|
|
|
|
<uni-easyinput v-if="isDetail" v-model="form.industryName" disabled />
|
|
|
|
<uni-data-picker v-else placeholder="请选择行业" popup-title="请选择行业" preload :clear-icon="false" :localdata="industryList" :map="{text: 'industryName', value: 'industryId'}" v-model="form.industryId" :readonly="form.industryClassId ? false : true">
|
|
|
|
</uni-data-picker>
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="联系人姓名" name="name" required>
|
|
|
|
<uni-easyinput ref="nameInput" placeholder="请输入联系人姓名" :disabled="isDetail" />
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="手机" name="phone">
|
|
|
|
<uni-easyinput ref="phoneInput" placeholder="请输入手机" :disabled="isDetail" />
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="账号" name="account" required>
|
|
|
|
<uni-easyinput ref="accountInput" placeholder="请以院校首字母+admin的格式来设置" :disabled="isDetail" />
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="职务" name="position">
|
|
|
|
<uni-easyinput ref="positionInput" placeholder="请输入职务" :disabled="isDetail" />
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="邮箱" name="email">
|
|
|
|
<uni-easyinput ref="emailInput" placeholder="请输入邮箱" :disabled="isDetail" />
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="产品到期时间">
|
|
|
|
<uni-easyinput v-model="form.expireDate" disabled />
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="客户类型">
|
|
|
|
<uni-easyinput v-model="customerType" disabled />
|
|
|
|
</uni-forms-item>
|
|
|
|
</uni-forms>
|
|
|
|
<button v-if="!isDetail" type="primary" @click="submit">提交</button>
|
|
|
|
</view>
|
|
|
|
</uni-section>
|
|
|
|
|
|
|
|
<view class="action" v-if="isDetail">
|
|
|
|
<view class="item" @click="toPage(`../clientDetail/clientDetail?customerId=${customerId}`)">
|
|
|
|
<uni-icons class="icon" custom-prefix="iconfont" type="icon-edit" size="20" color="#959595"></uni-icons>
|
|
|
|
<view class="text">编辑</view>
|
|
|
|
</view>
|
|
|
|
<view class="item" @click="toPage('../ordered/ordered')">
|
|
|
|
<uni-icons class="icon" custom-prefix="iconfont" type="icon-product" size="20" color="#959595"></uni-icons>
|
|
|
|
<view class="text">已订阅产品</view>
|
|
|
|
</view>
|
|
|
|
<view class="item" @click="toPage('../orders/orders')">
|
|
|
|
<uni-icons class="icon" custom-prefix="iconfont" type="icon-dingdan" size="20" color="#959595"></uni-icons>
|
|
|
|
<view class="text">订单</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<view class="mask" v-show="schoolVisible" @click="closeSchool"></view>
|
|
|
|
<view class="school-popup" v-show="schoolVisible">
|
|
|
|
<view class="top">请选择学校</view>
|
|
|
|
<uni-icons class="close" type="closeempty" size="20" @click="closeSchool"></uni-icons>
|
|
|
|
<uni-search-bar class="search" radius="5" placeholder="请输入学校名称" v-model="keyword" clearButton="auto" cancelButton="none" />
|
|
|
|
<view class="list">
|
|
|
|
<view class="item" v-for="item in schoolList" @click="schoolChange(item)">{{ item.schoolName }}</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { queryCustomerDetails, querySchool, queryIndustryClass, queryIndustry, queryCustomerIsExists, addCustomer, updateCustomer } from '@/apis/modules/client.js'
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
isDetail: false,
|
|
|
|
customerId: '',
|
|
|
|
// 客户类型
|
|
|
|
customerTypeList: [{
|
|
|
|
name: '正式',
|
|
|
|
value: 1
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: '试用',
|
|
|
|
value: 2
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: '到期',
|
|
|
|
value: 3
|
|
|
|
}],
|
|
|
|
nameRepeat: false,
|
|
|
|
schoolVisible: false,
|
|
|
|
keyword: '',
|
|
|
|
searchTimer: null,
|
|
|
|
schoolList: [],
|
|
|
|
schoolListAll: [],
|
|
|
|
industryClassList: [],
|
|
|
|
industryList: [],
|
|
|
|
form: {
|
|
|
|
countries: '中国',
|
|
|
|
customerId: '',
|
|
|
|
customerName: '',
|
|
|
|
industryClassId: '',
|
|
|
|
industryId: '',
|
|
|
|
provinceId: '',
|
|
|
|
provinceName: '',
|
|
|
|
account: '',
|
|
|
|
name: '',
|
|
|
|
phone: '',
|
|
|
|
position: '',
|
|
|
|
cityId: '',
|
|
|
|
cityName: '',
|
|
|
|
customerType: '',
|
|
|
|
expireDate: '',
|
|
|
|
email: '',
|
|
|
|
schoolId: ''
|
|
|
|
},
|
|
|
|
// 校验规则
|
|
|
|
rules: {
|
|
|
|
schoolId: {
|
|
|
|
rules: [{
|
|
|
|
required: true,
|
|
|
|
errorMessage: '请选择客户'
|
|
|
|
}]
|
|
|
|
},
|
|
|
|
industryClassId: {
|
|
|
|
rules: [{
|
|
|
|
required: true,
|
|
|
|
errorMessage: '请选择行业类型'
|
|
|
|
}]
|
|
|
|
},
|
|
|
|
industryId: {
|
|
|
|
rules: [{
|
|
|
|
required: true,
|
|
|
|
errorMessage: '请选择行业'
|
|
|
|
}]
|
|
|
|
},
|
|
|
|
name: {
|
|
|
|
rules: [{
|
|
|
|
required: true,
|
|
|
|
errorMessage: '联系人姓名不能为空'
|
|
|
|
}]
|
|
|
|
},
|
|
|
|
account: {
|
|
|
|
rules: [{
|
|
|
|
required: true,
|
|
|
|
errorMessage: '账号不能为空'
|
|
|
|
}]
|
|
|
|
},
|
|
|
|
},
|
|
|
|
customerType: '',
|
|
|
|
}
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
keyword () {
|
|
|
|
clearTimeout(this.searchTimer)
|
|
|
|
this.searchTimer = setTimeout(() => {
|
|
|
|
this.filterSchool()
|
|
|
|
}, 500)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onLoad(option) {
|
|
|
|
this.customerId = option.customerId
|
|
|
|
this.isDetail = !!option.show
|
|
|
|
|
|
|
|
option.customerId && this.getInfo()
|
|
|
|
// 非详情才需要查询学校和行业
|
|
|
|
if (!this.isDetail) {
|
|
|
|
this.getSchool()
|
|
|
|
this.getIndustryClass()
|
|
|
|
}
|
|
|
|
// 设置标题
|
|
|
|
uni.setNavigationBarTitle({
|
|
|
|
title: option.customerId ?
|
|
|
|
(option.show ?
|
|
|
|
'客户详情' :
|
|
|
|
'编辑客户') :
|
|
|
|
'新增客户'
|
|
|
|
})
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
// 获取详情
|
|
|
|
getInfo() {
|
|
|
|
queryCustomerDetails({
|
|
|
|
customerId: this.customerId
|
|
|
|
}).then(({ result }) => {
|
|
|
|
const { customer } = result
|
|
|
|
this.form = customer
|
|
|
|
this.$refs.nameInput.val = customer.name
|
|
|
|
this.$refs.phoneInput.val = customer.phone
|
|
|
|
this.$refs.accountInput.val = customer.account
|
|
|
|
this.$refs.positionInput.val = customer.position
|
|
|
|
this.$refs.emailInput.val = customer.email
|
|
|
|
this.customerType = this.customerTypeList.find(e => e.value === customer.customerType).name
|
|
|
|
}).catch(e => {})
|
|
|
|
},
|
|
|
|
// 获取学校列表
|
|
|
|
getSchool() {
|
|
|
|
querySchool({
|
|
|
|
schoolName: '',
|
|
|
|
provinceId: '',
|
|
|
|
cityId: ''
|
|
|
|
}).then(({ list }) => {
|
|
|
|
this.schoolListAll = list
|
|
|
|
this.schoolList = list
|
|
|
|
}).catch(res => {})
|
|
|
|
},
|
|
|
|
// 学校模糊匹配
|
|
|
|
filterSchool() {
|
|
|
|
const { keyword } = this
|
|
|
|
this.schoolList = keyword ?
|
|
|
|
this.schoolListAll.filter(e => e.schoolName.includes(keyword)) :
|
|
|
|
this.schoolListAll
|
|
|
|
},
|
|
|
|
// 关闭学校弹框
|
|
|
|
closeSchool() {
|
|
|
|
this.schoolVisible = false
|
|
|
|
this.keyword = ''
|
|
|
|
},
|
|
|
|
// 客户名称选择回调
|
|
|
|
schoolChange(school) {
|
|
|
|
const { form } = this
|
|
|
|
const { schoolId } = form
|
|
|
|
form.schoolId = school.schoolId
|
|
|
|
form.customerName = school.schoolName
|
|
|
|
form.provinceId = school.provinceId
|
|
|
|
form.provinceName = school.provinceName
|
|
|
|
form.cityId = school.cityId
|
|
|
|
form.cityName = school.cityName
|
|
|
|
this.closeSchool()
|
|
|
|
// 客户名称判重
|
|
|
|
queryCustomerIsExists({
|
|
|
|
schoolId
|
|
|
|
}).then(res => {
|
|
|
|
this.nameRepeat = false
|
|
|
|
}).catch(res => {
|
|
|
|
this.nameRepeat = true
|
|
|
|
})
|
|
|
|
},
|
|
|
|
// 获取行业类
|
|
|
|
getIndustryClass() {
|
|
|
|
queryIndustryClass().then(({ list }) => {
|
|
|
|
this.industryClassList = list
|
|
|
|
}).catch(res => {})
|
|
|
|
},
|
|
|
|
// 行业分类选择回调
|
|
|
|
industryClassChange() {
|
|
|
|
this.getIndustry()
|
|
|
|
},
|
|
|
|
// 获取行业
|
|
|
|
getIndustry() {
|
|
|
|
queryIndustry({
|
|
|
|
industryClassId: this.form.industryClassId
|
|
|
|
}).then(({ list }) => {
|
|
|
|
this.industryList = list
|
|
|
|
}).catch(res => {})
|
|
|
|
},
|
|
|
|
// 跳转
|
|
|
|
toPage(path) {
|
|
|
|
this.$util.to(path)
|
|
|
|
},
|
|
|
|
// 提交
|
|
|
|
submit(ref) {
|
|
|
|
const refs = this.$refs
|
|
|
|
const { form } = this
|
|
|
|
form.name = refs.nameInput.val
|
|
|
|
form.account = refs.accountInput.val
|
|
|
|
form.position = refs.positionInput.val
|
|
|
|
form.phone = refs.phoneInput.val
|
|
|
|
form.email = refs.emailInput.val
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.$refs.form.validate().then(res => {
|
|
|
|
if (this.nameRepeat) return this.$util.errMsg('客户已存在!')
|
|
|
|
if (this.customerId) {
|
|
|
|
updateCustomer(form).then(res => {
|
|
|
|
this.$util.sucMsg('编辑成功')
|
|
|
|
setTimeout(() => {
|
|
|
|
this.$util.to('../clients/clients')
|
|
|
|
}, 1500)
|
|
|
|
}).catch(res => {})
|
|
|
|
} else {
|
|
|
|
addCustomer(form).then(res => {
|
|
|
|
this.$util.sucMsg('添加成功')
|
|
|
|
setTimeout(() => {
|
|
|
|
uni.navigateBack()
|
|
|
|
}, 1500)
|
|
|
|
}).catch(res => {})
|
|
|
|
}
|
|
|
|
}).catch(err => {})
|
|
|
|
})
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.page {
|
|
|
|
padding-bottom: 55px;
|
|
|
|
}
|
|
|
|
.info {
|
|
|
|
.name {
|
|
|
|
margin-bottom: 5px;
|
|
|
|
font-size: 16px;
|
|
|
|
color: #333;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.form {
|
|
|
|
padding: 15px;
|
|
|
|
background-color: #fff;
|
|
|
|
}
|
|
|
|
.action {
|
|
|
|
z-index: 2;
|
|
|
|
position: fixed;
|
|
|
|
bottom: 0;
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-around;
|
|
|
|
width: 100%;
|
|
|
|
padding: 5px 10px;
|
|
|
|
background-color: #fff;
|
|
|
|
border-top: 1px solid #f3f3f3;
|
|
|
|
.item {
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.text {
|
|
|
|
font-size: 10px;
|
|
|
|
color: #959595;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.school-input {
|
|
|
|
padding: 0 10px;
|
|
|
|
font-size: 12px;
|
|
|
|
line-height: 34px;
|
|
|
|
color: #ccc;
|
|
|
|
border: 1px solid #e5e5e5;
|
|
|
|
border-radius: 4px;
|
|
|
|
&.active {
|
|
|
|
color: #333;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.mask {
|
|
|
|
z-index: 9;
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
bottom: 0;
|
|
|
|
right: 0;
|
|
|
|
background-color: rgba(0, 0, 0, .5);
|
|
|
|
}
|
|
|
|
.school-popup {
|
|
|
|
z-index: 10;
|
|
|
|
position: fixed;
|
|
|
|
bottom: 0%;
|
|
|
|
width: 100%;
|
|
|
|
height: 90vh;
|
|
|
|
background-color: #fff;
|
|
|
|
border-top-left-radius: 8px;
|
|
|
|
border-top-right-radius: 8px;
|
|
|
|
.top {
|
|
|
|
text-align: center;
|
|
|
|
line-height: 50px;
|
|
|
|
font-size: 14px;
|
|
|
|
color: #333;
|
|
|
|
border-bottom: 1px solid #f1f1f1;
|
|
|
|
}
|
|
|
|
.close {
|
|
|
|
position: absolute;
|
|
|
|
top: 15px;
|
|
|
|
right: 15px;
|
|
|
|
}
|
|
|
|
.list {
|
|
|
|
max-height: calc(90vh - 103px);
|
|
|
|
padding: 0 15px;
|
|
|
|
overflow: auto;
|
|
|
|
.item {
|
|
|
|
line-height: 34px;
|
|
|
|
font-size: 12px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|