zdxtLawEnforcementCodeView/src/views/enterprise/register.vue

<template>
	<div class="address_edit">
		<!-- 导航栏 -->
		<div class="header_body">
			<header-nav
				:slefBack="true"
				@goBack="goBack"
				:titelText="`企业信息登记`"
			>
			</header-nav>
		</div>
		<!-- 中间 -->
		<div class="warp_body">
			<van-cell-group>
        <van-field
          v-model="submitData.enterpriseName"
          required
          label="名称"
          placeholder="必填 企业名称"
        />
        <van-field
          v-model="submitData.enterpriseNumber"
          required
          label="统一社会信用代码"
          placeholder="必填 统一社会信用代码"
        />
        <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.enterpriseAddress"
          label="注册地址"
          placeholder="选填 注册地址或经营地址"
        />
        <van-field
          v-model="submitData.legalPerson"
          label="法定代表人"
          placeholder="选填 法定代表人姓名"
        />
        <van-field
          v-model="submitData.registeredCapital"
          label="注册资本"
          placeholder="选填 注册资本"
        />
        <van-field
          v-model="submitData.establishmentTime"
          label="成立日期"
          placeholder="选填 成立日期"
          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="选填 营业期限"
          @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.businessScope"
          label="经营范围"
          placeholder="选填 经营范围"
        />
      </van-cell-group>
      <van-action-bar>
        <van-action-bar-button color="#be99ff" text="保存"  @click="submit" />
      </van-action-bar>
		</div>
	</div>
</template>

<script setup name="register">

import { showSuccessToast } from 'vant';
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:ref(['2024', '01']),
  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 selectOperatingTermDate  = () =>{
  data.showOperatingTermPicker = true;
  console.log(data.showOperatingTermPicker)
}
const onDateConfirm = (value)=> {
      console.log(value);
      value.selectedValues.forEach((item,index) => {
        console.log(item);
      });
      submitData.establishmentTime = "2023-04-21 00:00:00"
      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(() => {
	getDict({"dictType": "enterpriseType"},success =>{
    console.log(success);
    success.data.forEach(res =>{
      console.log(res)
      var obj = { text: res.dictLabel, value: res.dictValue };
      data.columns.push(obj)
    })
  },error =>{

  })
});

</script>
<style lang="less" scoped>
.address_edit {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: #f4f4f4;
}
/* 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;
}

</style>