<template>
|
<GlobalWindow :title="title" width="800px" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm">
|
<el-form :model="form" ref="form" :rules="rules">
|
<div class="list">
|
<div class="title">基础信息</div>
|
<el-form-item label="客户名称" prop="name">
|
<div class="df">
|
<el-input v-model="form.name" placeholder="请输入客户" v-trim />
|
<el-checkbox v-model="form.type" class="ml10" :true-label="0" :false-label="1">个人</el-checkbox>
|
</div>
|
</el-form-item>
|
<el-form-item label="行业分类" prop="industryId">
|
<el-select v-model="form.industryId" clearable filterable>
|
<el-option v-for="item in cateList" :value="item.id" :label="item.name" />
|
<div key="21" class="df_center mt10"><el-button type="primary" plain class="w200"
|
@click="openTrade">添加</el-button>
|
</div>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="客户编号" prop="code">
|
<el-input v-model="form.code" placeholder="请输入" v-trim />
|
</el-form-item>
|
<template v-if="!form.id">
|
<div class="title">默认联系人</div>
|
<el-form-item label="姓名" prop="member.name">
|
<el-input v-model="form.member.name" placeholder="请输入" v-trim />
|
</el-form-item>
|
<el-form-item label="手机号" prop="member.phone">
|
<el-input v-model="form.member.phone" placeholder="请输入手机号" v-trim />
|
</el-form-item>
|
<el-form-item label="身份">
|
<el-select v-model="form.member.highCheckor" filterable>
|
<el-option :value="0" label="老板/超级管理员" />
|
<el-option :value="1" label="人事/管理员" />
|
<el-option :value="2" label="员工/普通员工" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="证件类型">
|
<el-select v-model="form.member.idcardType" filterable>
|
<el-option :value="0" label="身份证" />
|
<el-option :value="1" label="港澳证件" />
|
<el-option :value="2" label="护照" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="证件号码" prop="member.idcardNo">
|
<el-input v-model="form.member.idcardNo" placeholder="请输入" v-trim />
|
</el-form-item>
|
<el-form-item label="邮箱" prop="email">
|
<el-input v-model="form.member.email" placeholder="请输入邮箱" v-trim />
|
</el-form-item>
|
</template>
|
<el-form-item v-else label="默认联系人" prop="memberId">
|
<el-select v-model="form.memberId" clearable filterable>
|
<el-option v-for="item in clientList" :value="item.id" :label="item.name" />
|
<div key="11" class="df_center mt10"><el-button type="primary" plain class="w200"
|
@click="openClient">添加</el-button>
|
</div>
|
</el-select>
|
</el-form-item>
|
<template v-if="form.type == 1">
|
<div class="title">账户信息</div>
|
<el-form-item label="开户银行" prop="accountBank">
|
<el-input v-model="form.accountBank" placeholder="请输入开户银行" v-trim />
|
</el-form-item>
|
<el-form-item label="账号" prop="accountNo">
|
<el-input v-model="form.accountNo" placeholder="请输入账号" v-trim />
|
</el-form-item>
|
<el-form-item label="电话" prop="accountPhone">
|
<el-input v-model="form.accountPhone" placeholder="请输入账户电话" v-trim />
|
</el-form-item>
|
<el-form-item label="统一信用代码" prop="creditCard">
|
<el-input v-model="form.creditCard" placeholder="请输入统一信用代码" v-trim />
|
</el-form-item>
|
<el-form-item label="默认发票类型" prop="fpType">
|
<el-select v-model="form.fpType" clearable filterable>
|
<el-option :value="0" label="增值税普通发票" />
|
<el-option :value="1" label="增值税专用发票" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="注册地址" prop="accountAddr">
|
<el-input v-model="form.accountAddr" placeholder="请输入账号注册地址" v-trim />
|
</el-form-item>
|
<el-form-item label="营业期限">
|
<div class="df">
|
<el-date-picker type="date" v-model="form.validity" value-format="yyyy-MM-dd" placeholder="请选择" />
|
<el-checkbox v-model="form.selLangTime" @change="changeValid" class="ml10">长期</el-checkbox>
|
</div>
|
</el-form-item>
|
</template>
|
|
</div>
|
</el-form>
|
<!-- -->
|
<OperaCategoryWindow ref="OperaCategoryWindowRef" @success="initData" />
|
<StaffEdit ref="StaffEditRef" @success="getClient" />
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { fetchCateList } from '@/api/business/category'
|
import { rules } from './config'
|
import { detailById } from '@/api/client/ywCustomer'
|
import { fetchList } from '@/api/client/staff'
|
import OperaCategoryWindow from './OperaCategoryWindow.vue'
|
import StaffEdit from './staffEdit.vue'
|
export default {
|
name: 'OperaYwCustomerWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow, OperaCategoryWindow, StaffEdit },
|
data() {
|
return {
|
// 表单数据
|
form: {
|
id: null,
|
validity: '',
|
creator: '',
|
createDate: '',
|
editor: '',
|
editDate: '',
|
isdeleted: '',
|
remark: '',
|
industryId: '',
|
type: 1,
|
name: '',
|
phone: '',
|
idcardNo: '',
|
idcardDecode: '',
|
code: '',
|
status: '',
|
memberName: '',
|
|
lastLoginDate: '',
|
loginNum: '',
|
userId: '',
|
memberId: '',
|
|
accountBank: '',
|
accountNo: '',
|
accountPhone: '',
|
creditCard: '',
|
fpType: '',
|
accountAddr: '',
|
// identityType: '0',
|
email: '',
|
member: {
|
name: "",
|
phone: "",
|
highCheckor: 0,
|
idcardType: 0,
|
idcardNo: '',
|
email: '',
|
}
|
},
|
title: '新增客户',
|
isShowTrade: false,
|
|
clientList: [],
|
cateList: [],
|
// 验证规则
|
rules
|
}
|
},
|
created() {
|
this.config({
|
api: '/client/ywCustomer',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
openTrade() {
|
this.$refs.OperaCategoryWindowRef.open('新增行业')
|
},
|
openClient() {
|
this.$refs.StaffEditRef.open('新建人员')
|
setTimeout(() => {
|
this.$refs.StaffEditRef.form.customerId = this.form.id
|
console.log('--', this.$refs.StaffEditRef.form);
|
|
// this.$update
|
}, 1200)
|
this.$refs.StaffEditRef.customerId = this.form.id
|
},
|
initData() {
|
fetchCateList({ type: 6 }).then(res => {
|
this.cateList = res
|
})
|
},
|
open(title, target) {
|
this.title = title
|
this.visible = true
|
this.initData()
|
// 新建
|
if (target == null) {
|
this.$nextTick(() => {
|
this.$refs.form.resetFields()
|
this.form.validity = ''
|
this.form.id = ''
|
this.form.member = {
|
name: "",
|
phone: "",
|
highCheckor: 0,
|
idcardType: 0,
|
idcardNo: '',
|
email: '',
|
}
|
})
|
this.form.type = 1
|
return
|
}
|
// 编辑
|
this.$nextTick(() => {
|
if (title == '编辑客户') {
|
this.getClient(target.id)
|
detailById(target.id).then(res => {
|
this.form = res
|
})
|
}
|
})
|
},
|
getClient(customerId) {
|
fetchList({
|
capacity: 9999,
|
page: 1,
|
model: {customerId}
|
}).then(res => {
|
this.clientList = res.records
|
})
|
},
|
changeValid(e) {
|
this.$set(this.form, 'validity', e ? '2099-12-31' : '')
|
},
|
}
|
}
|
</script>
|
<style lang='scss' scoped>
|
@import '@/assets/style/variables.scss';
|
|
div {
|
box-sizing: border-box;
|
}
|
|
.title {
|
width: 100%;
|
font-weight: 500;
|
font-size: 15px;
|
margin-top: 16px;
|
}
|
|
.list {
|
/* padding-top: 14px; */
|
display: flex;
|
flex-wrap: wrap;
|
|
.el-form-item {
|
width: 33.33%;
|
margin-bottom: 12px;
|
padding: 0 12px;
|
|
.la {
|
color: #7f7f7f;
|
margin-top: 2px;
|
}
|
}
|
}
|
</style>
|
