qiuhongwu
1 year ago
parent
28d5df9b2d
commit
3f51ff8692
@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<el-card class="box-card xy-card xy-margin-zero">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>编辑企业</span>
|
||||
<span><span style="color:red;">*</span>为必填项</span>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<div class="text item">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div class="xy-info-title-a1">
|
||||
<span class="xy-icon">▋</span><span class="xy-text">基础信息</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="160px" class="demo-ruleForm" :size="formSize" status-icon>
|
||||
<el-row style="width:95%">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="企业代码" prop="name">
|
||||
<el-input v-model="ruleForm.word" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="企业名称" prop="name">
|
||||
<el-input v-model="ruleForm.firm" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="企业简称/英文名称">
|
||||
<el-input v-model="ruleForm.name" placeholder="默认企业名称拼音首字母" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="width:95%">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="主体类型" prop="region">
|
||||
<el-select v-model="ruleForm.region" clearable placeholder="主体类型" style="width:100%">
|
||||
<el-option label="企业" value="shanghai" />
|
||||
<el-option label="个体户" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="所在城市" prop="count">
|
||||
<el-select v-model="ruleForm.region" clearable placeholder="所在城市" style="width:100%">
|
||||
<el-option label="企业" value="shanghai" />
|
||||
<el-option label="个体户" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="行业分类" clearable prop="count">
|
||||
<el-select v-model="ruleForm.region" clearable placeholder="行业类型" style="width:100%">
|
||||
<el-option label="企业" value="shanghai" />
|
||||
<el-option label="个体户" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="width:95%">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="首联系人" prop="name">
|
||||
<el-input v-model="ruleForm.date1" placeholder="输入内容" />
|
||||
</el-form-item></el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="职位">
|
||||
<el-input v-model="ruleForm.date1" placeholder="输入内容" />
|
||||
</el-form-item></el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="手机号码" prop="phone">
|
||||
<el-input v-model="ruleForm.date1" placeholder="输入内容" />
|
||||
</el-form-item></el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div class="xy-info-title-a1">
|
||||
<span class="xy-icon">▋</span><span class="xy-text">联系人信息</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="企业LOGO" prop="">
|
||||
<el-upload style="margin-top:50px" class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
|
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
||||
<el-icon v-else class="avatar-uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-row>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="详细地址" prop="name">
|
||||
<el-input v-model="ruleForm.date1" placeholder="输入内容" />
|
||||
</el-form-item></el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="企业电话" prop="phone">
|
||||
<el-input v-model="ruleForm.date1" placeholder="输入内容" />
|
||||
</el-form-item></el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="企业传真" prop="name">
|
||||
<el-input v-model="ruleForm.date1" placeholder="输入内容" />
|
||||
</el-form-item></el-col>
|
||||
<el-col :span="11">
|
||||
<el-form-item label="企业网址" prop="phone">
|
||||
<el-input v-model="ruleForm.date1" placeholder="输入网址">
|
||||
<template #prepend>Http://</template>
|
||||
</el-input>
|
||||
</el-form-item></el-col>
|
||||
<el-col :span="22
|
||||
">
|
||||
<el-form-item label="企业介绍" prop="phone">
|
||||
<el-input v-model="ruleForm.desc" maxlength="300" :autosize="{ minRows: 6, maxRows: 8 }" show-word-limit type="textarea" placeholder="输入内容" />
|
||||
</el-form-item></el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div class="xy-info-title-a1">
|
||||
<span class="xy-icon">▋</span><span class="xy-text">财务信息</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="width:95%">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="企业税号" prop="name">
|
||||
<el-input v-model="ruleForm.name" placeholder="输入内容" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="发票抬头" prop="name">
|
||||
<el-input v-model="ruleForm.name" placeholder="输入内容" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="开户银行" prop="name">
|
||||
<el-input v-model="ruleForm.name" placeholder="输入内容"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="width:95%">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="银行账号" prop="name">
|
||||
<el-input v-model="ruleForm.name" placeholder="输入内容" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="电话号码" prop="name">
|
||||
<el-input v-model="ruleForm.name" placeholder="输入内容"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="注册地址" prop="name">
|
||||
<el-input v-model="ruleForm.name" placeholder="输入内容"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row justify="center">
|
||||
<el-col :span="8">
|
||||
<el-form-item>
|
||||
<el-button style="width:120px;height:40px" type="primary" @click="submitForm(ruleFormRef)">
|
||||
保存
|
||||
</el-button>
|
||||
|
||||
<el-button style="width:120px;height:40px" @click="backtrack()">返回</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
// import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
let router = useRouter()
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
interface RuleForm {
|
||||
word:any
|
||||
firm:any
|
||||
name: any
|
||||
region: any
|
||||
count: any
|
||||
date1: any
|
||||
desc: any
|
||||
}
|
||||
|
||||
const formSize = ref('default')
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
|
||||
|
||||
const ruleForm = reactive<RuleForm>({
|
||||
word:'2023191110001',
|
||||
firm:'济钢城市矿产科技有限公司',
|
||||
name: '',
|
||||
region: '',
|
||||
count: '',
|
||||
date1: '',
|
||||
desc: ''
|
||||
})
|
||||
|
||||
const rules = reactive<FormRules<RuleForm>>({
|
||||
name: [
|
||||
{ required: true, message: '请输入内容', trigger: 'blur' },
|
||||
{ min: 1, max: 11, message: '输入1-11个字', trigger: 'blur' }
|
||||
],
|
||||
region: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
count: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
//点击保存
|
||||
const submitForm = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
console.log('新建submit校验成功 返回上一页!')
|
||||
router.push('./index.vue') //需配置路由
|
||||
} else {
|
||||
console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
const backtrack = () => {
|
||||
router.push('./index.vue') //需配置路由
|
||||
}
|
||||
|
||||
const options = Array.from({ length: 10000 }).map((_, idx) => ({
|
||||
value: `${idx + 1}`,
|
||||
label: `${idx + 1}`
|
||||
}))
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.box-card {
|
||||
border-radius: 10px;
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.xy-info-title-a1 {
|
||||
padding: 14px;
|
||||
line-height: 28px;
|
||||
font-weight: 500;
|
||||
|
||||
.xy-icon {
|
||||
font-family: '阿里巴巴普惠体 2.0 65 Medium', '阿里巴巴普惠体 2.0 55', '阿里巴巴普惠体 2.0',
|
||||
sans-serif;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.xy-text {
|
||||
padding-left: 5px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
.el-row {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.el-table--border .el-table__cell {
|
||||
border-right: none;
|
||||
}
|
||||
.avatar-uploader .avatar {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<style >
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: var(--el-transition-duration-fast);
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-icon.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<el-card class="box-card xy-card xy-margin-zero">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>认证企业</span>
|
||||
<span><span style="color:red;">*</span>为必填项</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="itemcard">
|
||||
<el-row style="justify-content: center;">
|
||||
<el-col :span="17">
|
||||
<el-steps :active="1" align-center>
|
||||
<el-step title="主体信息" description="请填写主体信息" />
|
||||
<el-step title="法定代表人信息" description="请填写法定代表人信息" />
|
||||
<el-step title="经营信息" description="请填写经营信息" />
|
||||
<el-step title="提交成功" description="信息提交成功" />
|
||||
</el-steps>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="160px" class="demo-ruleForm" :size="formSize" status-icon>
|
||||
<el-row style="width:95%;margin-top:50px">
|
||||
<el-col :span="12">
|
||||
<el-col>
|
||||
<el-form-item label="主体类型：" prop="region">
|
||||
<el-select v-model="ruleForm.region" clearable placeholder="主体类型" style="width:100%">
|
||||
<el-option label="企业" value="shanghai" />
|
||||
<el-option label="个体户" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-form-item label="注册地址：" prop="region2">
|
||||
<el-select v-model="ruleForm.region2" clearable placeholder="选择城市" style="width:100%">
|
||||
<el-option label="企业" value="shanghai" />
|
||||
<el-option label="个体户" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-form-item prop="name">
|
||||
<el-input v-model="ruleForm.address" placeholder="详细地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-form-item label="社会统一信用代码：" prop="name">
|
||||
<el-input v-model="ruleForm.date1" placeholder="输入内容
|
||||
" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-form-item label="经营期限：" prop="radio2">
|
||||
<el-radio-group v-model="ruleForm.radio2" size="large">
|
||||
<el-radio-button label="非长期" />
|
||||
<el-radio-button label="长期" />
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-date-picker style="width:100%" v-model="ruleForm.date" type="daterange" start-placeholder="请选择" end-placeholder="日期范围" :default-time="defaultTime" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-col>
|
||||
<el-form-item label="企业名称：" prop="name">
|
||||
<el-input v-model="ruleForm.firm" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-form-item label="经营范围：" >
|
||||
<el-input v-model="ruleForm.desc" maxlength="300" :autosize="{ minRows: 3, maxRows: 3 }" show-word-limit type="textarea" placeholder="输入内容" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col>
|
||||
<el-form-item label="上传证件照片：" prop="pic">
|
||||
<el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
|
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
||||
<el-icon v-else class="avatar-uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
<div>
|
||||
<span style="font-size:13px;color:#999999;">请上传统一社会信用代码证</span><br>
|
||||
<span style="font-size:12px;color:#999999;">必须为彩色图片且小于6M,文件格式为bmp、png、jpeg、jpg或gif。<a href="#" style="color: rgb(64, 158, 255);">查看示例</a></span>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row justify="center">
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-button style="width:120px;height:40px" type="primary" plain @click="goback()">
|
||||
上一步
|
||||
</el-button>
|
||||
<el-button style="width:120px;height:40px" type="primary" @click="submitForm(ruleFormRef)">
|
||||
下一步
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
// import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
let router = useRouter()
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
interface RuleForm {
|
||||
address:any
|
||||
word: any
|
||||
firm: any
|
||||
name: any
|
||||
region: any
|
||||
count: any
|
||||
date1: any
|
||||
desc: any
|
||||
radio2:any
|
||||
pic:any
|
||||
region2:any
|
||||
}
|
||||
|
||||
const formSize = ref('default')
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
|
||||
const ruleForm = reactive<RuleForm>({
|
||||
word: '2023191110001',
|
||||
firm: '济钢城市矿产科技有限公司',
|
||||
name: '',
|
||||
region: '',
|
||||
region2:'',
|
||||
count: '',
|
||||
date1: '',
|
||||
desc: '',
|
||||
radio2:'',
|
||||
pic:'',
|
||||
address:''
|
||||
})
|
||||
|
||||
const rules = reactive<FormRules<RuleForm>>({
|
||||
name: [
|
||||
{ required: true, message: '请输入内容', trigger: 'blur' },
|
||||
{ min: 1, max: 11, message: '输入1-11个字', trigger: 'blur' }
|
||||
],
|
||||
address:[
|
||||
{ required: true, message: '请输入内容', trigger: 'blur' },
|
||||
{ min: 1, max: 11, message: '输入1-11个字', trigger: 'blur' }
|
||||
],
|
||||
region: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
region2: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
count: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
radio2: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
pic:[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
})
|
||||
|
||||
//点击上一步
|
||||
const goback = ()=>{
|
||||
router.back()
|
||||
}
|
||||
//点击下一步
|
||||
const submitForm = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
console.log('新建submit校验成功 去指定页面!')
|
||||
router.push('./legalmessage.vue') //需配置路由
|
||||
} else {
|
||||
console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const options = Array.from({ length: 10000 }).map((_, idx) => ({
|
||||
value: `${idx + 1}`,
|
||||
label: `${idx + 1}`
|
||||
}))
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.itemcard {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.box-card {
|
||||
border-radius: 10px;
|
||||
}
|
||||
.xy-info-title-a1 {
|
||||
padding: 14px;
|
||||
line-height: 28px;
|
||||
font-weight: 500;
|
||||
|
||||
.xy-icon {
|
||||
font-family: '阿里巴巴普惠体 2.0 65 Medium', '阿里巴巴普惠体 2.0 55', '阿里巴巴普惠体 2.0',
|
||||
sans-serif;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.xy-text {
|
||||
padding-left: 5px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
.el-row {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.el-table--border .el-table__cell {
|
||||
border-right: none;
|
||||
}
|
||||
.avatar-uploader .avatar {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<style >
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: var(--el-transition-duration-fast);
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-icon.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<el-card class="box-card xy-card xy-margin-zero">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>认证企业</span>
|
||||
<span><span style="color:red;">*</span>为必填项</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="itemcard">
|
||||
<el-row style="justify-content: center;">
|
||||
<el-col :span="17">
|
||||
<el-steps :active="3" align-center>
|
||||
<el-step title="主体信息" description="请填写主体信息" />
|
||||
<el-step title="法定代表人信息" description="请填写法定代表人信息" />
|
||||
<el-step title="经营信息" description="请填写经营信息" />
|
||||
<el-step title="提交成功" description="信息提交成功" />
|
||||
</el-steps>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="160px" class="demo-ruleForm" :size="formSize" status-icon>
|
||||
<el-row style="width:95%;margin-top:50px">
|
||||
|
||||
<el-col :span="24" style="margin:20px 0;">
|
||||
<div class="xy-info-title-a1">
|
||||
<div>
|
||||
<span class="xy-icon">▋</span><span class="xy-text">联系人信息</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="姓名：" prop="name">
|
||||
<el-input v-model="ruleForm.name" placeholder="输入内容" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="手机号：" prop="name">
|
||||
<el-input v-model="ruleForm.name" placeholder="输入内容" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="常用邮箱：" prop="name">
|
||||
<el-input v-model="ruleForm.name" placeholder="输入内容" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" style="margin:20px 0;">
|
||||
<div class="xy-info-title-a1">
|
||||
<div>
|
||||
<span class="xy-icon">▋</span><span class="xy-text">财务信息</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-col>
|
||||
<el-form-item label="企业税号：" prop="name">
|
||||
<el-input v-model="ruleForm.name" placeholder="输入内容" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-form-item label="开户银行：" prop="name">
|
||||
<el-input v-model="ruleForm.name" placeholder="输入内容" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-form-item label="电话号码：" prop="name">
|
||||
<el-radio-group v-model="ruleForm.radio2" size="large">
|
||||
<el-radio-button label="非长期" />
|
||||
<el-radio-button label="长期" />
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-col>
|
||||
<el-form-item label="发票抬头：" prop="name">
|
||||
<el-input v-model="ruleForm.firm" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-form-item label="银行账号：" prop="name">
|
||||
<el-input v-model="ruleForm.firm" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-form-item label="注册地址：" prop="name">
|
||||
<el-input v-model="ruleForm.firm" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row justify="center">
|
||||
<el-col :span="12">
|
||||
<el-form-item>
|
||||
<el-button style="width:120px;height:40px" type="primary" plain @click="goback()">
|
||||
上一步
|
||||
</el-button>
|
||||
<el-button style="width:120px;height:40px" type="primary" @click="submitForm(ruleFormRef)">
|
||||
下一步
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue'
|
||||
import type { FormInstance, FormRules } from 'element-plus'
|
||||
// import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
let router = useRouter()
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
interface RuleForm {
|
||||
word: any
|
||||
firm: any
|
||||
name: any
|
||||
region: any
|
||||
count: any
|
||||
date1: any
|
||||
desc: any
|
||||
radio2: any
|
||||
}
|
||||
|
||||
const formSize = ref('default')
|
||||
const ruleFormRef = ref<FormInstance>()
|
||||
|
||||
const ruleForm = reactive<RuleForm>({
|
||||
word: '2023191110001',
|
||||
firm: '济钢城市矿产科技有限公司',
|
||||
name: '',
|
||||
region: '',
|
||||
count: '',
|
||||
date1: '',
|
||||
desc: '',
|
||||
radio2: '法人'
|
||||
})
|
||||
|
||||
const rules = reactive<FormRules<RuleForm>>({
|
||||
name: [
|
||||
{ required: true, message: '请输入内容', trigger: 'blur' },
|
||||
{ min: 1, max: 11, message: '输入1-11个字', trigger: 'blur' }
|
||||
],
|
||||
region: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
count: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
//点击上一步
|
||||
const goback = ()=>{
|
||||
router.back()
|
||||
}
|
||||
//点击保存
|
||||
const submitForm = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
await formEl.validate((valid, fields) => {
|
||||
if (valid) {
|
||||
console.log('新建submit校验成功')
|
||||
router.push('./okmessage.vue') //需配置路由
|
||||
} else {
|
||||
console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const options = Array.from({ length: 10000 }).map((_, idx) => ({
|
||||
value: `${idx + 1}`,
|
||||
label: `${idx + 1}`
|
||||
}))
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.itemcard {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.box-card {
|
||||
border-radius: 10px;
|
||||
}
|
||||
.xy-info-title-a1 {
|
||||
padding: 14px;
|
||||
line-height: 28px;
|
||||
font-weight: 500;
|
||||
|
||||
.xy-icon {
|
||||
font-family: '阿里巴巴普惠体 2.0 65 Medium', '阿里巴巴普惠体 2.0 55', '阿里巴巴普惠体 2.0',
|
||||
sans-serif;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.xy-text {
|
||||
padding-left: 5px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
.el-row {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.el-table--border .el-table__cell {
|
||||
border-right: none;
|
||||
}
|
||||
.avatar-uploader .avatar {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<style >
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: var(--el-transition-duration-fast);
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-icon.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue