Files

266 lines
6.8 KiB
Vue
Raw Normal View History

2022-07-22 17:32:45 +08:00
<template>
<el-form
2023-06-19 17:25:29 +08:00
ref="formRef"
2022-07-22 17:32:45 +08:00
:label-width="labelWidth + 'px'"
2023-06-19 17:25:29 +08:00
:model="modelValue"
:rules="rules"
2022-07-22 17:32:45 +08:00
>
2023-06-19 17:25:29 +08:00
<div v-if="showTitle" class="form_title">基本信息</div>
2022-07-22 17:32:45 +08:00
<el-row>
<el-col :span="24">
<el-form-item label="姓名:" prop="name">
2023-06-19 17:25:29 +08:00
<el-input v-model="modelValue.name" :disabled="!isAdd"></el-input>
2022-07-22 17:32:45 +08:00
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="手机号:" prop="mobile">
2023-06-19 17:25:29 +08:00
<el-input v-model="modelValue.mobile" :disabled="!isAdd"></el-input>
2022-07-22 17:32:45 +08:00
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
2023-06-19 17:25:29 +08:00
<el-form-item label="身份证号:" prop="idCard">
<el-input v-model="modelValue.idCard" :disabled="!isAdd"></el-input>
2022-07-22 17:32:45 +08:00
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
2023-06-19 17:25:29 +08:00
<el-form-item label="工作所在地:" prop="wordAddress">
<el-input v-model="modelValue.wordAddress" />
2022-07-22 17:32:45 +08:00
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
2023-06-19 17:25:29 +08:00
<el-form-item label="工作经历:" prop="experience">
2022-07-22 17:32:45 +08:00
<el-input
2023-06-19 17:25:29 +08:00
v-model="modelValue.experience"
2022-07-22 17:32:45 +08:00
:autosize="{ minRows: 2, maxRows: 6 }"
2023-06-19 17:25:29 +08:00
type="textarea"
2022-07-22 17:32:45 +08:00
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
2023-06-19 17:25:29 +08:00
<el-form-item label="所属站点:" prop="tenantId">
<site-options
v-model="modelValue.tenantId"
:limitWidth="false"
:site-list="siteList"
:size="''"
/>
2022-07-22 17:32:45 +08:00
</el-form-item>
</el-col>
</el-row>
<!-- <FieldOptions v-model="value" :labelWidth="labelWidth" ref="fieldForm" /> -->
2023-06-19 17:25:29 +08:00
<field-options
ref="researchsFormRef"
v-model="modelValue"
2022-07-22 17:32:45 +08:00
:labelWidth="labelWidth"
2023-06-19 17:25:29 +08:00
placeholder="请选择擅长领域"
2022-07-22 17:32:45 +08:00
/>
<InputBoxAdd
2023-06-19 17:25:29 +08:00
ref="keywordsFormRef"
v-model="modelValue"
2022-07-22 17:32:45 +08:00
:labelWidth="labelWidth"
fieldKey="keywords"
2023-06-19 17:25:29 +08:00
placeholder="应用场景关键词+技术产品关键词"
title="关键词"
2022-07-22 17:32:45 +08:00
/>
2023-06-19 17:25:29 +08:00
<el-row>
2022-07-22 17:32:45 +08:00
<el-col :span="24">
<el-form-item label="身份证:" required>
2023-06-19 17:25:29 +08:00
<el-row :gutter="20" justify="space-between" type="flex">
2022-07-22 17:32:45 +08:00
<el-col :span="8">
2023-06-19 17:25:29 +08:00
<el-form-item prop="idImage.0">
2022-07-22 17:32:45 +08:00
<ImageUpload
2023-06-19 17:25:29 +08:00
v-model="modelValue.idImage[0]"
2022-07-22 17:32:45 +08:00
:isShowTip="false"
:limit="1"
/>
</el-form-item>
<div style="text-align: center">身份证人像面</div>
</el-col>
<el-col :span="8">
2023-06-19 17:25:29 +08:00
<el-form-item prop="idImage.1">
2022-07-22 17:32:45 +08:00
<ImageUpload
2023-06-19 17:25:29 +08:00
v-model="modelValue.idImage[1]"
2022-07-22 17:32:45 +08:00
:isShowTip="false"
:limit="1"
/>
</el-form-item>
<div style="text-align: center">身份证国徽面</div>
</el-col>
<el-col :span="8">
2023-06-19 17:25:29 +08:00
<el-form-item prop="idImage.2">
2022-07-22 17:32:45 +08:00
<ImageUpload
2023-06-19 17:25:29 +08:00
v-model="modelValue.idImage[2]"
2022-07-22 17:32:45 +08:00
:isShowTip="false"
:limit="1"
/>
</el-form-item>
<div style="text-align: center">手持身份证人像面</div>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="成果经纪资格证书:" prop="credential_image">
2023-06-19 17:25:29 +08:00
<el-row :gutter="20" justify="space-between" type="flex">
2022-07-22 17:32:45 +08:00
<el-col :span="8">
2023-06-19 17:25:29 +08:00
<image-upload
v-model="modelValue.certificatePics"
2022-07-22 17:32:45 +08:00
:isShowTip="false"
/>
</el-col>
</el-row>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
2023-06-19 17:25:29 +08:00
<script setup>
2022-07-22 17:32:45 +08:00
import InputBoxAdd from "@/views/components/InputBoxAdd";
2023-06-19 17:25:29 +08:00
import FieldOptions from "@/views/components/FieldOptions";
import SiteOptions from "@/views/components/SiteOptions";
import { reactive, ref, toRefs } from "vue";
import { tenantSelect } from "@/api/subPlatform/tenant";
import ImageUpload from "@/components/ImageUpload/index.vue";
2022-11-25 17:30:10 +08:00
// import { researchSelect } from "@/api/dataList/research";
// import { laboratorySelect } from "@/api/dataList/laboratory";
2023-06-19 17:25:29 +08:00
const props = defineProps({
modelValue: Object,
isAdd: {
type: Boolean,
default: true,
2022-07-22 17:32:45 +08:00
},
2023-06-19 17:25:29 +08:00
showTitle: {
type: Boolean,
default: false,
2022-07-22 17:32:45 +08:00
},
2023-06-19 17:25:29 +08:00
formType: {
type: Number,
default: 1,
2022-07-22 17:32:45 +08:00
},
2023-06-19 17:25:29 +08:00
labelWidth: {
type: Number,
default: 120,
2022-07-22 17:32:45 +08:00
},
2023-06-19 17:25:29 +08:00
});
const data = reactive({
rules: {
name: [{ required: true, message: "请输入", trigger: "blur" }],
mobile: [
{ required: true, message: "请输入", trigger: "blur" },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur",
},
],
idCard: [{ required: true, message: "请输入", trigger: "blur" }],
workAddress: [{ required: true, message: "请输入", trigger: "blur" }],
experience: [{ required: true, message: "请输入", trigger: "blur" }],
tenantId: [
{
required: true,
message: "请选择",
trigger: ["blur", "change"],
},
],
"idImage.0": [
{
required: true,
message: "请上传",
trigger: ["blur", "change"],
},
],
"idImage.1": [
{
required: true,
message: "请上传",
trigger: ["blur", "change"],
},
],
"idImage.2": [
{
required: true,
message: "请上传",
trigger: ["blur", "change"],
},
],
},
});
const { rules } = toRefs(data);
const researchOptions = ref([]);
const formRef = ref();
const keywordsFormRef = ref();
const researchsFormRef = ref();
const siteList = ref([]);
// 获取站点列表
const getSiteList = async () => {
const resp = await tenantSelect();
siteList.value = resp.rows;
};
getSiteList();
const validateForm = async function () {
let formValid;
try {
formValid = await formRef.value.validate();
} catch (error) {
formValid = false;
}
const keywordsFormValid = await keywordsFormRef.value.validateForm(); // 关键词
const researchsFormValid = await researchsFormRef.value.validateForm(); // 研究方向
return formValid && keywordsFormValid && researchsFormValid;
2022-07-22 17:32:45 +08:00
};
2023-06-19 17:25:29 +08:00
defineExpose({
validateForm,
});
2022-07-22 17:32:45 +08:00
</script>
<style lang="scss" scoped>
.form_title {
font-weight: 700;
margin-bottom: 30px;
}
2023-06-19 17:25:29 +08:00
//:deep(.el-upload--picture-card) {
// width: 100%;
//}
//:deep(.hide) {
// height: 148px;
//}
//:deep(.el-upload-list--picture-card .el-upload-list__item) {
// width: 100%;
//}
2023-06-09 17:30:58 +08:00
2022-07-22 17:32:45 +08:00
.el-select,
.el-date-editor {
display: block;
width: 100%;
}
2023-06-19 17:25:29 +08:00
</style>