meizf
1 year ago
10 changed files with 594 additions and 5 deletions
@ -0,0 +1,465 @@ |
|||||
|
<template> |
||||
|
<div class="address_edit"> |
||||
|
<!-- 导航栏 --> |
||||
|
<!-- <div class="header_body"> |
||||
|
<header-nav |
||||
|
:slefBack="true" |
||||
|
@goBack="goBack" |
||||
|
:titelText="`企业信息登记`" |
||||
|
> |
||||
|
</header-nav> |
||||
|
|
||||
|
</div> |
||||
|
--> |
||||
|
<!-- 中间 --> |
||||
|
<div class="warp_body"> |
||||
|
<van-form @failed="onFailed" @submit="submit"> |
||||
|
<van-cell-group> |
||||
|
<van-field |
||||
|
v-model="submitData.enterpriseName" |
||||
|
label="企业名称" |
||||
|
required |
||||
|
placeholder="必填 企业名称" |
||||
|
:rules="[{ required: true, message: '必填项' }]" |
||||
|
/> |
||||
|
<Popup :visible="popupVisible" :content="popupContent" @close="closePopup" @reciveData="reciveData" /> |
||||
|
<van-field class="mult-line" |
||||
|
v-model="submitData.enterpriseNumber" |
||||
|
required |
||||
|
label="统一社会信用代码" |
||||
|
placeholder="必填 统一社会信用代码" |
||||
|
:rules="[{ required: true, message: '必填项' }]" |
||||
|
/> |
||||
|
<van-field |
||||
|
v-model="submitData.legalPerson" |
||||
|
label="法定代表人" |
||||
|
placeholder="必填 法定代表人姓名" |
||||
|
required |
||||
|
:rules="[{ required: true, message: '必填项' }]" |
||||
|
/> |
||||
|
<van-field |
||||
|
v-model="submitData.legalPerson" |
||||
|
label="联系电话" |
||||
|
placeholder="必填 联系电话" |
||||
|
required |
||||
|
:rules="[{ required: true, message: '必填项' }]" |
||||
|
/> |
||||
|
|
||||
|
<van-field |
||||
|
v-model="submitData.enterpriseTypeText" |
||||
|
label="企业类型" |
||||
|
placeholder="选填 企业类型" |
||||
|
readonly |
||||
|
clickable |
||||
|
is-link |
||||
|
@click="selectType" |
||||
|
/> |
||||
|
<van-popup v-model:show="data.showPicker" position="bottom"> |
||||
|
<van-picker |
||||
|
v-model="data.selectTypeValue" |
||||
|
:columns="data.columns" |
||||
|
@cancel="data.showPicker = false" |
||||
|
@confirm="onConfirm" |
||||
|
/> |
||||
|
</van-popup> |
||||
|
|
||||
|
<van-field |
||||
|
v-model="submitData.registeredCapital" |
||||
|
label="注册资本" |
||||
|
placeholder="选填 注册资本" |
||||
|
readonly |
||||
|
/> |
||||
|
<van-field |
||||
|
v-model="submitData.establishmentTime" |
||||
|
label="成立日期" |
||||
|
placeholder="选填 成立日期" |
||||
|
is-link |
||||
|
readonly |
||||
|
@click="selectDate" |
||||
|
/> |
||||
|
<van-popup v-model:show="data.showDatePicker" position="bottom"> |
||||
|
<van-date-picker |
||||
|
title="选择日期" |
||||
|
v-model="data.currentDate" |
||||
|
:min-date="data.minDate" |
||||
|
:max-date="data.maxDate" |
||||
|
:columns-type="data.columnsType" |
||||
|
@confirm="onDateConfirm" |
||||
|
@cancel="cancelSelectDate" |
||||
|
/> |
||||
|
</van-popup> |
||||
|
<van-field |
||||
|
v-model="submitData.operatingTerm" |
||||
|
label="经营期限" |
||||
|
placeholder="选填 经营期限" |
||||
|
is-link |
||||
|
@click="selectOperatingTermDate" |
||||
|
readonly |
||||
|
/> |
||||
|
<van-popup v-model:show="data.showOperatingTermPicker" position="bottom"> |
||||
|
<!-- <van-date-picker |
||||
|
title="选择日期" |
||||
|
v-model="data.operatingTermDate" |
||||
|
:min-date="data.minDate" |
||||
|
:max-date="data.maxDate" |
||||
|
:columns-type="data.columnsType" |
||||
|
@confirm="onOperatingTermConfirm" |
||||
|
@cancel="cancelSelectDate" |
||||
|
/> --> |
||||
|
<van-calendar v-model:show="data.showOperatingTermPicker" type="range" |
||||
|
:min-date="data.minDate" :max-date="data.maxDate" @confirm="onOperatingTermConfirm" /> |
||||
|
</van-popup> |
||||
|
|
||||
|
|
||||
|
<van-field |
||||
|
v-model="submitData.enterpriseAddress" |
||||
|
label="注册地址" |
||||
|
placeholder="选填 注册地址" |
||||
|
/> |
||||
|
<!--<div class="fold-div"><label>注册地址</label> |
||||
|
<van-text-ellipsis :content="submitData.enterpriseAddress" rows="2" autosize expand-text="展开" collapse-text="收起" /> |
||||
|
</div>--> |
||||
|
<van-field |
||||
|
v-model="submitData.businessScope" |
||||
|
label="经营范围" |
||||
|
placeholder="选填 经营范围" |
||||
|
rows="1" |
||||
|
autosize="{ maxHeight: 100, minHeight: 50 }" |
||||
|
type="textarea" |
||||
|
/> |
||||
|
<!--<div class="fold-div"> |
||||
|
<label>经营范围</label> |
||||
|
<van-text-ellipsis :content="submitData.businessScope" rows="2" autosize expand-text="展开" collapse-text="收起" /> |
||||
|
</div>--> |
||||
|
|
||||
|
</van-cell-group> |
||||
|
</van-form> |
||||
|
<!--<van-action-bar> |
||||
|
<van-action-bar-button text="提交" @click="submit()" /> |
||||
|
</van-action-bar>--> |
||||
|
<van-action-bar> |
||||
|
<van-button round block type="info" native-type="cancel" @click="closePage">取消</van-button> |
||||
|
<van-button round block type="info" native-type="submit" @click="submit()">保存</van-button> |
||||
|
</van-action-bar> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup name="register"> |
||||
|
import {nameCorrect} from'@/util/fileUpload' |
||||
|
import { showSuccessToast } from 'vant'; |
||||
|
import 'vant/es/toast/style'; |
||||
|
import {addEnterpriseInformation} from '../../api/enterprise' |
||||
|
import {getDict} from '../../api/Home' |
||||
|
import { reactive, ref } from "vue"; |
||||
|
const { useMy,useCommon } = $globalStore |
||||
|
const router = useRouter(); |
||||
|
const route = useRoute(); |
||||
|
let queryaddressId = ref(""); |
||||
|
const data = reactive({ |
||||
|
searchResult: [], |
||||
|
showTypePicker: false, |
||||
|
columns: [], |
||||
|
showDatePicker:false, |
||||
|
currentDate: [], |
||||
|
minDate: new Date(2020, 0, 1), |
||||
|
maxDate: new Date(2125, 5, 1), |
||||
|
columnsType :['year', 'month','day'], |
||||
|
showOperatingTermPicker:false, |
||||
|
operatingTermDate: ref(['2024', '01']), |
||||
|
selectTypeValue : ref[0], |
||||
|
}); |
||||
|
//保存参数 |
||||
|
const submitData = reactive({ |
||||
|
//企业名称 |
||||
|
enterpriseName:"", |
||||
|
//纳税识别号 |
||||
|
enterpriseNumber:"", |
||||
|
//企业类型 |
||||
|
enterpriseType: null, |
||||
|
enterpriseTypeText: null, |
||||
|
//地址 |
||||
|
enterpriseAddress:"", |
||||
|
//法人 |
||||
|
legalPerson:"", |
||||
|
//成立日期 |
||||
|
establishmentTime:"", |
||||
|
//注册资本 |
||||
|
registeredCapital:"", |
||||
|
//营业期限 |
||||
|
operatingTerm:"", |
||||
|
//经营范围 |
||||
|
businessScope:"", |
||||
|
}) |
||||
|
|
||||
|
|
||||
|
// 返回 |
||||
|
const goBack = () => { |
||||
|
router.go(-1); |
||||
|
}; |
||||
|
|
||||
|
const submit = () =>{ |
||||
|
console.log(submitData); |
||||
|
addEnterpriseInformation(submitData,success =>{ |
||||
|
//重新设置本地存储 |
||||
|
useCommon.SET_USER_ENTERPRISE_NUMBER(submitData.enterpriseNumber); |
||||
|
console.log(success) |
||||
|
//跳转企业二维码地址 |
||||
|
if(success.success){ |
||||
|
console.log("登记成功"); |
||||
|
showSuccessToast('登记成功'); |
||||
|
router.push( |
||||
|
{ |
||||
|
path: "/enterprise/qrCode", |
||||
|
query: { |
||||
|
enterpriseNumber: submitData.enterpriseNumber, |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
},error=>{ |
||||
|
console.log("登记失败") |
||||
|
}) |
||||
|
} |
||||
|
// 保存地址操作 |
||||
|
const onSave = () => { |
||||
|
router.replace({ name: "addressList" }); |
||||
|
}; |
||||
|
|
||||
|
const onConfirm = (value)=> { |
||||
|
data.value = value; |
||||
|
data.showPicker = false; |
||||
|
console.log(value) |
||||
|
submitData.enterpriseType = value.selectedValues[0]; |
||||
|
submitData.enterpriseTypeText = value.selectedOptions[0].text; |
||||
|
} |
||||
|
const selectType = () =>{ |
||||
|
data.showPicker = true; |
||||
|
// console.log(data) |
||||
|
} |
||||
|
const selectDate = () =>{ |
||||
|
data.showDatePicker = true; |
||||
|
console.log(data.showDatePicker) |
||||
|
} |
||||
|
|
||||
|
const currentDate =() => { |
||||
|
const now = new Date(); |
||||
|
const year = now.getFullYear(); |
||||
|
const month = (now.getMonth() + 1).toString().padStart(2, '0'); |
||||
|
const day = now.getDate().toString().padStart(2, '0'); |
||||
|
data.currentDate = [year, month, day] |
||||
|
} |
||||
|
|
||||
|
const selectOperatingTermDate = () =>{ |
||||
|
data.showOperatingTermPicker = true; |
||||
|
console.log(data.showOperatingTermPicker) |
||||
|
} |
||||
|
const onDateConfirm = (value)=> { |
||||
|
let tmptime = ""; |
||||
|
value.selectedValues.forEach((item,index) => { |
||||
|
tmptime += item + "-"; |
||||
|
}); |
||||
|
console.log(tmptime) |
||||
|
submitData.establishmentTime = tmptime.substring(0, tmptime.length-1); |
||||
|
data.showDatePicker = false; |
||||
|
} |
||||
|
const formatDate = (date) => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`; |
||||
|
//营业期限日期选择 |
||||
|
const onOperatingTermConfirm = (values)=> { |
||||
|
const [start, end] = values; |
||||
|
console.log(values); |
||||
|
data.showOperatingTermPicker = false; |
||||
|
submitData.operatingTerm = `${formatDate(start)}至${formatDate(end)}`; |
||||
|
} |
||||
|
//取消日期选择 |
||||
|
const cancelSelectDate = () =>{ |
||||
|
data.showOperatingTermPicker = false; |
||||
|
data.showDatePicker = false; |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
currentDate(); |
||||
|
|
||||
|
getDict({"dictType": "enterpriseType"},success =>{ |
||||
|
success.data.forEach(res =>{ |
||||
|
console.log(res) |
||||
|
var obj = { text: res.dictLabel, value: res.dictValue }; |
||||
|
data.columns.push(obj) |
||||
|
}) |
||||
|
},error =>{ |
||||
|
|
||||
|
}) |
||||
|
}); |
||||
|
//搜索结果回显 |
||||
|
const reciveData = (item) =>{ |
||||
|
console.log(item); |
||||
|
console.log(item.establishmentTime); |
||||
|
submitData.enterpriseName = item.enterpriseName; |
||||
|
submitData.enterpriseNumber = item.enterpriseNumber; |
||||
|
submitData.legalPerson = nameCorrect(item.legalPerson); |
||||
|
submitData.enterpriseType = item.enterpriseType; |
||||
|
submitData.enterpriseAddress = item.enterpriseAddress; |
||||
|
submitData.registeredCapital = item.registeredCapital; |
||||
|
submitData.establishmentTime = item.establishmentTime; |
||||
|
submitData.businessScope = item.businessScope; |
||||
|
submitData.operatingTerm = item.operatingTerm; |
||||
|
data.columns.forEach(res =>{ |
||||
|
console.log(res); |
||||
|
if(res.value == item.enterpriseType){ |
||||
|
submitData.enterpriseTypeText = res.text; |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
</script> |
||||
|
<script> |
||||
|
//企业筛选弹窗 |
||||
|
import Popup from '../enterprise/companyFilter.vue'; |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
Popup |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
popupVisible: false, |
||||
|
popupContent: '' |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
showPopup() { |
||||
|
this.popupVisible = true; |
||||
|
}, |
||||
|
closePopup() { |
||||
|
this.popupVisible = false; |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="less" scoped> |
||||
|
.address_edit { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
background-color: #ebf3fb; |
||||
|
} |
||||
|
/* vant4的 Toast 和 Popup 样式冲突,会导致 Toast 变成白底 */ |
||||
|
.van-popup.van-toast{ |
||||
|
background: var(--van-toast-background) !important; |
||||
|
box-sizing: content-box !important; |
||||
|
/* 下面3条css,影响不大 */ |
||||
|
transition: all var(--van-duration-fast) !important; |
||||
|
width: var(--van-toast-default-width) !important; |
||||
|
max-width: var(--van-toast-max-width) !important; |
||||
|
} |
||||
|
.van-popup.van-toast .van-toast__icon{ |
||||
|
font-size: var(--van-toast-icon-size) !important; |
||||
|
} |
||||
|
.warp_body { |
||||
|
margin: 0 3%; |
||||
|
padding-bottom: 3rem; |
||||
|
width: 94%; |
||||
|
height: 100%; |
||||
|
background-color: #ebf3fb; |
||||
|
margin-top: 0.15rem; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
/deep/ .van-action-bar { |
||||
|
box-shadow: 0 0 0.27rem #e5e5e5; |
||||
|
} |
||||
|
|
||||
|
/deep/ .van-button { |
||||
|
margin: 5% 3%; |
||||
|
padding: 0; |
||||
|
width: 94%; |
||||
|
height: 1rem; |
||||
|
color: #fff; |
||||
|
font-size: 0.4rem; |
||||
|
border-radius: 1rem; |
||||
|
background: #1367fe; |
||||
|
border: 1px solid #1367fe; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.fold-div { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
padding: 0 0.43rem 0.13rem; |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
color: rgb(50, 50, 51); |
||||
|
font-size: 0.37rem; |
||||
|
} |
||||
|
|
||||
|
.fold-div::after { |
||||
|
position: absolute; |
||||
|
left: 0.43rem; |
||||
|
bottom: 0; |
||||
|
width: calc(100% - 0.86rem); |
||||
|
border-bottom: 1px solid #ebedf0; |
||||
|
content: ""; |
||||
|
transform: scaleY(.5); |
||||
|
} |
||||
|
|
||||
|
.fold-div label { |
||||
|
width: 2.6rem; |
||||
|
padding: 0.27rem 0px 0.27rem 0; |
||||
|
} |
||||
|
|
||||
|
.fold-div .van-text-ellipsis { |
||||
|
padding: 0.27rem 0; |
||||
|
width: calc(100% - 2.6rem); |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
/deep/ .mult-line .van-field__label { |
||||
|
display: inline-block; |
||||
|
position: absolute; |
||||
|
top: 0.15rem; |
||||
|
width: 1.85rem; |
||||
|
line-height: 1.1; |
||||
|
} |
||||
|
|
||||
|
/deep/ .mult-line .van-field__value { |
||||
|
position: relative; |
||||
|
left: 2.65rem; |
||||
|
display: inline-block; |
||||
|
width: calc(90% - 2rem); |
||||
|
} |
||||
|
|
||||
|
/deep/ .van-picker-column__item--selected { |
||||
|
background: #e5eef9; |
||||
|
color: #000; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
/deep/ .van-field .van-field__control { |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
/deep/ .van-field__label--required:before { |
||||
|
margin-left: -0.2rem; |
||||
|
} |
||||
|
/deep/ .van-button { |
||||
|
margin: 5% 3%; |
||||
|
padding: 0; |
||||
|
width: 94%; |
||||
|
height: 1rem; |
||||
|
color: #fff; |
||||
|
font-size: 0.4rem; |
||||
|
border-radius: 1rem; |
||||
|
background: #1367fe; |
||||
|
border: 1px solid #1367fe; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.van-action-bar .van-button:first-child { |
||||
|
background: #fff; |
||||
|
color: #1367fe; |
||||
|
/*width: 40%;*/ |
||||
|
} |
||||
|
|
||||
|
/deep/ .van-action-bar { |
||||
|
box-shadow: 0 0 0.27rem #e5e5e5; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue