<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
v-loading="isUploading"
|
element-loading-text="文件上传中"
|
element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
@confirm="confirm"
|
>
|
<el-form :model="form" ref="form" label-width="150px" label-suffix="：" :rules="rules" inline>
|
<div class="sub-title">客户信息</div>
|
<div class="item-line">
|
<el-form-item label="客户类型" prop="oepnType">
|
<el-radio-group v-model="form.oepnType" @change="typeChange">
|
<el-radio :label="1">正式账号</el-radio>
|
<el-radio :label="0">试用账号</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</div>
|
<div class="tip-line">
|
<el-form-item label="客户全称" prop="orgName">
|
<el-input v-model="form.orgName" maxlength="30" placeholder="请输入客户企业全称，不超过30字" v-trim/>
|
企业名称需与工商部门登记信息一致
|
</el-form-item>
|
</div>
|
<div class="tip-line">
|
<el-form-item label="客户简称" prop="remark">
|
<el-input v-model="form.remark" maxlength="10" placeholder="请输入客户简称，不超过10字" v-trim/>
|
企业简称会作为根组织名称
|
</el-form-item>
|
</div>
|
<div class="tip-line">
|
<el-form-item label="统一社会信用代码" prop="creditCode">
|
<el-input v-model="form.creditCode" placeholder="请输入统一社会信用代码，不可重复" v-trim/>
|
统一信用代码需与工商部门登记信息一致
|
</el-form-item>
|
</div>
|
<div class="short-line">
|
<el-form-item label="主登录账号" prop="phone">
|
<el-input v-model="form.phone" placeholder="请输入手机号码" :disabled="!isEdit" v-trim/>
|
</el-form-item>
|
</div>
|
<div class="tip-line">
|
<el-form-item label="有效期" prop="oepnValidDate">
|
<el-date-picker
|
v-model="form.oepnValidDate"
|
type="date"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择日期">
|
</el-date-picker>
|
有效期包含选择日期
|
</el-form-item>
|
</div>
|
<div class="tip-line">
|
<el-form-item label="开通用户数" prop="openUserNum">
|
<el-input v-model="form.openUserNum" placeholder="请输入开通用户数" v-trim/>
|
注：为0不限制人数
|
</el-form-item>
|
</div>
|
<div class="tip-line">
|
<el-form-item label="销售人员" prop="salesperson">
|
<el-select v-model="form.salesperson" filterable clearable placeholder="请选择类型">
|
<el-option
|
v-for="item in salesPerson"
|
:key="item.id"
|
:label="item.realname"
|
:value="item.id"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
</div>
|
|
<div class="sub-title">更多设置</div>
|
<div class="short-line">
|
<el-form-item label="联系人" prop="linkName">
|
<el-input v-model="form.linkName" placeholder="请输入联系人" v-trim/>
|
</el-form-item>
|
</div>
|
<div class="short-line">
|
<el-form-item label="联系电话" prop="linkPhone">
|
<el-input v-model="form.linkPhone" placeholder="请输入联系电话" v-trim/>
|
</el-form-item>
|
</div>
|
<div class="short-line">
|
<el-form-item label="所在地区" prop="addr">
|
<el-input v-model="form.addr" placeholder="请输入所在地区" v-trim/>
|
</el-form-item>
|
</div>
|
|
<div class="pic-line">
|
<!-- 企业类型0企业 1服务机构 2综合服务单位 -->
|
<el-form-item label="营业执照" prop="fileStoreAddr">
|
<!-- {{ form.fileurlfull }}
|
{{ form.fileStoreAddr }} -->
|
<UploadAvatarImage
|
:file="{ 'imgurlfull': form.fileurlfull, 'imgurl': form.fileStoreAddr }"
|
:uploadData="uploadData"
|
tipsLabel="上传营业执照"
|
@uploadSuccess="uploadReverseSuccess"
|
@uploadEnd="end"
|
@uploadBegin="begin"
|
/>
|
</el-form-item>
|
</div>
|
<el-form-item label="">
|
<div style="width:400px;text-align: center;">
|
<el-button @click="confirm" :loading="isWorking" type="primary">提交</el-button>
|
</div>
|
</el-form-item>
|
</el-form>
|
<div slot="footer"></div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import UploadAvatarImage from '../common/UploadAvatarImage.vue'
|
import { companyUserExtAllUser } from '@/api/business/companyUser'
|
// import { create } from '@/api/business/companyChange'
|
import { creditCode, checkMobile } from '@/utils/form'
|
export default {
|
name: 'OperaClientMangerWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow, UploadAvatarImage },
|
data () {
|
|
return {
|
isUploading: false,
|
uploadData: {
|
folder: 'company/menu',
|
type: 'image'
|
},
|
// 表单数据
|
form: {
|
id: null,
|
oepnType: 1,
|
orgName: '',
|
name: '',
|
remark: '',
|
phone: '',
|
legalPerson: '',
|
addr: '',
|
salesperson: '',
|
oepnValidDate: '',
|
creditCode: '',
|
linkName: '',
|
linkPhone: '',
|
fileStoreAddr: '',
|
fileurlfull: '',
|
openUserNum:0
|
// fileList: [],
|
},
|
isEdit: false,
|
salesPerson:[],
|
// 验证规则
|
rules: {
|
orgName: [
|
{ required: true, message: '请输入客户企业全称', trigger: 'blur' }
|
],
|
// fileList: [
|
// { required: true, message: '请输入上传', trigger: 'change' }
|
// ],
|
remark: [
|
{ required: true, message: '请输入客户简称', trigger: 'blur' }
|
],
|
phone: [
|
{ required: true, validator: checkMobile, message: '请输入手机号码', trigger: 'blur' }
|
],
|
oepnValidDate: [
|
{ required: true, validator: '请选择有效日期', trigger: 'change'}
|
],
|
creditCode: [
|
{ required: true, validator: creditCode, trigger: 'blur' }
|
],
|
openUserNum: [
|
{ pattern: /^[0-9]+$/, message: '只可以输入数字', trigger: 'change'}
|
]
|
}
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/clientManger',
|
'field.id': 'id'
|
})
|
|
},
|
methods: {
|
open (target, title) {
|
// debugger
|
this.title = title||'编辑客户'
|
this.isEdit = !!title
|
this.visible = true
|
this.form.fileurlfull = ''
|
this.typeChange()
|
// this.form.changeFileList = []
|
companyUserExtAllUser({ type: 0 })
|
.then(res => {
|
this.salesPerson = res
|
})
|
.catch(err => {
|
console.log(err);
|
})
|
// debugger
|
// 新建
|
if (target == null) {
|
this.$nextTick(() => {
|
this.$refs.form.resetFields()
|
this.form[this.configData['field.id']] = null
|
})
|
return
|
}
|
// 编辑
|
this.$nextTick(() => {
|
this.$refs.form.clearValidate()
|
this.$refs.form.resetFields()
|
for (const key in this.form) {
|
this.form[key] = target[key]
|
}
|
// console.log(this.form);
|
// this.form.fileList = JSON.parse(JSON.stringify(target.fileList)) || []
|
// this.form.fileList.forEach(item => item.url = item.fileurlfull)
|
this.form.fileurlfull = this.form.fileStoreAddr ? this.form.fileurlfull : ''
|
})
|
},
|
|
typeChange() {
|
let tempDate = new Date();
|
tempDate.setDate(tempDate.getDate() + (this.form.oepnType ? 365 : 15))
|
this.form.oepnValidDate = `${tempDate.getFullYear()}-${tempDate.getMonth()+1}-${tempDate.getDate()} 00:00:00`
|
},
|
begin() {
|
this.isUploading=true
|
},
|
end() {
|
this.isUploading=false
|
},
|
// 上传图片
|
uploadReverseSuccess(file) {
|
this.form.fileStoreAddr = file.imgurl;
|
this.form.fileurlfull = file.imgurlfull;
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
// ::v-deep .el-form-item__content {
|
// display: flex;
|
// }
|
.item-line {
|
::v-deep .el-form-item__content {
|
width: 480px;
|
}
|
}
|
.tip-line {
|
::v-deep .el-form-item {
|
display: flex;
|
}
|
::v-deep .el-form-item__content {
|
display: flex;
|
.el-input--small {
|
width: 286px!important;
|
margin-right: 10px;
|
}
|
width: 680px;
|
}
|
}
|
|
.short-line {
|
::v-deep .el-form-item__content {
|
width: 286px;
|
}
|
}
|
.pic-line {
|
::v-deep .el-form-item__content {
|
width: 500px;
|
}
|
}
|
.address {
|
display: flex;
|
.line {
|
width: 10px;
|
}
|
}
|
.sub-title {
|
font-size: 20px;
|
font-weight: 600;
|
margin-top: 10px;
|
margin-bottom: 10px;
|
}
|
|
</style>
|
|
<style>
|
.el-popper {
|
min-width: 286px!important;
|
}
|
</style>
|
