公司
This commit is contained in:
KongDuo
356
src/views/customerManagement/companyAuth/OilCompanyAuthAdd.vue
Normal file
356
src/views/customerManagement/companyAuth/OilCompanyAuthAdd.vue
Normal file
@@ -0,0 +1,356 @@
|
||||
<template>
|
||||
<div style="padding:30px 75px 50px;">
|
||||
<div style="width:100%;position: absolute;top: 15px;left: 0;">
|
||||
<div style="display: flex;
|
||||
align-items: center;padding-left: 20px;">
|
||||
<svg-icon
|
||||
icon-class="iconsiji2"
|
||||
style="font-size: 30px;margin-right: 10px;"
|
||||
/>
|
||||
<span>添加认证信息</span>
|
||||
</div>
|
||||
<el-divider style="width:100%"></el-divider>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-form ref="form" :rules="rules" :model="oilCompanyAuth" label-width="100px" :size="$store.getters.size">
|
||||
<el-row :gutter="gridNum.row.gutter">
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item label="企业名称" prop="companyName">
|
||||
<el-input v-model="oilCompanyAuth.companyName" clearable disabled/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="注册省市区" prop="addrCode">
|
||||
<el-cascader
|
||||
v-model="addrCode"
|
||||
placeholder="注册省市区"
|
||||
:size="$store.getters.size"
|
||||
style="width: 100%"
|
||||
:options="areaTree"
|
||||
:props="{value:'id', label:'areaName', children:'childList'}"
|
||||
filterable
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="详细地址" prop="address">
|
||||
<el-input v-model="oilCompanyAuth.address" clearable placeholder="不包含省市区" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="法人代表" prop="companyLegalPerson">
|
||||
<el-input v-model="oilCompanyAuth.companyLegalPerson" clearable placeholder="法人姓名" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="注册资本" prop="registeredCapital">
|
||||
<el-input v-model="oilCompanyAuth.registeredCapital" clearable placeholder="小写数字" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item label="经营资质" prop="businessQualia">
|
||||
<el-input v-model="oilCompanyAuth.businessQualia" clearable placeholder="企业经营资质" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联系方式" prop="contactPhone">
|
||||
<el-input v-model="oilCompanyAuth.contactPhone" clearable placeholder="手机号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="企业网址" prop="website">
|
||||
<el-input v-model="oilCompanyAuth.website" clearable placeholder="企业门户" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="营业执照号码" prop="businessLienceId">
|
||||
<el-input v-model="oilCompanyAuth.businessLienceId" clearable placeholder="营业执照号码" />
|
||||
</el-form-item></el-col>
|
||||
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="打款名称" prop="bankCardName">
|
||||
<el-input v-model="oilCompanyAuth.bankCardName" placeholder="请输入打款名称" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="银行卡号" prop="bankCardNo">
|
||||
<el-input v-model="oilCompanyAuth.bankCardNo" placeholder="请输入银行卡号" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开户行名称" prop="bankName">
|
||||
<el-select
|
||||
@clear="oilCompanyAuth.interBankCode=''"
|
||||
:loading="loading"
|
||||
filterable
|
||||
@change="handleSelect"
|
||||
:remote-method="userRemoteMethod"
|
||||
remote
|
||||
style="width:100%"
|
||||
v-model="oilCompanyAuth.bankName"
|
||||
placeholder="请输入开户行名称或联行号"
|
||||
clearable >
|
||||
<el-option
|
||||
v-for="item in userList"
|
||||
:key="item.id"
|
||||
:label="item.bankName"
|
||||
:value="item.bankName"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button type="text" icon="el-icon-document-copy" size="mini" @click="copyBankName(oilCompanyAuth.bankName,$event)" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="联行号" prop="interBankCode">
|
||||
<el-input :disabled="true" v-model="oilCompanyAuth.interBankCode" placeholder="根据请输入开户行名称自动匹配" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="经营范围" prop="businessScope">
|
||||
<el-input v-model="oilCompanyAuth.businessScope" type="textarea" clearable placeholder="经营范围" />
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<el-col :span="24">
|
||||
<el-form-item label="营业执照照片" prop="businessLienceImg">
|
||||
<el-upload
|
||||
action="/lsm/ocr/business"
|
||||
list-type="picture-card"
|
||||
:on-preview="businessLienceImgPreview"
|
||||
:on-success="businessLienceImgSuccess"
|
||||
:before-upload="imgCompress"
|
||||
:on-remove="businessLienceImgRemove"
|
||||
:limit="1"
|
||||
>
|
||||
<i class="el-icon-plus" />
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-dialog
|
||||
v-el-drag-dialog
|
||||
:visible.sync="imgeDialogVisible"
|
||||
title="营业执照"
|
||||
:modal="false"
|
||||
>
|
||||
<img width="100%" :src="oilCompanyAuth.ibusinessLienceImgImageShow" alt="">
|
||||
</el-dialog>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="是否审核通过" prop="auth">
|
||||
<el-switch
|
||||
v-model="oilCompanyAuth.auth"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-row>
|
||||
<div :span="24" style="background:#fff;margin-top:20px;text-align: right;width:100%;position: absolute;bottom: 15px;left: 0;">
|
||||
<el-divider style="width:100%"></el-divider>
|
||||
<el-button @click="close">取消</el-button>
|
||||
<el-button type="primary" @click="submit" style="margin-right:10px">提交</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import oilCompanyAuthApi from '@/api/customerManagement/oilCompanyAuth'
|
||||
import AreaCodeApi from '@/api/customerManagement/areaCode'
|
||||
import { imgCompress } from '@/utils'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
oilCompanyInfo: {
|
||||
type: Object,
|
||||
default() {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
gridNum: {
|
||||
row: {
|
||||
gutter: 2
|
||||
},
|
||||
cols: {
|
||||
xs: 24,
|
||||
sm: 24,
|
||||
md: 12,
|
||||
lg: 12,
|
||||
xl: 6
|
||||
}
|
||||
},
|
||||
loading:false,
|
||||
imgCompress,
|
||||
userList:[],
|
||||
uploadUrl: process.env.VUE_APP_UPLOAD_PRIVATE_URL, // 加密图片url
|
||||
imgeDialogVisible: false,
|
||||
areaTree: [], // 省市区树形结构
|
||||
addrCode: [], // 省市区code
|
||||
oilCompanyAuth: {
|
||||
companyId: undefined,
|
||||
companyName: undefined,
|
||||
provinceCode: undefined,
|
||||
cityCode: undefined,
|
||||
areaCode: undefined,
|
||||
businessLienceImg: undefined,
|
||||
businessLienceImgImageShow: undefined,
|
||||
address: undefined,
|
||||
companyLegalPerson: undefined,
|
||||
registeredCapital: undefined,
|
||||
businessScope: undefined,
|
||||
businessQualia: undefined,
|
||||
contactPhone: undefined,
|
||||
website: undefined,
|
||||
businessLienceId: undefined,
|
||||
auth: false,
|
||||
auditMark: undefined,
|
||||
createSource: 'WEBM'
|
||||
},
|
||||
rules: {
|
||||
companyName: [
|
||||
{ required: true, message: '请输入企业名称', trigger: 'blur' },
|
||||
{ min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
|
||||
],
|
||||
bankCardName:[
|
||||
{ required: true, message: '请输入打款名称', trigger: 'blur' },
|
||||
],
|
||||
bankCardNo:[
|
||||
{ required: true, message: '请输入银行卡号', trigger: 'blur' },
|
||||
],
|
||||
bankName:[
|
||||
{ required: true, message: '请输入开户行名称', trigger: 'change' },
|
||||
],
|
||||
interBankCode:[
|
||||
{ required: true, message: '请输入联行号', trigger: 'blur' },
|
||||
],
|
||||
address: [
|
||||
{ min: 1, max: 300, message: '长度在 1 到 300 个字符', trigger: 'blur' }
|
||||
],
|
||||
companyLegalPerson: [
|
||||
{ min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
|
||||
],
|
||||
registeredCapital: [
|
||||
{ pattern: /^\d*$/, message: '只能输入数值' }
|
||||
],
|
||||
businessQualia: [
|
||||
{ min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur' }
|
||||
],
|
||||
contactPhone: [
|
||||
{ pattern: /^1[3456789]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
|
||||
|
||||
],
|
||||
website: [
|
||||
{ pattern: /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/, message: '请输入正确网址' }
|
||||
],
|
||||
businessLienceId: [
|
||||
{ min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
|
||||
],
|
||||
businessScope: [
|
||||
{ min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.oilCompanyAuth.companyId = this.oilCompanyInfo.id
|
||||
this.oilCompanyAuth.companyName = this.oilCompanyInfo.name
|
||||
AreaCodeApi.getTree().then(res => {
|
||||
this.areaTree = res.data
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
handleSelect(e){
|
||||
console.log(e)
|
||||
if(e){
|
||||
console.log(this.userList.filter((item,index)=>item.bankName==e)[0].cnaps);
|
||||
this.oilCompanyAuth.interBankCode = this.userList.filter((item,index)=>item.bankName==e)[0].cnaps
|
||||
}
|
||||
},
|
||||
userRemoteMethod(queryString){
|
||||
this.loading = true;
|
||||
if(this.timer){
|
||||
clearTimeout(this.timer)
|
||||
}
|
||||
this.timer = setTimeout(()=>{
|
||||
AreaCodeApi.findAllByName({name:queryString}).then(res=>{
|
||||
this.loading = false
|
||||
this.userList = res.data
|
||||
})
|
||||
},300)
|
||||
|
||||
},
|
||||
businessLienceImgPreview(file) { // 查询大图
|
||||
this.oilCompanyAuth.ibusinessLienceImgImageShow = file.url
|
||||
this.imgeDialogVisible = true
|
||||
},
|
||||
businessLienceImgSuccess(response, file) { // 营业执照上传成功
|
||||
if (response.code === '0') {
|
||||
this.oilCompanyAuth.businessLienceId = response.data.words_result.creditCode.words
|
||||
this.oilCompanyAuth.companyName = response.data.words_result.unitName.words
|
||||
this.oilCompanyAuth.companyLegalPerson = response.data.words_result.legal.words
|
||||
this.oilCompanyAuth.businessScope = response.data.words_result.scope.words
|
||||
}
|
||||
|
||||
imgCompress(file.raw).then(res => {
|
||||
const form = new FormData()
|
||||
res.fileName = file.fileName
|
||||
form.append('file', res)
|
||||
form.append('code', 'A003')
|
||||
|
||||
// 上传到oss
|
||||
axios.post(this.uploadUrl, form, { headers: { 'Content-type': 'application/x-www-form-urlencoded' }}).then(res => {
|
||||
if (res.data.code === 20000) {
|
||||
this.oilCompanyAuth.businessLienceImg = res.data.data.path
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
businessLienceImgRemove() { // 营业执照删除
|
||||
this.oilCompanyAuth.ibusinessLienceImgImageShow = undefined
|
||||
this.oilCompanyAuth.businessLienceImg = undefined
|
||||
},
|
||||
submit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.save(this.oilCompanyAuth)
|
||||
}
|
||||
})
|
||||
},
|
||||
save() {
|
||||
const data = { ...this.oilCompanyAuth }
|
||||
if (data.auth) {
|
||||
data.auditMark = 1
|
||||
} else {
|
||||
data.auditMark = 2
|
||||
}
|
||||
if (this.addrCode.length > 1) {
|
||||
data.provinceCode = this.addrCode[0]
|
||||
data.cityCode = this.addrCode[1]
|
||||
data.areaCode = this.addrCode[2]
|
||||
}
|
||||
// 保存
|
||||
oilCompanyAuthApi.save(data).then(res => {
|
||||
this.$message.success(res.msg)
|
||||
this.$emit('closeDialog')
|
||||
this.$emit('getByPage')
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.$emit('closeDialog')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-divider--horizontal{
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-form ref="form" :rules="rules" :model="oilCompanyInfo" label-width="100px" :size="$store.getters.size">
|
||||
<el-row :gutter="gridNum.row.gutter">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="企业名称" prop="name">
|
||||
<el-input v-model="oilCompanyInfo.name" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="企业简称" prop="abbreviaName">
|
||||
<el-input v-model="oilCompanyInfo.abbreviaName" clearable />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="公司级别" prop="parentMark">
|
||||
<el-select v-model="oilCompanyInfo.parentMark" placeholder="请选择">
|
||||
<el-option label="主体公司" :value="0" />
|
||||
<el-option label="分公司" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col v-if="oilCompanyInfo.parentMark === 1" :span="12">
|
||||
<el-form-item label="上级公司" prop="parentId">
|
||||
<el-select v-model="oilCompanyInfo.parentId" remote filterable :remote-method="companyOrginQuery" style="width: 100%" placeholder="请输入公司名称">
|
||||
<el-option
|
||||
v-for="item in queryCompanyList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="企业性质" prop="companyNature">
|
||||
<el-select v-model="oilCompanyInfo.companyNature" placeholder="请选择">
|
||||
<el-option label="零售客户" :value="0" />
|
||||
<el-option label="外请客户" :value="1" />
|
||||
<el-option label="渠道客户" :value="2" />
|
||||
<el-option label="存量客户" :value="3" />
|
||||
<el-option label="批发客户" :value="4" />
|
||||
<el-option label="LNG客户" :value="5" />
|
||||
<el-option label="推广业务" :value="6" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="账户类型" prop="companyType">
|
||||
<el-select v-model="oilCompanyInfo.companyType" placeholder="请选择">
|
||||
<el-option label="柴油账户" :value="0" />
|
||||
<el-option label="LNG账户" :value="2" />
|
||||
<el-option label="汽油账户" :value="1" />
|
||||
<el-option label="尿素账户" :value="3" />
|
||||
<el-option label="油批账户" :value="4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="企业负责人" prop="businessLeader">
|
||||
<el-select
|
||||
v-model="oilCompanyInfo.businessLeader"
|
||||
clearable
|
||||
filterable
|
||||
remote
|
||||
reserve-keyword
|
||||
placeholder="企业负责人姓名或联系方式"
|
||||
:remote-method="userRemoteMethod"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in userList"
|
||||
:key="item.id"
|
||||
:label="item.phone+'('+(item.nickName?item.nickName+'-':'')+item.userCode+')'"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="公司对接类型" prop="companyDockType">
|
||||
<el-select v-model="oilCompanyInfo.companyDockType" placeholder="请选择">
|
||||
<el-option label="对接客户" :value="0" />
|
||||
<el-option label="平台客户" :value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-col :span="24" style="text-align: right">
|
||||
<el-button @click="close">取消</el-button>
|
||||
<el-button
|
||||
:disabled="!twoNo"
|
||||
type="primary"
|
||||
@click="submit"
|
||||
>提交</el-button>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import oilCompanyInfoApi from '@/api/customerManagement/oilCompanyInfo'
|
||||
import sysCustomerInfoApi from '@/api/user/sysCustomerInfo'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
queryCompanyList: [], // 企业列表
|
||||
twoNo:true,
|
||||
gridNum: {
|
||||
row: {
|
||||
gutter: 2
|
||||
},
|
||||
cols: {
|
||||
xs: 24,
|
||||
sm: 24,
|
||||
md: 12,
|
||||
lg: 12,
|
||||
xl: 6
|
||||
}
|
||||
},
|
||||
oilCompanyInfo: {
|
||||
name: undefined,
|
||||
abbreviaName: undefined,
|
||||
parentMark: 0,
|
||||
parentId: undefined,
|
||||
companyNature: 0,
|
||||
companyType:0,
|
||||
createSource: 'WEBM',
|
||||
enableMark: 1,
|
||||
auditMark: 0
|
||||
},
|
||||
userList: [],
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入企业名称', trigger: 'blur' },
|
||||
{ min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
|
||||
],
|
||||
abbreviaName: [
|
||||
{ min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
|
||||
],
|
||||
parentMark: [
|
||||
{ required: true, message: '请选择是否主体公司', trigger: 'change' }
|
||||
],
|
||||
companyNature: [
|
||||
{ required: true, message: '请选择企业性质', trigger: 'change' }
|
||||
],
|
||||
companyType: [
|
||||
{ required: true, message: '请选择账户类型', trigger: 'change' }
|
||||
],
|
||||
parentId: [
|
||||
{ required: true, message: '请选择上级公司', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
companyOrginQuery(value) { // 远程搜索
|
||||
if (value) {
|
||||
oilCompanyInfoApi.getLikeByName({ 'name': value }).then(res => {
|
||||
this.queryCompanyList = res.data
|
||||
})
|
||||
}
|
||||
},
|
||||
userRemoteMethod(value) { // 远程搜索
|
||||
if (value) {
|
||||
sysCustomerInfoApi.liekQuery(value).then(res => {
|
||||
this.userList = res.data
|
||||
})
|
||||
}
|
||||
},
|
||||
submit() {
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.save(this.oilCompanyInfo)
|
||||
this.twoNo = false
|
||||
setTimeout(()=>{
|
||||
this.twoNo=true
|
||||
},1000)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
save() {
|
||||
if (this.oilCompanyInfo.parentMark === 0) {
|
||||
this.oilCompanyInfo.parentId = 0
|
||||
}
|
||||
// 保存
|
||||
oilCompanyInfoApi.save(this.oilCompanyInfo).then(res => {
|
||||
this.$message.success(res.msg)
|
||||
this.$emit('closeDialog')
|
||||
this.$emit('getByPage')
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.$emit('closeDialog')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user