232 lines
9.1 KiB
Vue
232 lines
9.1 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<!-- 对话框(添加 / 修改) -->
|
||
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%" v-dialogDrag append-to-body>
|
||
<el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="150px">
|
||
<el-row :gutter="2">
|
||
<el-col :span="12">
|
||
<el-form-item label="企业名称" prop="corpName">
|
||
<el-input v-model="formData.corpName" placeholder="请输入企业名称" maxlength="255"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="统一社会信用代码" prop="orgCard">
|
||
<el-input v-model="formData.orgCard" placeholder="请输入统一社会信用代码" maxlength="18"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="2">
|
||
<el-col :span="12">
|
||
<el-form-item label="注册资本" prop="registFund">
|
||
<el-input type="number" v-model="formData.registFund" placeholder="请输入注册资本">
|
||
<template slot="append">万元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="注册日期" prop="registDate">
|
||
<el-date-picker clearable v-model="formData.registDate" type="date" value-format="yyyy-MM-dd"
|
||
placeholder="选择注册日期"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="2">
|
||
<el-col :span="12">
|
||
<el-form-item label="法人姓名" prop="legalName">
|
||
<el-input v-model="formData.legalName" placeholder="请输入法人姓名" maxlength="50"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="法人身份证号" prop="legalCard">
|
||
<el-input v-model="formData.legalCard" placeholder="请输入法人身份证号" maxlength="18"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="2">
|
||
<el-col :span="12">
|
||
<el-form-item label="联系人" prop="contactName">
|
||
<el-input v-model="formData.contactName" placeholder="请输入联系人" maxlength="50"/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="联系方式" prop="mobilePhone">
|
||
<el-input type="tel" v-model="formData.mobilePhone" placeholder="请输入联系方式" maxlength="11" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="2">
|
||
<el-col :span="12">
|
||
<el-form-item v-if="formData.id === undefined" label="管理员登录账号" prop="loginAccount">
|
||
<el-input v-model="formData.loginAccount" placeholder="请输入管理员登录账号" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item v-if="formData.id === undefined" label="管理员登录密码" prop="password">
|
||
<el-input v-model="formData.password" placeholder="请输入管理员登录密码" type="password" show-password />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-form-item label="开放服务" prop="serviceCodeArray">
|
||
<el-select style="width: 100%" v-model="formData.serviceCodeArray" multiple placeholder="请选择开放服务" clearable >
|
||
<el-option v-for="item in packageList" :key="item.id" :label="item.name" :value="item.id"/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="详细地址" prop="address">
|
||
<el-input v-model="formData.address" placeholder="请输入详细地址" maxlength="255" />
|
||
</el-form-item>
|
||
<el-form-item label="企业简介">
|
||
<el-input type="textarea" v-model="formData.corpContent" maxlength="900" placeholder="请输入企业简介"/>
|
||
<!-- <Editor v-model="formData.corpContent" :min-height="192"/>-->
|
||
</el-form-item>
|
||
<el-form-item label="经营范围" prop="business">
|
||
<el-input type="textarea" v-model="formData.business" maxlength="900" placeholder="请输入经营范围"/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as CompanyApi from '@/api/base/company'
|
||
import Editor from '@/components/Editor'
|
||
import {getServicePackageList} from "@/api/system/servicePackage";
|
||
|
||
export default {
|
||
name: 'CompanyForm',
|
||
components: {
|
||
Editor
|
||
},
|
||
data() {
|
||
return {
|
||
// 弹出层标题
|
||
dialogTitle: '',
|
||
// 是否显示弹出层
|
||
dialogVisible: false,
|
||
// 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||
formLoading: false,
|
||
// 租户服务列表
|
||
packageList: [],
|
||
// 表单参数
|
||
formData: {
|
||
id: undefined,
|
||
corpName: undefined,
|
||
orgCard: undefined,
|
||
registFund: undefined,
|
||
registDate: undefined,
|
||
address: undefined,
|
||
legalName: undefined,
|
||
legalCard: undefined,
|
||
contactName: undefined,
|
||
mobilePhone: undefined,
|
||
corpContent: undefined,
|
||
business: undefined,
|
||
loginAccount: undefined,
|
||
password: undefined,
|
||
serviceCodeArray: [],
|
||
serviceCodes:undefined
|
||
},
|
||
// 表单校验
|
||
formRules: {
|
||
corpName: [{ required: true, message: '企业名称不能为空', trigger: 'blur' }],
|
||
orgCard: [{ required: true, message: '统一社会信用代码不能为空', trigger: 'blur' }],
|
||
registFund: [{ required: true, message: '注册资本不能为空', trigger: 'blur' }],
|
||
registDate: [{ required: true, message: '注册日期不能为空', trigger: 'blur' }],
|
||
address: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
|
||
legalName: [{ required: true, message: '法人姓名不能为空', trigger: 'blur' }],
|
||
legalCard: [
|
||
{ required: true, message: '法人身份证号不能为空', trigger: 'blur' },
|
||
{ pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的法人身份证号', trigger: ["blur", "change"] },
|
||
],
|
||
serviceCodeArray: [{ required: true, message: '开放服务不能为空', trigger: 'blur' }],
|
||
contactName: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
|
||
mobilePhone: [
|
||
{ required: true, message: '联系方式不能为空', trigger: 'blur' },
|
||
{ pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,message: '请输入正确的联系方式', trigger: ["blur", "change"] },
|
||
],
|
||
loginAccount: [{ required: true, message: '管理员登录账号不能为空', trigger: 'blur' }],
|
||
password: [{ required: true, message: '管理员登录密码不能为空', trigger: 'blur' }]
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
// 获得服务服务列表
|
||
getServicePackageList().then(response => {
|
||
this.packageList = response.data;
|
||
})
|
||
},
|
||
methods: {
|
||
/** 打开弹窗 */
|
||
async open(id) {
|
||
this.dialogVisible = true
|
||
this.reset()
|
||
// 修改时，设置数据
|
||
if (id) {
|
||
this.formLoading = true
|
||
try {
|
||
const res = await CompanyApi.getCompany(id)
|
||
this.formData = res.data
|
||
this.dialogTitle = '修改企业信息'
|
||
} finally {
|
||
this.formLoading = false
|
||
}
|
||
}
|
||
this.dialogTitle = '新增企业信息'
|
||
},
|
||
/** 提交按钮 */
|
||
async submitForm() {
|
||
// 校验主表
|
||
await this.$refs['formRef'].validate()
|
||
this.formLoading = true
|
||
debugger
|
||
try {
|
||
const data = this.formData
|
||
let serviceCodes = this.formData.serviceCodeArray.join(",")
|
||
data.serviceCodes = serviceCodes
|
||
// 修改的提交
|
||
if (data.id) {
|
||
await CompanyApi.updateCompany(data)
|
||
this.$modal.msgSuccess('修改成功')
|
||
this.dialogVisible = false
|
||
this.$emit('success')
|
||
return
|
||
}
|
||
// 添加的提交
|
||
await CompanyApi.createCompany(data)
|
||
this.$modal.msgSuccess('新增成功')
|
||
this.dialogVisible = false
|
||
this.$emit('success')
|
||
} finally {
|
||
this.formLoading = false
|
||
}
|
||
},
|
||
/** 表单重置 */
|
||
reset() {
|
||
this.formData = {
|
||
id: undefined,
|
||
corpName: undefined,
|
||
orgCard: undefined,
|
||
registFund: undefined,
|
||
registDate: undefined,
|
||
address: undefined,
|
||
legalName: undefined,
|
||
legalCard: undefined,
|
||
contactName: undefined,
|
||
mobilePhone: undefined,
|
||
corpContent: undefined,
|
||
business: undefined,
|
||
loginAccount: undefined,
|
||
password: undefined,
|
||
serviceCodeArray: [],
|
||
serviceCodes:undefined
|
||
}
|
||
this.resetForm('formRef')
|
||
}
|
||
}
|
||
}
|
||
</script>
|