<template>
|
<el-dialog
|
:title="!dataForm.id ? '新增' : '修改'"
|
:close-on-click-modal="false"
|
:visible.sync="visible"
|
v-dialogDrag>
|
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
|
label-width="130px">
|
<el-form-item label="市场主体类型" prop="subjectType">
|
<el-select clearable placeholder="请选择市场主体类型" style="width: 100%" v-model="dataForm.subjectType"
|
@change="changeType">
|
<el-option
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
v-for="item in typeList">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<template v-if="showName">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="姓名" prop="subjectName">
|
<el-input v-model="dataForm.subjectName" placeholder="请输入姓名"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="身份证号" prop="idCard">
|
<el-input v-model="dataForm.idCard" placeholder="请输入身份证号"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</template>
|
<template v-else>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="市场主体名称" prop="subjectName">
|
<el-input v-model="dataForm.subjectName" placeholder="请输入市场主体名称"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="编码" prop="idCard">
|
<el-input v-model="dataForm.idCard" placeholder="请输入编码"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</template>
|
<template v-if="showCompany">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="成立时间" prop="setupDate">
|
<el-date-picker
|
v-model="dataForm.setupDate"
|
type="date"
|
style="width: 100%"
|
placeholder="选择日期">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="注册资金(万元)" prop="registeredCapital">
|
<el-input type="number" v-model="dataForm.registeredCapital" placeholder="注册资金(万元)"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="法定代表人" prop="legalPerson">
|
<el-input v-model="dataForm.legalPerson" placeholder="法定代表人"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="经营范围" prop="businessScope">
|
<el-input v-model="dataForm.businessScope" placeholder="请输入经营范围"></el-input>
|
<!-- <el-select clearable placeholder="请选择经营范围" style="width: 100%" v-model="dataForm.businessScope">-->
|
<!-- <el-option-->
|
<!-- :key="item.value"-->
|
<!-- :label="item.label"-->
|
<!-- :value="item.value"-->
|
<!-- v-for="item in industryList">-->
|
<!-- </el-option>-->
|
<!-- </el-select>-->
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</template>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="联系电话" prop="phone">
|
<el-input v-model="dataForm.phone" placeholder="联系电话"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="地址" prop="address">
|
<el-input v-model="dataForm.address" placeholder="地址"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<template v-if="showCompany">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="经度" prop="longitude">
|
<el-input v-model="dataForm.longitude" placeholder="请输入经度"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="纬度" prop="latitude">
|
<el-input v-model="dataForm.latitude" placeholder="请输入纬度"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</template>
|
<template v-if="showName">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="性别" prop="gender">
|
<el-select clearable placeholder="请选择性别" style="width: 100%" v-model="dataForm.gender">
|
<el-option
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
v-for="item in genderList">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="民族" prop="nation">
|
<el-input v-model="dataForm.nation" placeholder="请输入民族"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</template>
|
|
<el-form-item label="证件签发机关" prop="issueOrgan">
|
<el-input v-model="dataForm.issueOrgan" placeholder="请输入证件签发机关"></el-input>
|
</el-form-item>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="证件有效期开始" prop="limitStart">
|
<el-date-picker
|
v-model="dataForm.limitStart"
|
type="date"
|
style="width: 100%"
|
placeholder="选择日期">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="证件有效期结束" prop="limitEnd">
|
<el-date-picker
|
v-model="dataForm.limitEnd"
|
type="date"
|
style="width: 100%"
|
placeholder="选择日期">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="违法总数" prop="lawNum">
|
<el-input v-model="dataForm.lawNum" placeholder="请输入违法总数"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="关键字" prop="keyword">
|
<el-autocomplete
|
style="width: 100%"
|
placeholder="请设置关键字"
|
:fetch-suggestions="querySearch"
|
v-model="dataForm.keyword">
|
</el-autocomplete>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="visible = false">取消</el-button>
|
<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
|
</span>
|
</el-dialog>
|
</template>
|
|
<script>
|
import {getObj, addObj, putObj} from '@/api/company'
|
import {remote} from "@/api/admin/dict"
|
import {getKeywords} from "@/api/lawList/lawList";
|
|
export default {
|
data() {
|
return {
|
visible: false,
|
showName: false,
|
showCompany: true,
|
industryList: [], //经营范围回显
|
companyStatus: [], //企业状态回显
|
companyStype: [], //企业类型回显
|
keywordList: [],
|
typeList: [],
|
genderList: [],
|
dataForm: {
|
id: 0,
|
legalPerson: '',
|
address: '',
|
businessScope: '',
|
phone: '',
|
lawNum: '',
|
keyword: '',
|
registeredCapital: '',
|
setupDate: '',
|
latitude: '',
|
longitude: '',
|
nation: '',
|
gender: '',
|
issueOrgan: '',
|
limitStart: '',
|
limitEnd: '',
|
subjectName: '',
|
subjectType: '',
|
idCard: ''
|
},
|
dataRule: {
|
subjectType: [
|
{required: true, message: '请选择市场主体类型', trigger: 'blur'}
|
],
|
subjectName: [
|
{required: true, message: '名称不能为空', trigger: 'blur'}
|
],
|
idCard: [
|
{required: true, message: '编码或身份证号不能为空', trigger: 'blur'}
|
],
|
// registeredCapital: [
|
// {required: true, message: '注册资金不能为空', trigger: 'blur'}
|
// ],
|
legalPerson: [
|
{required: true, message: '法定代表人不能为空', trigger: 'blur'}
|
],
|
setupDate: [
|
{required: true, message: '成立时间不能为空', trigger: 'blur'}
|
],
|
address: [
|
{required: true, message: '地址不能为空', trigger: 'blur'}
|
],
|
// businessScope: [
|
// {required: true, message: '经营范围不能为空', trigger: 'blur'}
|
// ],
|
phone: [
|
{required: true, message: '联系电话不能为空', trigger: 'blur'}
|
],
|
lawNum: [
|
{required: true, message: '违法总数不能为空', trigger: 'blur'}
|
],
|
keyword: [
|
{required: true, message: '关键字不能为空', trigger: 'change'}
|
],
|
}
|
}
|
},
|
methods: {
|
init(id) {
|
this.dataForm.id = id || 0
|
this.visible = true
|
this.$nextTick(() => {
|
this.$refs['dataForm'].resetFields()
|
if (this.dataForm.id) {
|
getObj(this.dataForm.id).then(response => {
|
this.dataForm = response.data.data;
|
if ("公民" == this.dataForm.subjectType) {
|
this.showName = true;
|
this.showCompany = false;
|
} else {
|
this.showName = false;
|
this.showCompany = true;
|
}
|
})
|
}
|
})
|
},
|
changeType(value) {
|
if ("公民" == value) {
|
this.showName = true;
|
this.showCompany = false;
|
} else {
|
this.showName = false;
|
this.showCompany = true;
|
}
|
},
|
// 表单提交
|
dataFormSubmit() {
|
this.$refs['dataForm'].validate((valid) => {
|
if (valid) {
|
putObj(this.dataForm).then(data => {
|
this.$message.success('操作成功')
|
this.visible = false
|
this.$emit('refreshDataList')
|
});
|
}
|
})
|
},
|
querySearch(queryString, cb) {
|
var keywordList = this.keywordList;
|
var results = queryString ? keywordList.filter(this.createFilter(queryString)) : keywordList;
|
// 调用 callback 返回建议列表的数据
|
cb(results);
|
},
|
createFilter(queryString) {
|
return (keyword) => {
|
return (keyword.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
};
|
},
|
getAllKeywords() {
|
getKeywords().then(res => {
|
this.keywordList = res.data.data;
|
})
|
}
|
},
|
created() {
|
// remote('industry').then(res => {
|
// this.industryList = res.data.data
|
// })
|
remote('company_status').then(res => {
|
this.companyStatus = res.data.data
|
})
|
remote('market_type').then(res => {
|
this.typeList = res.data.data
|
})
|
remote('gender_type').then(res => {
|
this.genderList = res.data.data
|
})
|
this.getAllKeywords();
|
}
|
}
|
</script>
|
