初始化项目
This commit is contained in:
18500206848
232
src/views/wel/cards/authSteps/companyInfo.vue
Normal file
232
src/views/wel/cards/authSteps/companyInfo.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<el-row>
|
||||
<el-col :sm="24" :md="{ span: 12, offset: 6 }">
|
||||
<el-form
|
||||
:model="form"
|
||||
ref="form"
|
||||
class="content"
|
||||
label-position="right"
|
||||
label-width="140px"
|
||||
:rules="rules"
|
||||
>
|
||||
<el-form-item label="企业名称" prop="companyName">
|
||||
<el-input
|
||||
maxlength="50"
|
||||
placeholder="请输入"
|
||||
v-model.trim="form.companyName"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="统一社会信用代码" prop="companyTid">
|
||||
<el-input
|
||||
placeholder="请输入18位有效社会统一信用代码"
|
||||
v-model.trim="form.companyTid"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="所在地区" prop="cityId">
|
||||
<jl-city-cascader
|
||||
:disabled="disabled"
|
||||
v-model="form.cityId"
|
||||
></jl-city-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="详细地址" prop="companyAddress">
|
||||
<el-input
|
||||
placeholder="请输入"
|
||||
v-model.trim="form.companyAddress"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属行业" prop="tradeId">
|
||||
<el-select placeholder="请选择" v-model="form.tradeId">
|
||||
<el-option
|
||||
v-for="item in tradeDic"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="企业营业执照：" prop="authUrlId">
|
||||
<el-upload
|
||||
:action="putFile"
|
||||
:show-file-list="false"
|
||||
:on-progress="
|
||||
() => {
|
||||
uploading = true;
|
||||
}
|
||||
"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload"
|
||||
:http-request="httpRequest"
|
||||
>
|
||||
<div v-loading="uploading">
|
||||
<img
|
||||
class="companyInfo-upload-image"
|
||||
:src="form.authUrlId || imageUrl"
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="companyInfo-upload-tip" slot="tip">
|
||||
请上传营业执照
|
||||
</div> -->
|
||||
</el-upload>
|
||||
<p class="uploadImgP">上传图片大小限制2M以内</p>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="next" type="primary">下一步</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { putFile } from "@/api/resource/oss";
|
||||
import { getTradeDic } from "@/api/manage/trade";
|
||||
import { checkIdentity } from "@/api/tenant/auth";
|
||||
import lodash from "lodash";
|
||||
import httpRequest from "./httpRequest";
|
||||
|
||||
const accept = ["image/png", "image/jpeg", "image/svg+xml", "image/gif"];
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: Object,
|
||||
},
|
||||
data() {
|
||||
const validateId = (rule, value, callback) => {
|
||||
checkIdentity(value)
|
||||
.then(() => {
|
||||
callback();
|
||||
})
|
||||
.catch((err) => {
|
||||
|
||||
callback(err);
|
||||
this.$message.closeAll();
|
||||
});
|
||||
};
|
||||
return {
|
||||
uploading: false,
|
||||
putFile,
|
||||
imageUrl: "/img/license.png",
|
||||
rules: {
|
||||
companyName: [
|
||||
{ required: true, message: "请输入企业名称", trigger: "blur" },
|
||||
],
|
||||
companyTid: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入统一社会信用代码",
|
||||
trigger: "blur",
|
||||
},
|
||||
{
|
||||
max: 18,
|
||||
min: 18,
|
||||
trigger: "blur",
|
||||
message: "请输入18位有效社会统一信用代码",
|
||||
},
|
||||
{
|
||||
trigger: "blur",
|
||||
validator: validateId,
|
||||
},
|
||||
],
|
||||
cityId: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择所在地区",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
companyAddress: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入详细地址",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
tradeId: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择所属行业",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
authUrlId: [
|
||||
{
|
||||
required: true,
|
||||
message: "请上传营业执照",
|
||||
trigger: "change",
|
||||
},
|
||||
],
|
||||
},
|
||||
form: lodash.clone(this.value || {}),
|
||||
tradeDic: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
getTradeDic(true).then((res) => {
|
||||
this.tradeDic = res.data.data;
|
||||
});
|
||||
},
|
||||
next() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$emit("submit", this.form);
|
||||
this.$emit("input", this.form);
|
||||
}
|
||||
});
|
||||
},
|
||||
/**上传图片**/
|
||||
handleAvatarSuccess(res, file) {
|
||||
this.imageUrl = URL.createObjectURL(file.raw);
|
||||
this.$set(this.form, "authUrlId", res.data.link);
|
||||
this.uploading = false;
|
||||
},
|
||||
beforeAvatarUpload(file) {
|
||||
const isJPG = accept.includes(file.type);
|
||||
const is2M=file.size/1024/1024<2;
|
||||
if (!isJPG) {
|
||||
this.$message.error("图片格式不正确!");
|
||||
}
|
||||
if(!is2M){
|
||||
this.$message.error("上传图片大小不能超过2M!");
|
||||
}
|
||||
return isJPG && is2M;
|
||||
},
|
||||
/**上传图片*/
|
||||
httpRequest,
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.form = val;
|
||||
},
|
||||
form: {
|
||||
handler(val) {
|
||||
this.$emit("input", val);
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.companyInfo-upload-image {
|
||||
height: 100px;
|
||||
width: 160px;
|
||||
}
|
||||
.companyInfo-upload-tip {
|
||||
line-height: 12px;
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
}
|
||||
.el-form-item__content{
|
||||
line-height: normal;
|
||||
}
|
||||
.uploadImgP{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 18px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user