8 changed files with 2648 additions and 637 deletions
@ -0,0 +1,85 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
|
||||
|
export default { |
||||
|
// 查询分页列表
|
||||
|
listPage: function(params) { |
||||
|
return request({ |
||||
|
url: '/crm/v1/crmcustomertemp/asListPage', |
||||
|
method: 'post', |
||||
|
data: params, |
||||
|
headers: { 'Content-Type': 'application/json' } |
||||
|
}) |
||||
|
}, |
||||
|
// 初始化
|
||||
|
fetchDetailsBySid: function(data) { |
||||
|
return request({ |
||||
|
url: '/crm/v1/crmcustomertemp/fetchSid/' + data, |
||||
|
method: 'get' |
||||
|
}) |
||||
|
}, |
||||
|
save: function(data) { |
||||
|
return request({ |
||||
|
url: '/crm/v1/crmcustomertemp/save', |
||||
|
method: 'post', |
||||
|
data: data, |
||||
|
headers: { 'Content-Type': 'application/json' } |
||||
|
}) |
||||
|
}, |
||||
|
update: function(data) { |
||||
|
return request({ |
||||
|
url: '/crm/v1/crmcustomertemp/update/' + data.sid, |
||||
|
method: 'post', |
||||
|
data: data, |
||||
|
headers: { 'Content-Type': 'application/json' } |
||||
|
}) |
||||
|
}, |
||||
|
// 根据当前登录用户的部分sid查询客户单位信息
|
||||
|
selCustomerOrgList: function(data) { |
||||
|
return request({ |
||||
|
url: '/crm/v1/crmcustomerorg/selCustomerOrgList', |
||||
|
method: 'get', |
||||
|
params: data |
||||
|
}) |
||||
|
}, |
||||
|
deleteBySids: function(data) { |
||||
|
return request({ |
||||
|
url: '/crm/v1/crmcustomertemp/del/', |
||||
|
method: 'DELETE', |
||||
|
data: data, |
||||
|
headers: { 'Content-Type': 'application/json' } |
||||
|
}) |
||||
|
}, |
||||
|
// 车辆列表
|
||||
|
vehList: function(params) { |
||||
|
return request({ |
||||
|
url: '/as/v1/ascustomervehicle/vehList', |
||||
|
method: 'get', |
||||
|
params: params |
||||
|
}) |
||||
|
}, |
||||
|
// 新增、编辑车辆信息
|
||||
|
details: function(data) { |
||||
|
return request({ |
||||
|
url: '/as/v1/ascustomervehicle/fetchDetailsBySid/' + data, |
||||
|
method: 'get' |
||||
|
}) |
||||
|
}, |
||||
|
// 保存车辆信息
|
||||
|
saveCustomerVeh: function(data) { |
||||
|
return request({ |
||||
|
url: '/as/v1/ascustomervehicle/saveCustomerVeh', |
||||
|
method: 'post', |
||||
|
data: data, |
||||
|
headers: { 'Content-Type': 'application/json' } |
||||
|
}) |
||||
|
}, |
||||
|
// 删除车辆信息
|
||||
|
delBySids: function(data) { |
||||
|
return request({ |
||||
|
url: '/as/v1/ascustomervehicle/delBySids', |
||||
|
method: 'DELETE', |
||||
|
data: data, |
||||
|
headers: { 'Content-Type': 'application/json' } |
||||
|
}) |
||||
|
}, |
||||
|
} |
@ -0,0 +1,449 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<!--列表页面--> |
||||
|
<div v-show="viewState == 1"> |
||||
|
<button-bar view-title="客户管理" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/> |
||||
|
<!--Start查询列表部分--> |
||||
|
<div class="main-content"> |
||||
|
<div class="searchcon"> |
||||
|
<el-button size="small" class="searchbtn" @click="clicksearchShow">{{ searchxianshitit }}</el-button> |
||||
|
<div v-show="isSearchShow" class="search"> |
||||
|
<el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="110px" class="tab-header"> |
||||
|
<el-form-item label="客户名称"> |
||||
|
<el-input v-model="listQuery.params.name" maxlength="20" placeholder="" class="addinputw" clearable/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="客户类型"> |
||||
|
<el-select v-model="listQuery.params.customerTypeKey" class="addinputw" placeholder="请选择"> |
||||
|
<el-option v-for="(item, index) in merType" :key="index.dictKey" :label="item.dictValue" :value="item.dictKey"/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="联系电话"> |
||||
|
<el-input v-model="listQuery.params.mobile" maxlength="20" placeholder="" class="addinputw" clearable/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="客户级别"> |
||||
|
<el-select v-model="listQuery.params.levelKey" class="addinputw" placeholder=""> |
||||
|
<el-option v-for="(item, index) in induslevel" :key="index.dictKey" :label="item.dictValue" :value="item.dictKey"/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="提醒日期"> |
||||
|
<el-date-picker value-format="yyyy-MM-dd" v-model="listQuery.params.remindStartDay" clearable style="width: 160px;" type="date" placeholder="开始日期"/> |
||||
|
<div class="line">至</div> |
||||
|
<el-date-picker value-format="yyyy-MM-dd" v-model="listQuery.params.remindEndDay" clearable style="width: 160px;" type="date" placeholder="结束日期"/> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div class="btn" style="text-align: center;"> |
||||
|
<el-button type="primary" icon="el-icon-search" size="small" @click="handleFilter">查询</el-button> |
||||
|
<el-button type="primary" icon="el-icon-refresh" size="small" @click="handleReset">重置</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!--End查询列表部分--> |
||||
|
<div class="listtop"> |
||||
|
<div class="tit">客户信息列表</div> |
||||
|
<pageye v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/> |
||||
|
</div> |
||||
|
<!--Start 主页面主要部分 --> |
||||
|
<div class=""> |
||||
|
<el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width: 100%;" @selection-change="handleSelectionChange"> |
||||
|
<el-table-column type="selection" align="center" width="50" /> |
||||
|
<el-table-column label="序号" type="index" width="60" :index="indexMethod" align="center" /> |
||||
|
<el-table-column label="客户编号" align="center" min-width="130"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span class="bluezi" @click="toInfo(scope.row)">{{ scope.row.customerNo }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="name" label="客户名称" align="center" min-width="100" /> |
||||
|
<el-table-column prop="customerType" label="客户类型" align="center" width="120" /> |
||||
|
<el-table-column prop="mobile" label="联系电话" align="center" width="120" /> |
||||
|
<el-table-column prop="weixin" label="微信号" align="center" width="120" /> |
||||
|
<el-table-column prop="level" label="客户级别" align="center" width="120" /> |
||||
|
<el-table-column prop="remind_day" label="提醒日期" align="center" width="120" /> |
||||
|
<el-table-column label="车辆" align="center" width="100"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span class="bluezi" @click="lookCar(scope.row)">{{ scope.row.vehCount }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
<!--End 主页面主要部分--> |
||||
|
<div class="pages"> |
||||
|
<div class="tit" /> |
||||
|
<!-- 翻页 --> |
||||
|
<pagination v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList" /> |
||||
|
</div> |
||||
|
<!--End查询列表部分--> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!--新增及修改 --> |
||||
|
<customermanagementAdd v-show="viewState == 2 || viewState == 3" ref="divAdd" @doback="resetState" @reloadlist="getList" /> |
||||
|
<!-- 详情 --> |
||||
|
<customermanagementInfo v-show="viewState == 4" ref="divInfo" @doback="resetState" /> |
||||
|
<!-- 查看车辆列表 --> |
||||
|
<vehicle v-show="viewState == 5" ref="divVehicle" @doback="resetState" /> |
||||
|
<!-- 添加车辆 --> |
||||
|
<vehicleAdd v-show="viewState == 6" ref="divAddVehicle" @doback="resetState" @reloadlist="getList" /> |
||||
|
<!-- 客户登记 --> |
||||
|
<el-dialog :visible.sync="dialogVisible" width="30%"> |
||||
|
<el-form ref="form_obj" v-model="formobj" class="formaddcopy02"> |
||||
|
<el-row style="border-top: 1px solid #E0E3EB"> |
||||
|
<el-col :span="24"> |
||||
|
<div class="span-sty">联络方式</div> |
||||
|
<el-form-item> |
||||
|
<el-select v-model="formobj.visitWayKey" class="addinputInfo" filterable placeholder="" @change="visitWayChange"> |
||||
|
<el-option v-for="item in visitWay_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="24"> |
||||
|
<div class="span-sty">客户类型</div> |
||||
|
<el-form-item> |
||||
|
<el-radio-group class="addinputInfo" v-model="formobj.customerType"> |
||||
|
<el-radio v-for="item in customerType_list" :key="item.dictKey" :label="item.dictValue" @change="customerTypeChange">{{ item.dictValue }}</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click="handleConfirm()">确 定</el-button> |
||||
|
<el-button @click="dialogVisible = false">关 闭</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Pagination from '@/components/pagination' |
||||
|
import pageye from '@/components/pagination/pageye' |
||||
|
import ButtonBar from '@/components/ButtonBar' |
||||
|
import req from '@/api/client/customermanagement' |
||||
|
import customermanagementAdd from './customermanagementAdd' |
||||
|
import customermanagementInfo from './customermanagementInfo' |
||||
|
import vehicle from './relation/vehicle' |
||||
|
import vehicleAdd from './relation/vehicleAdd' |
||||
|
import { typeValues } from '@/api/Common/dictcommons' |
||||
|
|
||||
|
export default { |
||||
|
name: 'CustomerManagement', |
||||
|
components: { |
||||
|
Pagination, |
||||
|
pageye, |
||||
|
ButtonBar, |
||||
|
customermanagementAdd, |
||||
|
customermanagementInfo, |
||||
|
vehicle, |
||||
|
vehicleAdd |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
btndisabled: false, |
||||
|
btnList: [ |
||||
|
{ |
||||
|
type: 'primary', |
||||
|
size: 'small', |
||||
|
icon: 'plus', |
||||
|
btnKey: 'toAdd', |
||||
|
btnLabel: '新增' |
||||
|
}, |
||||
|
{ |
||||
|
type: 'primary', |
||||
|
size: 'small', |
||||
|
icon: 'edit', |
||||
|
btnKey: 'toEdit', |
||||
|
btnLabel: '编辑' |
||||
|
}, |
||||
|
{ |
||||
|
type: 'primary', |
||||
|
size: 'small', |
||||
|
icon: '', |
||||
|
btnKey: 'addVehicle', |
||||
|
btnLabel: '添加车辆' |
||||
|
}, |
||||
|
{ |
||||
|
type: 'danger', |
||||
|
size: 'small', |
||||
|
icon: 'del', |
||||
|
btnKey: 'doDel', |
||||
|
btnLabel: '删除' |
||||
|
}, |
||||
|
{ |
||||
|
type: 'success', |
||||
|
size: 'small', |
||||
|
icon: 'export', |
||||
|
btnKey: 'doExport', |
||||
|
btnLabel: '导出' |
||||
|
}, |
||||
|
{ |
||||
|
type: 'info', |
||||
|
size: 'small', |
||||
|
icon: 'cross', |
||||
|
btnKey: 'doClose', |
||||
|
btnLabel: '关闭' |
||||
|
} |
||||
|
], |
||||
|
isSearchShow: false, |
||||
|
searchxianshitit: '显示查询条件', |
||||
|
viewState: 1, // 1、列表 2、新增 3、编辑 4、查看 |
||||
|
tableKey: 0, |
||||
|
list: [], |
||||
|
sids: [], // 用于导出的时候保存已选择的SIDs |
||||
|
merType: [], |
||||
|
induslevel: [], |
||||
|
visitWay_list: [], |
||||
|
customerType_list: [], |
||||
|
FormLoading: false, |
||||
|
listLoading: false, |
||||
|
// 翻页 |
||||
|
listQuery: { |
||||
|
current: 1, |
||||
|
size: 5, |
||||
|
total: 0, |
||||
|
params: { |
||||
|
customerTypeKey: '', |
||||
|
levelKey: '', |
||||
|
mobile: '', |
||||
|
name: '', |
||||
|
remindStartDay: '', |
||||
|
remindEndtDay: '', |
||||
|
orgPath: '', |
||||
|
userSid: '', |
||||
|
menuUrl: '' |
||||
|
} |
||||
|
}, |
||||
|
dialogVisible: false, |
||||
|
formobj: { |
||||
|
visitWay: '', // 联络方式 |
||||
|
visitWayKey: '', |
||||
|
customerType: '', // 客户类型 |
||||
|
customerTypeKey: '', |
||||
|
psid: '' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
// 初始化变量 |
||||
|
this.init() |
||||
|
this.getList() |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$refs['btnbar'].setButtonList(this.btnList) |
||||
|
}, |
||||
|
methods: { |
||||
|
init() { |
||||
|
typeValues({ type: 'visitWay' }).then((res) => { |
||||
|
if (res.success) { |
||||
|
this.visitWay_list = res.data |
||||
|
} |
||||
|
}) |
||||
|
typeValues({ type: 'customerType' }).then((res) => { |
||||
|
if (res.success) { |
||||
|
this.customerType_list = res.data |
||||
|
} |
||||
|
}) |
||||
|
typeValues({ type: 'customerType' }).then((res) => { |
||||
|
if (res.success) { |
||||
|
this.merType = res.data |
||||
|
} |
||||
|
}) |
||||
|
typeValues({ type: 'customerLevel' }).then((res) => { |
||||
|
if (res.success) { |
||||
|
this.induslevel = res.data |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 搜索条件效果 |
||||
|
clicksearchShow() { |
||||
|
this.isSearchShow = !this.isSearchShow |
||||
|
if (this.isSearchShow) { |
||||
|
this.searchxianshitit = '隐藏查询条件' |
||||
|
} else { |
||||
|
this.searchxianshitit = '显示查询条件' |
||||
|
} |
||||
|
}, |
||||
|
btnHandle(btnKey) { |
||||
|
console.log('XXXXXXXXXXXXXXX ' + btnKey) |
||||
|
switch (btnKey) { |
||||
|
case 'toAdd': |
||||
|
this.toAdd() |
||||
|
break |
||||
|
case 'toEdit': |
||||
|
this.toEdit() |
||||
|
break |
||||
|
case 'addVehicle': |
||||
|
this.addVehicle() |
||||
|
break |
||||
|
case 'doDel': |
||||
|
this.doDel() |
||||
|
break |
||||
|
case 'doExport': |
||||
|
this.doExport() |
||||
|
break |
||||
|
case 'doClose': |
||||
|
this.doClose() |
||||
|
break |
||||
|
default: |
||||
|
break |
||||
|
} |
||||
|
}, |
||||
|
// 信息条数 获取点击时当前的sid |
||||
|
handleSelectionChange(row) { |
||||
|
const aa = [] |
||||
|
row.forEach(element => { |
||||
|
aa.push(element.sid) |
||||
|
}) |
||||
|
this.sids = aa |
||||
|
}, |
||||
|
// 表中序号 |
||||
|
indexMethod(index) { |
||||
|
var pagestart = (this.listQuery.current - 1) * this.listQuery.size |
||||
|
var pageindex = index + 1 + pagestart |
||||
|
return pageindex |
||||
|
}, |
||||
|
// 查询列表信息 |
||||
|
getList() { |
||||
|
this.listLoading = true |
||||
|
this.listQuery.params.userSid = window.sessionStorage.getItem('userSid') |
||||
|
this.listQuery.params.menuUrl = this.$route.path |
||||
|
this.listQuery.params.orgPath = window.sessionStorage.getItem('defaultOrgPath') |
||||
|
req.listPage(this.listQuery).then(response => { |
||||
|
this.listLoading = false |
||||
|
if (response.success) { |
||||
|
this.list = response.data.records |
||||
|
this.listQuery.total = response.data.total |
||||
|
} else { |
||||
|
this.list = [] |
||||
|
this.listQuery.total = 0 |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 查询按钮 |
||||
|
handleFilter() { |
||||
|
this.listQuery.current = 1 |
||||
|
this.getList() |
||||
|
}, |
||||
|
// 点击重置 |
||||
|
handleReset() { |
||||
|
this.listQuery = { |
||||
|
current: 1, |
||||
|
size: 5, |
||||
|
total: 0, |
||||
|
params: { |
||||
|
customerTypeKey: '', |
||||
|
levelKey: '', |
||||
|
mobile: '', |
||||
|
name: '', |
||||
|
remindStartDay: '', |
||||
|
remindEndtDay: '', |
||||
|
orgPath: '', |
||||
|
userSid: '', |
||||
|
menuUrl: '' |
||||
|
} |
||||
|
} |
||||
|
this.getList() |
||||
|
}, |
||||
|
toAdd() { |
||||
|
this.dialogVisible = true |
||||
|
this.formobj = { |
||||
|
visitWay: '', // 联络方式 |
||||
|
visitWayKey: '', |
||||
|
customerType: '', // 客户类型 |
||||
|
customerTypeKey: '', |
||||
|
psid: '' |
||||
|
} |
||||
|
}, |
||||
|
visitWayChange(value) { |
||||
|
const choose = this.visitWay_list.filter((item) => item.dictKey === value) |
||||
|
if (choose.length > 0 && choose !== null) { |
||||
|
this.formobj.visitWay = choose[0].dictValue |
||||
|
} |
||||
|
}, |
||||
|
customerTypeChange(value) { |
||||
|
const choose = this.customerType_list.filter((item) => item.dictValue === value) |
||||
|
if (choose.length > 0 && choose !== null) { |
||||
|
this.formobj.customerTypeKey = choose[0].dictKey |
||||
|
this.formobj.psid = choose[0].sid |
||||
|
} |
||||
|
}, |
||||
|
handleConfirm() { |
||||
|
if (this.formobj.customerType !== '' && this.formobj.visitWay !== '') { |
||||
|
this.dialogVisible = false |
||||
|
this.viewState = 2 |
||||
|
this.$refs['divAdd'].showAdd(this.formobj) |
||||
|
} else { |
||||
|
this.$message({ showClose: true, message: '请填写联络方式和客户类型', type: 'warning' }) |
||||
|
} |
||||
|
}, |
||||
|
toEdit() { |
||||
|
if (this.sids.length === 1) { |
||||
|
this.viewState = 3 |
||||
|
this.$refs['divAdd'].showEdit(this.sids[0]) |
||||
|
} else { |
||||
|
this.$message({ showClose: true, type: 'error', message: '请选择一条记录进行操作' }) |
||||
|
} |
||||
|
}, |
||||
|
toInfo(row) { |
||||
|
this.viewState = 4 |
||||
|
this.$refs['divInfo'].showInfo(row) |
||||
|
}, |
||||
|
addVehicle() { |
||||
|
if (this.sids.length === 1) { |
||||
|
this.viewState = 6 |
||||
|
this.$refs['divAddVehicle'].showAdd(this.sids[0]) |
||||
|
} else { |
||||
|
this.$message({ showClose: true, type: 'error', message: '请选择一条记录进行操作' }) |
||||
|
} |
||||
|
}, |
||||
|
lookCar(row) { |
||||
|
this.viewState = 5 |
||||
|
this.$refs['divVehicle'].showInfo(row) |
||||
|
}, |
||||
|
doExport() {}, |
||||
|
// 删除 |
||||
|
doDel() { |
||||
|
if (this.sids.length === 0) { |
||||
|
this.$message({ showClose: true, type: 'error', message: '请选择至少一条记录进行删除操作' }) |
||||
|
return |
||||
|
} |
||||
|
const tip = '请确认是否删除所选 ' + this.sids.length + ' 条记录?' |
||||
|
this.$confirm(tip, '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
const loading = this.$loading({ |
||||
|
lock: true, |
||||
|
text: 'Loading', |
||||
|
spinner: 'el-icon-loading', |
||||
|
background: 'rgba(0, 0, 0, 0.7)' |
||||
|
}) |
||||
|
req.deleteBySids(this.sids).then(resp => { |
||||
|
if (resp.success) { |
||||
|
this.$message({ type: 'success', message: resp.msg, showClose: true }) |
||||
|
} |
||||
|
this.getList() |
||||
|
loading.close() |
||||
|
}).catch(e => { |
||||
|
loading.close() |
||||
|
}) |
||||
|
}).catch(() => { |
||||
|
}) |
||||
|
}, |
||||
|
// 修改、编辑、详情返回列表页面 |
||||
|
resetState() { |
||||
|
this.viewState = 1 |
||||
|
}, |
||||
|
doClose() { |
||||
|
this.$store.dispatch('tagsView/delView', this.$route) |
||||
|
this.$router.go(-1) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.span-sty { |
||||
|
width: 100px !important; |
||||
|
} |
||||
|
.addinputInfo { |
||||
|
margin-left: 90px !important; |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,511 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div v-show="viewState == 1"> |
||||
|
<div class="tab-header webtop"> |
||||
|
<div>{{ viewTitle }}</div> |
||||
|
<div> |
||||
|
<el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate()">保存</el-button> |
||||
|
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="listconadd"> |
||||
|
<el-form ref="form_obj" :model="formobj" :rules="rules" class="formaddcopy02"> |
||||
|
<el-row style="border-top: 1px solid #e0e3eb"> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty"><span>*</span>客户名称</div> |
||||
|
<el-form-item prop="name"><el-input class="addinputInfo" :disabled="formobj.sid !== ''" style="width: 30%" v-model="formobj.name" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">客户类型</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.customerType }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty"><span>*</span>联系电话</div> |
||||
|
<el-form-item prop="mobile"><el-input class="addinputInfo" :disabled="formobj.sid !== ''" style="width: 30%" v-model="formobj.mobile" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">微信号</div> |
||||
|
<el-form-item><el-input class="addinputInfo" style="width: 30%" v-model="formobj.weixin" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row v-if="formobj.customerType == '个人'"> |
||||
|
<el-col :span="24"> |
||||
|
<div class="span-sty">公司名称</div> |
||||
|
<el-form-item> |
||||
|
<el-select class="addinputInfo" v-model="formobj.customerOrgSid" filterable clearable placeholder="" @change="customerOrgChange"> |
||||
|
<el-option v-for="item in customerOrg_list" :key="item.sid" :label="item.orgName" :value="item.sid"/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="24"> |
||||
|
<div class="span-sty">客户地址</div> |
||||
|
<el-form-item> |
||||
|
<div class="addinputInfo" style="display: flex;flex-direction: row;justify-content: flex-start;align-items: center"> |
||||
|
<el-select v-model="formobj.province" filterable clearable placeholder="请选择省" style="width:160px" @change="provinceChange"> |
||||
|
<el-option v-for="item in province_list" :key="item.sid" :label="item.name" :value="item.name"/> |
||||
|
</el-select> |
||||
|
<el-select v-model="formobj.city" filterable placeholder="请选择市" style="width:160px" @change="cityChange"> |
||||
|
<el-option v-for="item in city_list" :key="item.sid" :label="item.name" :value="item.name"/> |
||||
|
</el-select> |
||||
|
<el-select v-model="formobj.county" filterable placeholder="请选择县" style="width:160px" @change="countyChange"> |
||||
|
<el-option v-for="item in county_list" :key="item.sid" :label="item.name" :value="item.name"/> |
||||
|
</el-select> |
||||
|
<el-input style="width: 30%" v-model="formobj.address" clearable placeholder=""/> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">客户级别</div> |
||||
|
<el-form-item> |
||||
|
<el-select v-model="formobj.levelKey" class="addinputInfo" clearable filterable placeholder="" @change="levelChange"> |
||||
|
<el-option v-for="item in level_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">是否开启提醒</div> |
||||
|
<el-form-item> |
||||
|
<el-radio-group class="addinputInfo" :disabled="formobj.sid !== ''" v-model="formobj.isOnRemind" @change="isOnRemindChange"> |
||||
|
<el-radio label="是">是</el-radio> |
||||
|
<el-radio label="否">否</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row v-show="formobj.isOnRemind == '是'"> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">提醒日期</div> |
||||
|
<el-form-item><el-date-picker class="addinputInfo" v-model="formobj.remind_day" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" /></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">提醒备注</div> |
||||
|
<el-form-item><el-input class="addinputInfo addinputw" v-model="formobj.remind_remark" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<div class="title">更多信息</div> |
||||
|
<el-row v-if="formobj.customerType == '个人'"> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">客户生日</div> |
||||
|
<el-form-item><el-date-picker class="addinputInfo" v-model="formobj.birthday" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" /></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">性别</div> |
||||
|
<el-form-item> |
||||
|
<el-radio-group class="addinputInfo" v-model="formobj.sex" @change="sexChange"> |
||||
|
<el-radio v-for="item in sex_list" :key="item.dictKey" :label="item.dictValue">{{ item.dictValue }}</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">证件类型</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.certificateType }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">证件号码</div> |
||||
|
<el-form-item><el-input class="addinputInfo addinputw" style="width: 30%" v-model="formobj.idnumber" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">证件有效期</div> |
||||
|
<el-form-item><el-date-picker class="addinputInfo" v-model="formobj.endDate" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" /></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">电子邮箱</div> |
||||
|
<el-form-item><el-input class="addinputInfo addinputw" style="width: 30%" v-model="formobj.e_mail" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">紧急联系人</div> |
||||
|
<el-form-item><el-input class="addinputInfo addinputw" style="width: 30%" v-model="formobj.emergencyContact" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">紧急联系电话</div> |
||||
|
<el-form-item><el-input class="addinputInfo addinputw" style="width: 30%" v-model="formobj.emergencyMobile" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">客户来源</div> |
||||
|
<el-form-item> |
||||
|
<el-select v-model="formobj.sourceKey" class="addinputInfo" clearable filterable placeholder="" @change="sourceChange"> |
||||
|
<el-option v-for="item in source_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">客户分类</div> |
||||
|
<el-form-item> |
||||
|
<el-select v-model="formobj.customerClassKey" class="addinputInfo" clearable filterable placeholder="" @change="customerClassChange"> |
||||
|
<el-option v-for="item in customerClass_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="24"> |
||||
|
<div class="span-sty">备注</div> |
||||
|
<el-form-item><el-input class="addinputInfo addinputw" v-model="formobj.remarks" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import req from '@/api/client/customermanagement' |
||||
|
import { getProvince, getCity, getCounty, typeValues } from '@/api/Common/dictcommons' |
||||
|
|
||||
|
export default { |
||||
|
name: 'CustomerManagementAdd', |
||||
|
data() { |
||||
|
return { |
||||
|
viewTitle: '', |
||||
|
viewState: 1, |
||||
|
submitdisabled: false, |
||||
|
customerOrg_list: [], |
||||
|
province_list: [], |
||||
|
city_list: [], |
||||
|
county_list: [], |
||||
|
level_list: [], |
||||
|
sex_list: [], |
||||
|
source_list: [], |
||||
|
customerClass_list: [], |
||||
|
formobj: { |
||||
|
name: '', |
||||
|
customerType: '', |
||||
|
customerTypeKey: '', |
||||
|
visitWay: '', |
||||
|
visitWayKey: '', |
||||
|
mobile: '', |
||||
|
weixin: '', |
||||
|
province: '', |
||||
|
city: '', |
||||
|
county: '', |
||||
|
address: '', |
||||
|
level: '', |
||||
|
levelKey: '', |
||||
|
isOnRemind: '', |
||||
|
isOnRemindKey: '', |
||||
|
remind_day: '', |
||||
|
remind_remark: '', |
||||
|
birthday: '', |
||||
|
sex: '', |
||||
|
sexKey: '', |
||||
|
certificateType: '', |
||||
|
certificateTypeKey: '', |
||||
|
idnumber: '', |
||||
|
endDate: '', |
||||
|
e_mail: '', |
||||
|
emergencyContact: '', |
||||
|
emergencyMobile: '', |
||||
|
source: '', |
||||
|
sourceKey: '', |
||||
|
customerClass: '', |
||||
|
customerClassKey: '', |
||||
|
remarks: '', |
||||
|
userSid: '', |
||||
|
orgPath: '', |
||||
|
useOrgSid: '', |
||||
|
sid: '', |
||||
|
customerOrgName: '', |
||||
|
customerOrgSid: '' |
||||
|
}, |
||||
|
rules: { |
||||
|
name: [{ required: true, message: '客户名称不能为空', trigger: 'blur' }], |
||||
|
mobile: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
init() { |
||||
|
getProvince().then((res) => { |
||||
|
if (res.success) { |
||||
|
this.province_list = res.data |
||||
|
} |
||||
|
}) |
||||
|
typeValues({ type: 'customerLevel' }).then((res) => { |
||||
|
if (res.success) { |
||||
|
this.level_list = res.data |
||||
|
} |
||||
|
}) |
||||
|
typeValues({ type: 'sex' }).then((res) => { |
||||
|
if (res.success) { |
||||
|
this.sex_list = res.data |
||||
|
} |
||||
|
}) |
||||
|
typeValues({ type: 'customerSource' }).then((res) => { |
||||
|
if (res.success) { |
||||
|
this.source_list = res.data |
||||
|
} |
||||
|
}) |
||||
|
req.selCustomerOrgList({ useOrgSid: window.sessionStorage.getItem('defaultOrgPath').substring(window.sessionStorage.getItem('defaultOrgPath').lastIndexOf('/') + 1) }).then((res) => { |
||||
|
if (res.success) { |
||||
|
this.customerOrg_list = res.data |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
customerOrgChange(value) { |
||||
|
const choose = this.customerOrg_list.filter((item) => item.sid === value) |
||||
|
if (choose.length > 0 && choose !== null) { |
||||
|
this.formobj.customerOrgName = choose[0].orgName |
||||
|
} else { |
||||
|
this.formobj.customerOrgName = '' |
||||
|
} |
||||
|
}, |
||||
|
provinceChange(value) { |
||||
|
const choose = this.province_list.filter((item) => item.name === value) |
||||
|
if (choose !== null && choose.length > 0) { |
||||
|
this.formobj.provinceSid = choose[0].sid |
||||
|
this.getCity(this.formobj.provinceSid) |
||||
|
} else { |
||||
|
this.formobj.provinceSid = '' |
||||
|
this.formobj.citySid = '' |
||||
|
this.formobj.city = '' |
||||
|
this.city_list = [] |
||||
|
this.formobj.county = '' |
||||
|
this.formobj.countySid = '' |
||||
|
this.county_list = [] |
||||
|
} |
||||
|
}, |
||||
|
getCity(val) { |
||||
|
getCity({ sid: val }).then((res) => { |
||||
|
if (res.success) { |
||||
|
this.city_list = res.data |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
cityChange(value) { |
||||
|
const choose = this.city_list.filter((item) => item.name === value) |
||||
|
if (choose !== null && choose.length > 0) { |
||||
|
this.formobj.citySid = choose[0].sid |
||||
|
this.getCounty(this.formobj.citySid) |
||||
|
} |
||||
|
}, |
||||
|
getCounty(val) { |
||||
|
getCounty({ sid: val }).then((res) => { |
||||
|
if (res.success) { |
||||
|
this.county_list = res.data |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
countyChange(value) { |
||||
|
const choose = this.county_list.filter((item) => item.name === value) |
||||
|
if (choose !== null && choose.length > 0) { |
||||
|
this.formobj.countySid = choose[0].sid |
||||
|
} |
||||
|
}, |
||||
|
showAdd(value) { |
||||
|
this.viewTitle = '【新增】客户信息' |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs['form_obj'].clearValidate() |
||||
|
}) |
||||
|
this.init() |
||||
|
this.formobj.isOnRemind = '否' |
||||
|
this.formobj.isOnRemindKey = '0' |
||||
|
this.formobj.customerType = value.customerType |
||||
|
this.formobj.customerTypeKey = value.customerTypeKey |
||||
|
this.formobj.visitWay = value.visitWay |
||||
|
this.formobj.visitWayKey = value.visitWayKey |
||||
|
this.formobj.userSid = window.sessionStorage.getItem('userSid') |
||||
|
this.formobj.orgPath = window.sessionStorage.getItem('defaultOrgPath') |
||||
|
this.formobj.useOrgSid = window.sessionStorage.getItem('defaultOrgPath').substring(window.sessionStorage.getItem('defaultOrgPath').lastIndexOf('/') + 1) |
||||
|
|
||||
|
if (this.formobj.customerType === '个人') { |
||||
|
this.formobj.certificateType = '身份证' |
||||
|
this.formobj.certificateTypeKey = '01' |
||||
|
} else { |
||||
|
this.formobj.certificateType = '营业执照' |
||||
|
this.formobj.certificateTypeKey = '02' |
||||
|
} |
||||
|
typeValues({ psid: value.psid, type: 'customerClass' }).then((res) => { |
||||
|
if (res.success) { |
||||
|
this.customerClass_list = res.data |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
showEdit(sid) { |
||||
|
this.viewTitle = '【编辑】客户信息' |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs['form_obj'].clearValidate() |
||||
|
}) |
||||
|
this.init() |
||||
|
req.fetchDetailsBySid(sid).then((res) => { |
||||
|
if (res.success) { |
||||
|
this.formobj = res.data |
||||
|
typeValues({ type: 'customerType' }).then((resp) => { |
||||
|
if (resp.success) { |
||||
|
this.customerType_list = resp.data |
||||
|
this.customerType_list.forEach((e) => { |
||||
|
if (e.dictValue === this.formobj.customerType) { |
||||
|
typeValues({ psid: e.sid, type: 'customerClass' }).then((respsone) => { |
||||
|
if (respsone.success) { |
||||
|
this.customerClass_list = respsone.data |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
levelChange(value) { |
||||
|
const choose = this.level_list.filter((item) => item.dictKey === value) |
||||
|
if (choose.length > 0 && choose !== null) { |
||||
|
this.formobj.level = choose[0].dictValue |
||||
|
} else { |
||||
|
this.formobj.level = '' |
||||
|
} |
||||
|
}, |
||||
|
isOnRemindChange(val) { |
||||
|
if (val === '是') { |
||||
|
this.formobj.isOnRemindKey = '1' |
||||
|
} else if (val === '否') { |
||||
|
this.formobj.isOnRemindKey = '0' |
||||
|
} |
||||
|
}, |
||||
|
sexChange(value) { |
||||
|
const choose = this.sex_list.filter((item) => item.dictValue === value) |
||||
|
if (choose.length > 0 && choose !== null) { |
||||
|
this.formobj.sexKey = choose[0].dictKey |
||||
|
} |
||||
|
}, |
||||
|
sourceChange(value) { |
||||
|
const choose = this.source_list.filter((item) => item.dictKey === value) |
||||
|
if (choose.length > 0 && choose !== null) { |
||||
|
this.formobj.source = choose[0].dictValue |
||||
|
} else { |
||||
|
this.formobj.source = '' |
||||
|
} |
||||
|
}, |
||||
|
customerClassChange(value) { |
||||
|
const choose = this.customerClass_list.filter((item) => item.dictKey === value) |
||||
|
if (choose.length > 0 && choose !== null) { |
||||
|
this.formobj.customerClass = choose[0].dictValue |
||||
|
} else { |
||||
|
this.formobj.customerClass = '' |
||||
|
} |
||||
|
}, |
||||
|
saveOrUpdate() { |
||||
|
this.$refs['form_obj'].validate((valid) => { |
||||
|
if (valid) { |
||||
|
if (this.formobj.customerType === '企业' && this.formobj.name.length < 5) { |
||||
|
this.$message({ showClose: true, type: 'error', message: '因客户类型为企业,客户名称的长度应不少于5个汉字' }) |
||||
|
return |
||||
|
} |
||||
|
this.submitdisabled = true |
||||
|
if (this.formobj.sid === '') { |
||||
|
const tip = '客户名称、联系电话一经保存,无法修改,是否继续保存' |
||||
|
this.$confirm(tip, '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
console.log(this.formobj) |
||||
|
req.save(this.formobj).then((res) => { |
||||
|
if (res.success) { |
||||
|
this.$message({ showClose: true, type: 'success', message: '保存成功' }) |
||||
|
this.handleReturn('true') |
||||
|
} else { |
||||
|
this.submitdisabled = false |
||||
|
} |
||||
|
}).catch(() => { |
||||
|
this.submitdisabled = false |
||||
|
}) |
||||
|
}) |
||||
|
} else { |
||||
|
req.update(this.formobj).then((res) => { |
||||
|
if (res.success) { |
||||
|
this.$message({ showClose: true, type: 'success', message: '保存成功' }) |
||||
|
this.handleReturn('true') |
||||
|
} else { |
||||
|
this.submitdisabled = false |
||||
|
} |
||||
|
}).catch(() => { |
||||
|
this.submitdisabled = false |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
handleReturn(isreload) { |
||||
|
if (isreload === 'true') this.$emit('reloadlist') |
||||
|
this.formobj = { |
||||
|
name: '', |
||||
|
customerType: '', |
||||
|
customerTypeKey: '', |
||||
|
visitWay: '', |
||||
|
visitWayKey: '', |
||||
|
mobile: '', |
||||
|
weixin: '', |
||||
|
province: '', |
||||
|
city: '', |
||||
|
county: '', |
||||
|
address: '', |
||||
|
level: '', |
||||
|
levelKey: '', |
||||
|
isOnRemind: '', |
||||
|
isOnRemindKey: '', |
||||
|
remind_day: '', |
||||
|
remind_remark: '', |
||||
|
birthday: '', |
||||
|
sex: '', |
||||
|
sexKey: '', |
||||
|
certificateType: '', |
||||
|
certificateTypeKey: '', |
||||
|
idnumber: '', |
||||
|
endDate: '', |
||||
|
e_mail: '', |
||||
|
emergencyContact: '', |
||||
|
emergencyMobile: '', |
||||
|
source: '', |
||||
|
sourceKey: '', |
||||
|
customerClass: '', |
||||
|
customerClassKey: '', |
||||
|
remarks: '', |
||||
|
userSid: '', |
||||
|
orgPath: '', |
||||
|
useOrgSid: '', |
||||
|
sid: '', |
||||
|
customerOrgName: '', |
||||
|
customerOrgSid: '' |
||||
|
} |
||||
|
this.submitdisabled = false |
||||
|
this.$emit('doback') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.span-sty { |
||||
|
width: 130px !important; |
||||
|
} |
||||
|
.addinputInfo { |
||||
|
margin-left: 120px !important; |
||||
|
} |
||||
|
.formaddcopy02 .el-row .el-col /deep/ .el-form-item .addinputw { |
||||
|
margin-left: 120px !important; |
||||
|
width: calc(100% - 115px); |
||||
|
} |
||||
|
/deep/ .el-form-item__error { |
||||
|
margin-left: 120px !important; |
||||
|
} |
||||
|
.formaddcopy02 .el-row .el-col /deep/ .el-form-item .el-radio-group { |
||||
|
display: inline; |
||||
|
line-height: 1px; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,245 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div v-show="viewState == 1"> |
||||
|
<div class="tab-header webtop"> |
||||
|
<div>{{ viewTitle }}</div> |
||||
|
<div> |
||||
|
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="listconadd"> |
||||
|
<el-form ref="form_obj" :model="formobj" :rules="rules" class="formaddcopy02"> |
||||
|
<el-row style="border-top: 1px solid #e0e3eb"> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">客户名称</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.name }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">客户类型</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.customerType }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">联系电话</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.mobile }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">微信号</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.weixin }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row v-if="formobj.customerType == '个人'"> |
||||
|
<el-col :span="24"> |
||||
|
<div class="span-sty">公司名称</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.customerOrgName }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="24"> |
||||
|
<div class="span-sty">客户地址</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.province }}{{ formobj.city }}{{ formobj.county }}{{ formobj.address }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">客户级别</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.level }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">是否开启提醒</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.isOnRemind }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row v-show="formobj.isOnRemind == '是'"> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">提醒日期</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.remind_day }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">提醒备注</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.remind_remark }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<div class="title">更多信息</div> |
||||
|
<el-row v-if="formobj.customerType == '个人'"> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">客户生日</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.birthday }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">性别</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.sex }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">证件类型</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.certificateType }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">证件号码</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.idnumber }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">证件有效期</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.endDate }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">电子邮箱</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.e_mail }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">紧急联系人</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.emergencyContact }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">紧急联系电话</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.emergencyMobile }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">客户来源</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.source }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">客户分类</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.customerClass }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="24"> |
||||
|
<div class="span-sty">备注</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.remarks }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import req from '@/api/client/customermanagement' |
||||
|
|
||||
|
export default { |
||||
|
name: 'CustomerManagementInfo', |
||||
|
data() { |
||||
|
return { |
||||
|
viewTitle: '', |
||||
|
viewState: 1, |
||||
|
formobj: { |
||||
|
name: '', |
||||
|
customerType: '', |
||||
|
customerTypeKey: '', |
||||
|
visitWay: '', |
||||
|
visitWayKey: '', |
||||
|
mobile: '', |
||||
|
weixin: '', |
||||
|
province: '', |
||||
|
city: '', |
||||
|
county: '', |
||||
|
address: '', |
||||
|
level: '', |
||||
|
levelKey: '', |
||||
|
isOnRemind: '', |
||||
|
isOnRemindKey: '', |
||||
|
remind_day: '', |
||||
|
remind_remark: '', |
||||
|
birthday: '', |
||||
|
sex: '', |
||||
|
sexKey: '', |
||||
|
certificateType: '', |
||||
|
certificateTypeKey: '', |
||||
|
idnumber: '', |
||||
|
endDate: '', |
||||
|
e_mail: '', |
||||
|
emergencyContact: '', |
||||
|
emergencyMobile: '', |
||||
|
source: '', |
||||
|
sourceKey: '', |
||||
|
customerClass: '', |
||||
|
customerClassKey: '', |
||||
|
remarks: '', |
||||
|
userSid: '', |
||||
|
orgPath: '', |
||||
|
useOrgSid: '', |
||||
|
sid: '', |
||||
|
customerOrgName: '', |
||||
|
customerOrgSid: '' |
||||
|
}, |
||||
|
rules: {} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
showInfo(row) { |
||||
|
this.viewTitle = '客户信息详情' |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs['form_obj'].clearValidate() |
||||
|
}) |
||||
|
req.fetchDetailsBySid(row.sid).then((res) => { |
||||
|
if (res.success) { |
||||
|
this.formobj = res.data |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
handleReturn() { |
||||
|
this.formobj = { |
||||
|
name: '', |
||||
|
customerType: '', |
||||
|
customerTypeKey: '', |
||||
|
visitWay: '', |
||||
|
visitWayKey: '', |
||||
|
mobile: '', |
||||
|
weixin: '', |
||||
|
province: '', |
||||
|
city: '', |
||||
|
county: '', |
||||
|
address: '', |
||||
|
level: '', |
||||
|
levelKey: '', |
||||
|
isOnRemind: '', |
||||
|
isOnRemindKey: '', |
||||
|
remind_day: '', |
||||
|
remind_remark: '', |
||||
|
birthday: '', |
||||
|
sex: '', |
||||
|
sexKey: '', |
||||
|
certificateType: '', |
||||
|
certificateTypeKey: '', |
||||
|
idnumber: '', |
||||
|
endDate: '', |
||||
|
e_mail: '', |
||||
|
emergencyContact: '', |
||||
|
emergencyMobile: '', |
||||
|
source: '', |
||||
|
sourceKey: '', |
||||
|
customerClass: '', |
||||
|
customerClassKey: '', |
||||
|
remarks: '', |
||||
|
userSid: '', |
||||
|
orgPath: '', |
||||
|
useOrgSid: '', |
||||
|
sid: '', |
||||
|
customerOrgName: '', |
||||
|
customerOrgSid: '' |
||||
|
} |
||||
|
this.$emit('doback') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.span-sty { |
||||
|
width: 130px !important; |
||||
|
} |
||||
|
.addinputInfo { |
||||
|
margin-left: 120px !important; |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,148 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div v-show="viewState == 1"> |
||||
|
<div class="tab-header webtop"> |
||||
|
<div>{{ viewTitle }}</div> |
||||
|
<div> |
||||
|
<el-button type="primary" size="small" @click="handleEdit()">编辑</el-button> |
||||
|
<el-button type="danger" size="small" @click="handleDelete()">删除</el-button> |
||||
|
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="listconadd"> |
||||
|
<el-form ref="form_obj" :model="formobj" class="formaddcopy02"> |
||||
|
<div class="title ">车辆列表</div> |
||||
|
<el-table :key="tableKey" :data="formobj.list" :index="index" border style="width: 100%" @selection-change="handleSelectionChange"> |
||||
|
<el-table-column type="selection" align="center" width="50"/> |
||||
|
<el-table-column fixed width="60" label="序号" type="index" :index="index + 1" align="center"/> |
||||
|
<el-table-column fixed label="操作" align="center" width="100"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button type="primary" size="small" @click="toInfo(scope.row)">查看</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="vehMark" label="车牌号" align="center" min-width="140" /> |
||||
|
<el-table-column prop="vinNo" label="车架号" align="center" min-width="150" /> |
||||
|
<el-table-column prop="buyDate" label="购车日期" align="center" width="120" /> |
||||
|
<el-table-column prop="lastMileage" label="上次保养里程" align="center" width="140" /> |
||||
|
<el-table-column prop="nextMaintainDate" label="下次保养日期" align="center" width="140" /> |
||||
|
</el-table> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 编辑车辆信息 --> |
||||
|
<vehicleAdd v-show="viewState == 2" ref="divAdd" @doback="resetState" @reloadlist="reload" /> |
||||
|
<!-- 查看车辆详情 --> |
||||
|
<vehicleInfo v-show="viewState == 3" ref="divInfo" @doback="resetState" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import req from '@/api/client/customermanagement' |
||||
|
import vehicleAdd from './vehicleAdd' |
||||
|
import vehicleInfo from './vehicleInfo' |
||||
|
|
||||
|
export default { |
||||
|
name: 'Vehicle', |
||||
|
components: { |
||||
|
vehicleAdd, |
||||
|
vehicleInfo |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
viewTitle: '', |
||||
|
viewState: 1, |
||||
|
submitdisabled: false, |
||||
|
tableKey: 1, |
||||
|
index: 0, |
||||
|
sids: [], |
||||
|
formobj: { |
||||
|
sid: '', |
||||
|
list: [] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
showInfo(row) { |
||||
|
this.viewTitle = '车辆信息' |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs['form_obj'].clearValidate() |
||||
|
}) |
||||
|
this.formobj.sid = row.sid |
||||
|
req.vehList({ sid: row.sid }).then((res) => { |
||||
|
if (res.success) { |
||||
|
this.formobj.list = res.data |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 信息条数 获取点击时当前的sid |
||||
|
handleSelectionChange(row) { |
||||
|
const aa = [] |
||||
|
row.forEach(element => { |
||||
|
aa.push(element.customerVehSid) |
||||
|
}) |
||||
|
this.sids = aa |
||||
|
}, |
||||
|
handleEdit() { |
||||
|
if (this.sids.length === 1) { |
||||
|
this.viewState = 2 |
||||
|
this.$refs['divAdd'].showEdit(this.sids[0]) |
||||
|
} else { |
||||
|
this.$message({ showClose: true, type: 'error', message: '请选择一条记录进行操作' }) |
||||
|
} |
||||
|
}, |
||||
|
handleDelete() { |
||||
|
if (this.sids.length === 0) { |
||||
|
this.$message({ showClose: true, type: 'error', message: '请选择至少一条记录进行删除操作' }) |
||||
|
return |
||||
|
} |
||||
|
const tip = '请确认是否删除所选 ' + this.sids.length + ' 条记录?' |
||||
|
this.$confirm(tip, '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
const loading = this.$loading({ |
||||
|
lock: true, |
||||
|
text: 'Loading', |
||||
|
spinner: 'el-icon-loading', |
||||
|
background: 'rgba(0, 0, 0, 0.7)' |
||||
|
}) |
||||
|
req.delBySids(this.sids).then((resp) => { |
||||
|
if (resp.success) { |
||||
|
this.$message({ type: 'success', message: resp.msg, showClose: true }) |
||||
|
} |
||||
|
this.reload() |
||||
|
loading.close() |
||||
|
}).catch(e => { |
||||
|
loading.close() |
||||
|
}) |
||||
|
}).catch(() => { |
||||
|
}) |
||||
|
}, |
||||
|
toInfo(row) { |
||||
|
this.viewState = 3 |
||||
|
this.$refs['divInfo'].showInfo(row.customerVehSid) |
||||
|
}, |
||||
|
reload() { |
||||
|
req.vehList({ sid: this.formobj.sid }).then((res) => { |
||||
|
if (res.success) { |
||||
|
this.formobj.list = res.data |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
resetState() { |
||||
|
this.viewState = 1 |
||||
|
}, |
||||
|
handleReturn() { |
||||
|
this.formobj = { |
||||
|
sid: '', |
||||
|
list: [] |
||||
|
} |
||||
|
this.submitdisabled = false |
||||
|
this.$emit('doback') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped></style> |
@ -0,0 +1,302 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div v-show="viewState == 1"> |
||||
|
<div class="tab-header webtop"> |
||||
|
<div>{{ viewTitle }}</div> |
||||
|
<div> |
||||
|
<el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate()">保存</el-button> |
||||
|
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="listconadd"> |
||||
|
<el-form ref="form_obj" :model="formobj" :rules="rules" class="formaddcopy02"> |
||||
|
<div class="title">车辆信息</div> |
||||
|
<el-row style="border-top: 1px solid #e0e3eb"> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">车牌号</div> |
||||
|
<el-form-item><el-input class="addinputInfo" style="width: 40%" v-model="formobj.vehMark" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">车架号</div> |
||||
|
<el-form-item><el-input class="addinputInfo" style="width: 40%" v-model="formobj.vinNo" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">发动机号</div> |
||||
|
<el-form-item><el-input class="addinputInfo" style="width: 40%" v-model="formobj.engineNo" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">车型</div> |
||||
|
<el-form-item><el-input class="addinputInfo" style="width: 40%" v-model="formobj.vehModel" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">购车日期</div> |
||||
|
<el-form-item> <el-date-picker class="addinputInfo" value-format="yyyy-MM-dd" v-model="formobj.buyDate" clearable type="date" placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">行驶里程</div> |
||||
|
<el-form-item><el-input class="addinputInfo" style="width: 40%" @keyup.native="formobj.mileage = getNumber(formobj.mileage, 2)" v-model="formobj.mileage" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">上次保养里程</div> |
||||
|
<el-form-item><el-input class="addinputInfo" style="width: 40%" @keyup.native="formobj.lastMileage = getNumber(formobj.lastMileage, 2)" v-model="formobj.lastMileage" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">下次保养日期</div> |
||||
|
<el-form-item> <el-date-picker class="addinputInfo" value-format="yyyy-MM-dd" v-model="formobj.nextMaintainDate" clearable type="date" placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">商业险到期日期</div> |
||||
|
<el-form-item> <el-date-picker class="addinputInfo" value-format="yyyy-MM-dd" v-model="formobj.commercialInsuranceEndDate" clearable type="date" placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">交强险到期日期</div> |
||||
|
<el-form-item> <el-date-picker class="addinputInfo" value-format="yyyy-MM-dd" v-model="formobj.compulsoryInsuranceEndDate" clearable type="date" placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="24"> |
||||
|
<div class="span-sty">备注</div> |
||||
|
<el-form-item><el-input class="addinputInfo" style="width: 40%" v-model="formobj.remarks" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<div class="title">保养到期明细</div> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">行驶里程</div> |
||||
|
<el-form-item><el-input class="addinputInfo" style="width: 40%" @keyup.native="formobj.currentMileage = getNumber(formobj.currentMileage, 2)" v-model="formobj.currentMileage" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">每月公里</div> |
||||
|
<el-form-item><el-input class="addinputInfo" style="width: 40%" @keyup.native="formobj.monthKm = getNumber(formobj.monthKm, 2)" v-model="formobj.monthKm" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">滤芯到期公里</div> |
||||
|
<el-form-item><el-input class="addinputInfo" style="width: 40%" @keyup.native="formobj.filter_km = getNumber(formobj.filter_km, 2)" v-model="formobj.filter_km" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">滤芯到期日期</div> |
||||
|
<el-form-item> <el-date-picker class="addinputInfo" value-format="yyyy-MM-dd" v-model="formobj.filter_date" clearable type="date" placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">机油到期公里</div> |
||||
|
<el-form-item><el-input class="addinputInfo" style="width: 40%" @keyup.native="formobj.engineoil_km = getNumber(formobj.engineoil_km, 2)" v-model="formobj.engineoil_km" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">机油到期日期</div> |
||||
|
<el-form-item> <el-date-picker class="addinputInfo" value-format="yyyy-MM-dd" v-model="formobj.engineoil_date" clearable type="date" placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">齿轮油到期公里</div> |
||||
|
<el-form-item><el-input class="addinputInfo" style="width: 40%" @keyup.native="formobj.gearoil_km = getNumber(formobj.gearoil_km, 2)" v-model="formobj.gearoil_km" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">齿轮油到期日期</div> |
||||
|
<el-form-item> <el-date-picker class="addinputInfo" value-format="yyyy-MM-dd" v-model="formobj.gearoil_date" clearable type="date" placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">宝轮到期公里</div> |
||||
|
<el-form-item><el-input class="addinputInfo" style="width: 40%" @keyup.native="formobj.treasurewheel_km = getNumber(formobj.treasurewheel_km, 2)" v-model="formobj.treasurewheel_km" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">宝轮到期日期</div> |
||||
|
<el-form-item> <el-date-picker class="addinputInfo" value-format="yyyy-MM-dd" v-model="formobj.treasurewheel_date" clearable type="date" placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">风扇皮带到期公里</div> |
||||
|
<el-form-item><el-input class="addinputInfo" style="width: 40%" @keyup.native="formobj.fanbelt_km = getNumber(formobj.fanbelt_km, 2)" v-model="formobj.fanbelt_km" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">风扇皮带到期日期</div> |
||||
|
<el-form-item> <el-date-picker class="addinputInfo" value-format="yyyy-MM-dd" v-model="formobj.fanbelt_date" clearable type="date" placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">刹车片带到期公里</div> |
||||
|
<el-form-item><el-input class="addinputInfo" style="width: 40%" @keyup.native="formobj.brakepads_km = getNumber(formobj.brakepads_km, 2)" v-model="formobj.brakepads_km" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">刹车片带到期日期</div> |
||||
|
<el-form-item> <el-date-picker class="addinputInfo" value-format="yyyy-MM-dd" v-model="formobj.brakepads_date" clearable type="date" placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="24"> |
||||
|
<div class="span-sty">备注</div> |
||||
|
<el-form-item><el-input class="addinputInfo" style="width: 40%" v-model="formobj.remarks" clearable placeholder="" /></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import req from '@/api/client/customermanagement' |
||||
|
|
||||
|
export default { |
||||
|
name: 'VehicleAdd', |
||||
|
data() { |
||||
|
return { |
||||
|
viewTitle: '', |
||||
|
viewState: 1, |
||||
|
submitdisabled: false, |
||||
|
formobj: { |
||||
|
customerVehSid: '', |
||||
|
customerSid: '', |
||||
|
vehMark: '', |
||||
|
vinNo: '', |
||||
|
engineNo: '', |
||||
|
vehModelSid: '', |
||||
|
vehModel: '', |
||||
|
mileage: '', |
||||
|
lastMileage: '', |
||||
|
nextMaintainDate: '', |
||||
|
buyDate: '', |
||||
|
commercialInsuranceEndDate: '', |
||||
|
compulsoryInsuranceEndDate: '', |
||||
|
currentMileage: '', |
||||
|
monthKm: '', |
||||
|
filter_km: '', |
||||
|
filter_date: '', |
||||
|
engineoil_km: '', |
||||
|
engineoil_date: '', |
||||
|
gearoil_km: '', |
||||
|
gearoil_date: '', |
||||
|
treasurewheel_km: '', |
||||
|
treasurewheel_date: '', |
||||
|
fanbelt_km: '', |
||||
|
fanbelt_date: '', |
||||
|
brakepads_km: '', |
||||
|
brakepads_date: '' |
||||
|
}, |
||||
|
rules: {} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
showAdd(sid) { |
||||
|
this.viewTitle = '【新增】车辆' |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs['form_obj'].clearValidate() |
||||
|
}) |
||||
|
this.formobj.customerSid = sid |
||||
|
}, |
||||
|
showEdit(sid) { |
||||
|
this.viewTitle = '【编辑】车辆' |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs['form_obj'].clearValidate() |
||||
|
}) |
||||
|
req.details(sid).then((res) => { |
||||
|
if (res.success) { |
||||
|
this.formobj = res.data |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
getNumber(val, limit) { |
||||
|
val = val.replace(/[^0-9.]/g, '') // 保留数字 |
||||
|
val = val.replace(/^00/, '0.') // 开头不能有两个0 |
||||
|
val = val.replace(/^\./g, '0.') // 开头为小数点转换为0. |
||||
|
val = val.replace(/\.{2,}/g, '.') // 两个以上的小数点转换成一个 |
||||
|
val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.'); // 只保留一个小数点 |
||||
|
/^0\d+/.test(val) ? val = val.slice(1) : '' // 两位以上数字开头不能为0 |
||||
|
const str = '^(\\d+)\\.(\\d{' + limit + '}).*$' |
||||
|
const reg = new RegExp(str) |
||||
|
if (limit === 0) { |
||||
|
// 不需要小数点 |
||||
|
val = val.replace(reg, '$1') |
||||
|
} else { |
||||
|
// 通过正则保留小数点后指定的位数 |
||||
|
val = val.replace(reg, '$1.$2') |
||||
|
} |
||||
|
return val |
||||
|
}, |
||||
|
saveOrUpdate() { |
||||
|
this.$refs['form_obj'].validate((valid) => { |
||||
|
if (valid) { |
||||
|
this.submitdisabled = true |
||||
|
this.formobj.payableAmount = this.yfTotal |
||||
|
req.saveCustomerVeh(this.formobj).then((res) => { |
||||
|
if (res.success) { |
||||
|
this.$message({ showClose: true, type: 'success', message: '保存成功' }) |
||||
|
this.handleReturn('true') |
||||
|
} else { |
||||
|
this.submitdisabled = false |
||||
|
} |
||||
|
}).catch(() => { |
||||
|
this.submitdisabled = false |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
handleReturn(isreload) { |
||||
|
if (isreload === 'true') this.$emit('reloadlist') |
||||
|
this.formobj = { |
||||
|
customerVehSid: '', |
||||
|
customerSid: '', |
||||
|
vehMark: '', |
||||
|
vinNo: '', |
||||
|
engineNo: '', |
||||
|
vehModelSid: '', |
||||
|
vehModel: '', |
||||
|
mileage: '', |
||||
|
lastMileage: '', |
||||
|
nextMaintainDate: '', |
||||
|
buyDate: '', |
||||
|
commercialInsuranceEndDate: '', |
||||
|
compulsoryInsuranceEndDate: '', |
||||
|
currentMileage: '', |
||||
|
monthKm: '', |
||||
|
filter_km: '', |
||||
|
filter_date: '', |
||||
|
engineoil_km: '', |
||||
|
engineoil_date: '', |
||||
|
gearoil_km: '', |
||||
|
gearoil_date: '', |
||||
|
treasurewheel_km: '', |
||||
|
treasurewheel_date: '', |
||||
|
fanbelt_km: '', |
||||
|
fanbelt_date: '', |
||||
|
brakepads_km: '', |
||||
|
brakepads_date: '' |
||||
|
} |
||||
|
this.submitdisabled = false |
||||
|
this.$emit('doback') |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.span-sty { |
||||
|
width: 130px !important; |
||||
|
} |
||||
|
.addinputInfo { |
||||
|
margin-left: 120px !important; |
||||
|
} |
||||
|
/deep/ .el-form-item__error { |
||||
|
margin-left: 120px !important; |
||||
|
} |
||||
|
.formaddcopy02 .el-row .el-col /deep/ .el-form-item .addinputw { |
||||
|
margin-left: 120px !important; |
||||
|
width: calc(100% - 115px); |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,245 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div v-show="viewState == 1"> |
||||
|
<div class="tab-header webtop"> |
||||
|
<div>{{ viewTitle }}</div> |
||||
|
<div> |
||||
|
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="listconadd"> |
||||
|
<el-form ref="form_obj" :model="formobj" :rules="rules" class="formaddcopy02"> |
||||
|
<div class="title">车辆信息</div> |
||||
|
<el-row style="border-top: 1px solid #e0e3eb"> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">车牌号</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.vehMark }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">车架号</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.vinNo }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">发动机号</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.engineNo }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">车型</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.vehModel }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">购车日期</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.buyDate }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">行驶里程</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.mileage }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">上次保养里程</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.lastMileage }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">下次保养日期</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.nextMaintainDate }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">商业险到期日期</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.commercialInsuranceEndDate }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">交强险到期日期</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.compulsoryInsuranceEndDate }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="24"> |
||||
|
<div class="span-sty">备注</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.remarks }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<div class="title">保养到期明细</div> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">行驶里程</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.currentMileage }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">每月公里</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.monthKm }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">滤芯到期公里</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.filter_km }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">滤芯到期日期</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.filter_date }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">机油到期公里</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.engineoil_km }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">机油到期日期</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.engineoil_date }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">齿轮油到期公里</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.gearoil_km }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">齿轮油到期日期</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.gearoil_date }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">宝轮到期公里</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.treasurewheel_km }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">宝轮到期日期</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.treasurewheel_date }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">风扇皮带到期公里</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.fanbelt_km }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">风扇皮带到期日期</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.fanbelt_date }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">刹车片带到期公里</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.brakepads_km }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<div class="span-sty">刹车片带到期日期</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.brakepads_date }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :span="24"> |
||||
|
<div class="span-sty">备注</div> |
||||
|
<el-form-item><span class="addinputInfo">{{ formobj.remarks }}</span></el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import req from '@/api/client/customermanagement' |
||||
|
|
||||
|
export default { |
||||
|
name: 'VehicleInfo', |
||||
|
data() { |
||||
|
return { |
||||
|
viewTitle: '', |
||||
|
viewState: 1, |
||||
|
formobj: { |
||||
|
customerVehSid: '', |
||||
|
customerSid: '', |
||||
|
vehMark: '', |
||||
|
vinNo: '', |
||||
|
engineNo: '', |
||||
|
vehModelSid: '', |
||||
|
vehModel: '', |
||||
|
mileage: '', |
||||
|
lastMileage: '', |
||||
|
nextMaintainDate: '', |
||||
|
buyDate: '', |
||||
|
commercialInsuranceEndDate: '', |
||||
|
compulsoryInsuranceEndDate: '', |
||||
|
currentMileage: '', |
||||
|
monthKm: '', |
||||
|
filter_km: '', |
||||
|
filter_date: '', |
||||
|
engineoil_km: '', |
||||
|
engineoil_date: '', |
||||
|
gearoil_km: '', |
||||
|
gearoil_date: '', |
||||
|
treasurewheel_km: '', |
||||
|
treasurewheel_date: '', |
||||
|
fanbelt_km: '', |
||||
|
fanbelt_date: '', |
||||
|
brakepads_km: '', |
||||
|
brakepads_date: '' |
||||
|
}, |
||||
|
rules: {} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
showInfo(sid) { |
||||
|
this.viewTitle = '车辆' |
||||
|
req.details(sid).then((res) => { |
||||
|
if (res.success) { |
||||
|
this.formobj = res.data |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
handleReturn() { |
||||
|
this.formobj = { |
||||
|
customerVehSid: '', |
||||
|
customerSid: '', |
||||
|
vehMark: '', |
||||
|
vinNo: '', |
||||
|
engineNo: '', |
||||
|
vehModelSid: '', |
||||
|
vehModel: '', |
||||
|
mileage: '', |
||||
|
lastMileage: '', |
||||
|
nextMaintainDate: '', |
||||
|
buyDate: '', |
||||
|
commercialInsuranceEndDate: '', |
||||
|
compulsoryInsuranceEndDate: '', |
||||
|
currentMileage: '', |
||||
|
monthKm: '', |
||||
|
filter_km: '', |
||||
|
filter_date: '', |
||||
|
engineoil_km: '', |
||||
|
engineoil_date: '', |
||||
|
gearoil_km: '', |
||||
|
gearoil_date: '', |
||||
|
treasurewheel_km: '', |
||||
|
treasurewheel_date: '', |
||||
|
fanbelt_km: '', |
||||
|
fanbelt_date: '', |
||||
|
brakepads_km: '', |
||||
|
brakepads_date: '' |
||||
|
} |
||||
|
this.$emit('doback') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.span-sty { |
||||
|
width: 130px !important; |
||||
|
} |
||||
|
.addinputInfo { |
||||
|
margin-left: 120px !important; |
||||
|
} |
||||
|
</style> |
Loading…
Reference in new issue