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.
397 lines
11 KiB
397 lines
11 KiB
<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?customerId=${customerId}`)"> |
|
<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() { |
|
const refs = this.$refs |
|
const { form } = this |
|
// 有大量数据的情况下，input输入用v-model会有bug，所以给每个input加ref来手动取值赋值 |
|
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>
|
|
|