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-form @failed="onFailed" @submit="submit">
			<van-cell-group>
        <van-field
            v-model="submitData.enterpriseName"
            label="企业名称"
            required
            placeholder="必填 企业名称"
            is-link
            :rules="[{ required: true, message: '必填项' }]"
            readonly
            @click="showPopup"
          />
          <Popup :visible="popupVisible" :content="popupContent" @close="closePopup"  @reciveData="reciveData" />
        <van-field class="mult-line"
          v-model="submitData.enterpriseNumber"
          required
          readonly
          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>
        <div class="fold-div">
          <label>注册地址</label>
  <!--        <van-field
              v-model="submitData.enterpriseAddress"
              label=" "
              placeholder="选填 注册地址"
              style="margin: -1.15rem 0 -1px 0;background: transparent;"
          />-->
          <van-text-ellipsis :content="submitData.enterpriseAddress" rows="2" autosize expand-text="展开" collapse-text="收起" />
        </div>
        <van-field
          v-model="submitData.legalPerson"
          label="法定代表人"
          placeholder="选填 法定代表人姓名"
          readonly
        />
        <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.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>
		</div>
	</div>
</template>

<script setup name="register">

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 = 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 {
  display: flex;
  margin: 0 0.3rem;
  padding-bottom: 0.13rem;
  border-bottom: 1px solid #f6f7f8;
  color: rgb(50, 50, 51);
  font-size: 0.37rem;
}

.fold-div label {
  width: 2.6rem;
  padding: 0.27rem 0px 0.27rem 0.15rem;
}

.fold-div .van-text-ellipsis {
  padding: 0.24rem 0;
  width: calc(100% - 2.7rem);
  color: #666;
}

/deep/ .mult-line .van-field__label {
  padding-right: 0.3rem;
  width: 2.3rem;
  line-height: 1.25;
}

/deep/ .van-field__control:read-only {
  cursor: default;
  color: #666;
}

</style>