zdxtLawEnforcementCodeView/src/views/enforce/sign.vue

<template>
	<div class="address_edit">
		<!-- 导航栏 -->
		<div class="header_body">
			<header-nav :slefBack="true" @goBack="goBack" :titelText="`执法信息登记`"></header-nav>
		</div>
		<!-- 中间 -->
		<div>
            <van-form @failed="onFailed" @submit="submit">
            <div style="font-size:large">执法信息</div>
            <van-field
              v-model="submitData.lawEnforcement"
              label="执法部门"
              readonly
            />
            <van-field
              v-model="submitData.lawEnforcer"
              label="执法人员1"
              readonly
            />
            <van-field
              v-model="submitData.lawEnforcerTwo"
              label="执法人员2"
              readonly
              placeholder="请选择"
              right-icon="add-o"
              @click="data.showLawEnforcerFlag = true"
            />
            <van-field
              v-model="submitData.subsidiaryer"
              label="辅助人员"
              readonly
              placeholder="请选择"
              right-icon="add-o"
              @click="data.showLawEnforcerFlag = true"
            />
            <van-field
              v-model="submitData.lawEnforcementItem"
              required
              label="执法事项"
              :rules="[{ required: true, message: '必填项' }]"
              placeholder="必填 执法事项"
            />
            <van-field
              v-model="submitData.lawEnforcementBasis"
              required
              label="执法依据"
              :rules="[{ required: true, message: '必填项' }]"
              placeholder="必填 执法依据"
            />
            <van-field
              v-model="submitData.reslut"
              required
              label="执法结果"
              :rules="[{ required: true, message: '必填项' }]"
            >
                <template #input>
                    <div>
                        <van-tag :color="data.good" @click="tapGood">合格</van-tag>
                        <van-tag :color="data.bad" @click="tapBad" style="margin-left: 15px;">不合格</van-tag>
                    </div>
                </template>
            </van-field>
            <van-field
              v-model="submitData.remark"
              label="备注"
              rows="2"
              autosize
              type="textarea"
              maxlength="50"
              placeholder="请输入备注"
              show-word-limit
            />

            <div style="padding-top: 15px;">
                <div style="font-size:medium; padding-left: 15px; display: flex; justify-content: space-between;">
                    <div style="color: rgb(50, 50, 51);">相关附件 <span>(不多于9份)</span></div>
                    <div style="padding-right: 15px; font-size: 20px; color: rgb(150, 151, 153);"><van-icon name="add-o" /></div>
                </div>
                <van-uploader v-model="submitData.fileListObj" accept="" class="file" multiple :max-size="500 * 1024" :after-read="uploadFiles" :before-delete="deleteFile">
                    <template #preview-cover="{ file }">
                        <div class="preview-cover van-ellipsis">{{ file.name }}</div>
                    </template>
                </van-uploader>

            </div>

            <div style="padding-top: 20px;">
                <van-cell-group>
                    <div style="font-size:large">企业信息</div>
                    <van-field
                            v-model="submitData.enterpriseName"
                            required
                            readonly
                            label="企业名称"
                            :rules="[{ required: true, message: '必填项' }]"
                            placeholder="必填 企业名称"
                    />
                    <van-field
                            v-model="submitData.enterpriseNumber"
                            required
                            readonly
                            label="统一信用码"
                            :rules="[{ required: true, message: '必填项' }]"
                            placeholder="必填 纳税人识别号"
                    />
                </van-cell-group>
            </div>

            <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>
        </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%' }" />
	</div>
</template>

<script setup name="register">

import { showSuccessToast } from 'vant';
import {addEnforcementRegistration} from '../../api/enforce'
import { reactive, ref } from "vue";
import {uploadFile} from "../../util/fileUpload";
const { useMy } = $globalStore

const router = useRouter();
//路由参数
const route = useRoute();
let queryaddressId = ref("");
const data = reactive({
    showLawEnforcerFlag:false,
    good:"#7FFFD4",
    bad:"#D3D3D3",
});
//保存参数
const submitData = reactive({
    //执法部门
    lawEnforcement:"",
    //执法人员1
    lawEnforcer:"",
    //执法人员2
    lawEnforcerTwo: "",
    //辅助人员
    subsidiaryer: "",
    //执法事项
    lawEnforcementItem:"",
    //执法依据
    lawEnforcementBasis:"",
    //执法结果
    reslut:0,
    //备注
    remark:"",
    //企业名称
    enterpriseName:"",
    //统一信用码
    enterpriseNumber:"",
    //后台保存图片列表
    fileList:[],
    //vant组件上传照片列表
    fileListObj:[],
})

const tapGood = () => {
    data.good = "#7FFFD4";
    data.bad = "#D3D3D3";
    submitData.reslut = 0;
}
const tapBad = () => {
    data.good = "#D3D3D3";
    data.bad = "#7FFFD4";
    submitData.reslut = 1;
}
//初始化参数，获取扫码的企业统一信用编码
const created = () =>{
    console.log(route?.query?.enterpriseNumber);
},

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



const uploadFiles = (file) =>{
    uploadFile(file,(res) =>{
        console.log(res);
        submitData.fileList.push(res.url)
        console.log(submitData.fileList);
    });

}

const deleteFile = (file,index) =>{
    console.log(index);
    submitData.fileListObj.filter((item, indexs) => {
        if (index.index == indexs) {
            submitData.fileListObj.splice(indexs, 1);//splice 删除
        }
    });
    submitData.fileList.filter((item, indexs) => {
        if (index.index == indexs) {
            submitData.fileList.splice(indexs, 1);//splice 删除
        }
    });
    console.log(submitData.fileList);
    return true;
}

const submit = () =>{
    addEnforcementRegistration(submitData,success =>{
    //重新设置本地存储
    // useCommon.SET_USER_ENTERPRISE_NUMBER(submitData.enterpriseNumber);
    console.log(success)
    //跳转企业二维码地址
    if(success.success){
      console.log("登记成功");
      // router.push(
      //   {
      //     path: "/enterprise/qrCode",
      //     query: {
      //       enterpriseNumber: submitData.enterpriseNumber,
      //       }
      // });
    }
  },error=>{
      console.log("登记失败")
  })
}

</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>