zdxtLawEnforcementCodeView/src/views/administrative/appointment.vue

<template>
	<div class="address_edit">
		<!-- 导航栏 -->
		<div class="header_body">
			<header-nav :slefBack="true" @goBack="goBack" :titelText="`行政检查预约`"></header-nav>
		</div>
		<!-- 中间 -->
		<div>
<!--            <van-cell-group>-->
        <van-form @failed="onFailed" @submit="submit">
<!--            <van-field-->
<!--              v-model="submitData.lawEnforcementCode"-->
<!--              label="登记编号"-->
<!--            />-->
            <van-field
              v-model="submitData.enterpriseName"
              label="企业名称"
              required
              :rules="[{ required: true, message: '必填项' }]"
              readonly
              @click="showPopup"
            />
            <Popup :visible="popupVisible" :content="popupContent" @close="closePopup"  @reciveData="reciveData" />
            <van-field
              v-model="submitData.linkMan"
              label="企业联系人"
            />
            <van-field
              v-model="submitData.linkTel"
              label="联系人电话"
              :rules="[{ validator, message: '请输入正确内容' }]"
            />
            <van-field
              v-model="submitData.checkTime"
              required
              readonly
              label="检查时间"
              :rules="[{ required: true, message: '必填项' }]"
              @click="data.showTimePicker = true"
            />
            <van-field
              v-model="submitData.checkItem"
              required
              label="检查事项"
              :rules="[{ required: true, message: '必填项' }]"
            />
            <van-field
              v-model="submitData.checkRequire"
              required
              label="检查要求"
              :rules="[{ required: true, message: '必填项' }]"
            />
            <van-field
                v-model="submitData.lawEnforcement"
                readonly
                label="执法部门"
                :rules="[{ required: true, message: '必填项' }]"
            />
            <van-field
                v-model="submitData.lawEnforcer"
                readonly
                label="执法人员"
            />
            <van-field
                v-model="submitData.lawEnforcerTwo"
                readonly
                label="执法人员"
            />
            <van-field
              v-model="submitData.remark"
              label="备注"
              rows="2"
              autosize
              type="textarea"
              maxlength="50"
              placeholder="请输入备注"
              show-word-limit
            />

            <div class="warp_body">
                <van-action-bar>
                    <van-button round block color="#be99ff" type="info" native-type="submit">提交</van-button>
                </van-action-bar>
            </div>
        </van-form>
<!--          </van-cell-group>-->
        </div>

<!--        <div class="warp_body">-->
<!--            <van-action-bar>-->
<!--                <van-action-bar-button color="#be99ff" text="保存"  @click="submit" />-->
<!--            </van-action-bar>-->
<!--        </div>-->

        <van-popup v-model:show="data.showLawEnforcerFlag" position="bottom" :style="{ height: '30%' }" />

        <van-popup v-model:show="data.showTimePicker" position="bottom" :style="{ height: '30%' }" >
            <van-date-picker
                    type="time"
                    @confirm="onConfirm"
                    @cancel="data.showTimePicker = false"
            />
        </van-popup>
	</div>
</template>

<script setup name="register">

import { showSuccessToast } from 'vant';
import {addEnterpriseLawEnforcement} from '../../api/administrative'
import {queryUserInfo} from '../../api/enforce'
import { queryEnterpriseInfoList } from '../../api/enterprise'
import { reactive, ref } from "vue";
const { useMy, useCommon, useShopCard } = $globalStore;

const router = useRouter();
let queryaddressId = ref("");
const data = reactive({
    showLawEnforcerFlag:false,
    showTimePicker:false,
});
//保存参数
const submitData = reactive({
    /** 登记编号 */
    lawEnforcementCode:"",
    /** 企业名称 */
    enterpriseName:"",
    /** 企业ID */
    enterpriseId:"",
    /** 企业联系人 */
    linkMan:"",
    /** 联系人电话 */
    linkTel:"",
    /** 检查时间 */
    checkTime:"",
    /** 检查事项 */
    checkItem:"",
    /** 检查要求 */
    checkRequire:"",
    /** 执法部门 */
    lawEnforcement:"",
    /** 执法部门ID */
    lawEnforcementId:"",
    /** 执法人员 */
    lawEnforcer:"",
    /** 执法人员ID */
    lawEnforcerId:"",
    /** 执法人员2 */
    lawEnforcerTwo:"",
    /** 执法人员2ID */
    lawEnforcerIdTwo:"",
    /** 备注 */
    remark:"",
})



const onConfirm = (time) => {
    if(time != null) {
        var times = time.selectedValues;
        submitData.checkTime = times[0] +"-"+ times[1] +"-"+ times[2];
    }
    data.showTimePicker = false;
};

const validator = (val) => /^1[34578]\d{9}$/.test(val);

const onFailed = (errorInfo) => {
    console.log('failed', errorInfo);
};

// 返回
const goBack = () => {
	router.go(-1);
};

const submit = () =>{
  showSuccessToast('登记成功');
  addEnterpriseLawEnforcement(submitData,success =>{
    //跳转企业二维码地址
    if(success.success){
        showSuccessToast('登记成功');
      router.push(
        {
          path: "/appointmentList"
      });
    }
  },error=>{
      console.log("登记失败")
  })
}
//初始化参数，获取扫码的企业统一信用编码
onMounted(() =>{
    //查询当前登录人员信息
    queryUserInfo({},success =>{
      console.log(success.data)
      submitData.lawEnforcer = success.data.userName
      submitData.lawEnforcerId = success.data.userId
      submitData.lawEnforcement = success.data.dept.deptName;
      submitData.lawEnforcementId = success.data.dept.deptId;
    },error=>{
      
    })
})

const reciveData = (item) =>{
    console.log(item);
    submitData.enterpriseName = item.enterpriseName;
    submitData.linkTel = item.enterpriseTel;
    submitData.linkMan = item.legalPerson;
}
</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: #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>