<template>
|
<el-dialog
|
:title="!dataForm.id ? '新增' : '修改'"
|
:close-on-click-modal="false"
|
:visible.sync="visible"
|
>
|
<el-form :model="dataForm" ref="dataForm" :rules="dataRule" class="l-mes">
|
<!--公司主要信息界面-->
|
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="公司编号" prop="companyNo" label-width="100px">
|
<el-input
|
v-model="dataForm.companyNo"
|
placeholder="公司编号"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="公司名称" prop="companyName" label-width="100px">
|
<el-input
|
v-model="dataForm.companyName"
|
placeholder="公司名称"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="语言" prop="language" label-width="100px">
|
<el-input v-model="dataForm.language" placeholder="语言"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="国家" prop="country" label-width="100px">
|
<countrySelector v-model="dataForm.country"></countrySelector>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="logo中文" prop="iconNameCn" label-width="100px">
|
<el-input
|
v-model="dataForm.iconNameCn"
|
placeholder="logo中文"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="logo英文" prop="iconNameEn" label-width="100px">
|
<el-input
|
v-model="dataForm.iconNameEn"
|
placeholder="logo英文"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-tabs v-model="showAllVisible" type="card" style="margin-top: 20px">
|
<!--地址页面-->
|
<el-tab-pane label="地址" name="first">
|
<el-table :data="dataForm.addresses" max-height="330">
|
<el-table-column
|
label="国家"
|
width="200px"
|
prop="country"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<el-form-item
|
:prop="'addresses.' + scope.$index + '.country'"
|
class="colItemsClass"
|
>
|
<countrySelector
|
v-model="scope.row.country"
|
></countrySelector>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column label="地址" prop="address" align="center">
|
<template slot-scope="scope">
|
<el-form-item
|
:prop="'addresses.' + scope.$index + '.address'"
|
class="colItemsClass"
|
>
|
<el-input
|
v-model="scope.row.address"
|
placeholder="地址"
|
></el-input>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="地址类型"
|
width="200px"
|
prop="addressType"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<el-form-item
|
:prop="'addresses.' + scope.$index + '.addressType'"
|
class="colItemsClass"
|
>
|
<el-select
|
v-model="scope.row.addressType"
|
filterable
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="(item, index) in addressTypeOptions"
|
:key="index"
|
:label="item.value"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column align="center" width="60px">
|
<template slot="header">
|
<el-button type="text" size="small" @click="addCompanyAddress()"
|
>添加
|
</el-button>
|
</template>
|
<template slot-scope="scope">
|
<el-button
|
type="text"
|
size="small"
|
@click="delCompanyAddress(scope.row.id, scope.$index)"
|
>删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-tab-pane>
|
<!--公司联系方式界面-->
|
<el-tab-pane label="联系方式" name="second">
|
<el-table :data="dataForm.contacts" max-height="330">
|
<el-table-column
|
label="联系人"
|
width="200px"
|
prop="contactPerson"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<el-form-item
|
:prop="'contacts.' + scope.$index + '.contactPerson'"
|
class="colItemsClass"
|
>
|
<el-input
|
v-model="scope.row.contactPerson"
|
placeholder="联系人"
|
></el-input>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="联系电话"
|
width="200px"
|
prop="phone"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<el-form-item
|
:prop="'contacts.' + scope.$index + '.phone'"
|
class="colItemsClass"
|
>
|
<el-input
|
v-model="scope.row.phone"
|
placeholder="联系电话"
|
></el-input>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column align="center" width="60px">
|
<template slot="header">
|
<el-button type="text" size="small" @click="addCompanyContact()"
|
>添加
|
</el-button>
|
</template>
|
<template slot-scope="scope">
|
<el-button
|
type="text"
|
size="small"
|
@click="delCompanyContact(scope.row.id, scope.$index)"
|
>删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-tab-pane>
|
<el-tab-pane label="logo" name="third">
|
<el-upload
|
class="upload-demo"
|
action="/mes/company/upload"
|
:headers="headers"
|
:before-upload="submitUpload"
|
:on-remove="handleRemove"
|
:on-success="uploadSuccess"
|
:limit="1"
|
:on-exceed="handleExceed"
|
:data="paramData"
|
:file-list="fileList"
|
list-type="picture"
|
:with-credentials="true"
|
>
|
<el-button size="small" type="primary">点击上传</el-button>
|
<div slot="tip" class="el-upload__tip" style="color:red;">
|
只能上传png图片，且不超过2MB，像素为220*60
|
</div>
|
</el-upload>
|
</el-tab-pane>
|
</el-tabs>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="visible = false">取消</el-button>
|
<el-button
|
type="primary"
|
:disabled="isSubmit"
|
v-thinclick="`dataFormSubmit`"
|
>确定</el-button
|
>
|
</span>
|
</el-dialog>
|
</template>
|
|
<script>
|
import countrySelector from '@/views/common/country'
|
import {
|
getAllObj,
|
addObj,
|
putObj,
|
dir,
|
delAddressObj,
|
delContactObj,
|
removeFile
|
} from '@/api/basic/company'
|
import Template from '../../quality/parts/template'
|
import { getStore } from '../../../util/store'
|
|
export default {
|
data() {
|
return {
|
visible: false,
|
dataForm: {
|
id: 0,
|
companyNo: '',
|
companyName: '',
|
language: '',
|
country: '',
|
createTime: '',
|
updateTime: '',
|
addresses: [],
|
contacts: [],
|
iconNameCn: '',
|
iconNameEn: ''
|
},
|
addAddressVisible: false,
|
doSubmitAddress: true,
|
doSubmitContact: true,
|
showAllVisible: 'first',
|
addressTypeOptions: [],
|
addressListOldLength: 0,
|
contactListOldLength: 0,
|
dataRule: {
|
companyNo: [
|
{ required: true, message: '公司编号不能为空', trigger: 'blur' }
|
],
|
companyName: [
|
{ required: true, message: '公司名称不能为空', trigger: 'blur' }
|
],
|
address: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
|
addressType: [
|
{ required: true, message: '地址类型不能为空', trigger: 'blur' }
|
],
|
contactPerson: [
|
{ required: true, message: '联系人不能为空', trigger: 'blur' }
|
],
|
phone: [
|
{ required: true, message: '联系方式不能为空', trigger: 'blur' }
|
]
|
},
|
isSubmit: false,
|
headers: {
|
Authorization: 'Bearer ' + getStore({ name: 'access_token' })
|
},
|
paramData: {
|
id: null
|
},
|
fileList: []
|
}
|
},
|
components: {
|
Template,
|
countrySelector
|
},
|
created() {
|
this.initDirAddress('addressType_type')
|
},
|
methods: {
|
init(id) {
|
this.showAllVisible = 'first'
|
this.dataForm.id = id || 0
|
this.visible = true
|
this.fileList = []
|
this.$nextTick(() => {
|
this.$refs.dataForm.resetFields()
|
if (this.dataForm.id) {
|
getAllObj(this.dataForm.id).then((response) => {
|
this.dataForm = response.data.data
|
this.addressListOldLength = this.dataForm.addresses.length
|
this.contactListOldLength = this.dataForm.contacts.length
|
if (this.dataForm.fileAddress != null) {
|
this.fileList.push({
|
url: this.dataForm.fileAddress
|
})
|
}
|
})
|
} else {
|
this.initDefaultForm()
|
}
|
})
|
},
|
// 初始化表单
|
initDefaultForm() {
|
this.dataForm.id = 0
|
this.dataForm.companyNo = null
|
this.dataForm.companyName = null
|
this.dataForm.language = null
|
this.dataForm.country = null
|
this.dataForm.createTime = null
|
this.dataForm.updateTime = null
|
this.dataForm.addresses = []
|
this.dataForm.contacts = []
|
this.dataForm.iconNameCn = null
|
this.dataForm.iconNameEn = null
|
},
|
// 表单提交
|
dataFormSubmit() {
|
this.isSubmit = true
|
this.doSubmitAddress = true
|
this.doSubmitContact = true
|
for (let i = 0; i < this.dataForm.addresses.length; i++) {
|
if (
|
this.dataForm.addresses[i].addressType == null ||
|
this.dataForm.addresses[i].address == null ||
|
this.dataForm.addresses[i].country == null
|
) {
|
this.doSubmitAddress = false
|
}
|
}
|
for (let i = 0; i < this.dataForm.contacts.length; i++) {
|
if (
|
this.dataForm.contacts[i].phone == null ||
|
this.dataForm.contacts[i].contactPerson == null
|
) {
|
this.doSubmitContact = false
|
}
|
}
|
if (this.doSubmitAddress == true && this.doSubmitContact == true) {
|
this.$refs.dataForm.validate((valid) => {
|
if (valid) {
|
if (this.dataForm.id) {
|
putObj(this.dataForm).then((data) => {
|
this.$message.success('修改成功')
|
this.visible = false
|
this.isSubmit = false
|
this.$emit('refreshDataList')
|
})
|
} else {
|
addObj(this.dataForm).then((data) => {
|
this.$message.success('添加成功')
|
this.visible = false
|
this.isSubmit = false
|
this.$emit('refreshDataList')
|
})
|
}
|
} else {
|
this.isSubmit = false
|
}
|
})
|
} else if (this.doSubmitAddress == false) {
|
this.isSubmit = false
|
this.$message.warning('请完善地址信息')
|
} else {
|
this.isSubmit = false
|
this.$message.warning('请完善联系方式信息')
|
}
|
},
|
|
// 新增公司地址信息
|
addCompanyAddress() {
|
const addressInfo = {}
|
addressInfo.address = null
|
addressInfo.addresstype = this.addressTypeOptions[0].value
|
addressInfo.country = null
|
this.dataForm.addresses.push(addressInfo)
|
},
|
// 新增公司联系方式信息
|
addCompanyContact() {
|
const contactInfo = {}
|
contactInfo.phone = null
|
contactInfo.contactPerson = null
|
this.dataForm.contacts.push(contactInfo)
|
},
|
// 删除公司地址
|
delCompanyAddress(id, index) {
|
if (typeof id === 'undefined') {
|
this.dataForm.addresses.splice(index, 1)
|
} else {
|
this.$confirm('是否确认删除此地址', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
closeOnClickModal: false,
|
type: 'warning'
|
})
|
.then(function() {
|
return delAddressObj(id)
|
})
|
.then((data) => {
|
this.$message.success('删除成功')
|
this.dataForm.addresses.splice(index, 1)
|
this.addressListOldLength -= 1
|
})
|
}
|
},
|
// 删除公司联系方式
|
delCompanyContact(id, index) {
|
if (typeof id === 'undefined') {
|
this.dataForm.contacts.splice(index, 1)
|
} else {
|
this.$confirm('是否确认删除此联系方式', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
closeOnClickModal: false,
|
type: 'warning'
|
})
|
.then(function() {
|
return delContactObj(id)
|
})
|
.then((data) => {
|
this.$message.success('删除成功')
|
this.dataForm.contacts.splice(index, 1)
|
this.contactListOldLength -= 1
|
})
|
}
|
},
|
initDirAddress(index) {
|
dir(index).then((res) => {
|
this.addressTypeOptions = res.data.data
|
})
|
},
|
submitUpload() {
|
if (this.dataForm.id) {
|
this.paramData.id = this.dataForm.id
|
} else {
|
this.$message.error('请先保存公司信息')
|
return false
|
}
|
},
|
handleRemove(file, fileList) {
|
if (this.dataForm.id) {
|
removeFile(this.dataForm.id).then((response) => {
|
this.$message.success('删除成功')
|
})
|
}
|
},
|
uploadSuccess(response, file, fileList) {
|
this.$message.success('上传成功')
|
},
|
handleExceed(files, fileList) {
|
this.$message.warning('限制上传一张图片')
|
}
|
}
|
}
|
</script>
|
