zdxtLawEnforcementCodeView/src/views/enterprise/registrationDetail.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>
                    <div style="font-size:large" class="zf-name">执法信息</div>
                    <van-field
                      v-model="submitData.lawEnforcement"
                      label="执法部门"
                      readonly
                    />
                    <van-field
                      v-model="submitData.lawEnforcer"
                      label="执法人员"
                      readonly
                    />
                    <van-field
                      v-model="submitData.lawEnforcerTwo"
                      label="执法人员"
                      readonly
                      placeholder="请选择"
                      right-icon="add-o"
                      @click="showPopup"
                    />
                    <van-field
                      v-model="submitData.subsidiaryer"
                      label="辅助人员"
                      readonly
                      placeholder="请选择"
                      right-icon="add-o"
                      @click="showPopup2"
                    />
                    <van-field
                      v-model="submitData.lawEnforcementItem"
                      required
                      label="执法事项"
                      :rules="[{ required: true, message: '必填项' }]"
                      placeholder="必填 执法事项"
                      readonly
                      type="textarea"
                      rows="1"
                      autosize
                    />
                    <van-field
                      v-model="submitData.lawEnforcementBasis"
                      required
                      label="执法依据"
                      :rules="[{ required: true, message: '必填项' }]"
                      placeholder="必填 执法依据"
                      readonly
                      type="textarea"
                      rows="1"
                      autosize
                    />
                    <van-field
                      v-model="submitData.reslut"
                      required
                      label="执法结果"
                      :rules="[{ required: true, message: '必填项' }]"
                      readonly
                    >
                        <template #input>
                            <div>
                                <van-tag :color="data.good">合格</van-tag>
                                <van-tag :color="data.bad" 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
                      readonly
                    />

                    <van-divider class="divdsty" />

                    <div class="file-upload">
                        <!-- <div class="file-upload-center">
                            <label>上传附件</label> <span>(不多于9张)</span>
                        </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 class="zoom">
                            <img
                            v-for="(item, index) in data.imgstr && data.imgstr.split(',')"
                              class="img"
                              :src="item"
                              alt="预览图片"
                              @click="imagePreview(index)"
                            />
                          </div>
                    </div>
                </van-cell-group>

                <van-divider class="divdsty" />

                <van-cell-group>
                    <div style="padding-top:10px; font-size:large" class="qy-name">企业信息</div>
                    <van-field
                            v-model="submitData.enterpriseName"
                            required
                            label="企业名称"
                            :rules="[{ required: true, message: '必填项' }]"
                            placeholder="必填 企业名称"
                            readonly
                    />
                    <van-field
                            v-model="submitData.enterpriseNumber"
                            required
                            label="统一社会信用代码"
                            :rules="[{ required: true, message: '必填项' }]"
                            placeholder="必填 统一社会信用代码"
                            readonly
                    />
                </van-cell-group>

                <!-- <van-action-bar>
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </van-action-bar> -->
            </van-form>
        </div>
<!-- 
        <Popup :visible="data.popupVisible" :content="data.popupContent" @close="closePopup" @reciveData="reciveData" />
        <Popup :visible="data.popupVisible2" :content="data.popupContent2" @close="closePopup" @reciveData="reciveData2" /> -->
	</div>
</template>

<script setup name="register">

import { showSuccessToast,showImagePreview } from 'vant';
import {queryEnforcementRegistrationById, getAttr} from '../../api/enforce'
import { reactive, ref } from "vue";
import {uploadFile} from "../../util/fileUpload";
import {getDict} from "../../api/Home";
import {queryLinkageById} from "../../api/linkage";
//用户筛选弹窗
// import Popup from './userFilter.vue';

const { useMy } = $globalStore

const router = useRouter();
//路由参数
const route = useRoute();
const data = reactive({
    showLawEnforcerFlag:false,
    currentPage: 1,
    good:"#7FFFD4",
    bad:"#D3D3D3",
    popupVisible: false,
    popupContent: '',
    popupVisible2: false,
    popupContent2: '',
    imgstr: "",
});
//保存参数
const submitData = reactive({
    //执法部门
    lawEnforcement:"",
    lawEnforcementId:"",
    //执法人员1
    lawEnforcer:"",
    lawEnforcerId:"",
    //执法人员2
    lawEnforcerTwo: "",
    lawEnforcerIdTwo: "",
    //辅助人员
    subsidiaryer: "",
    subsidiaryerId: "",
    //执法事项
    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 imagePreview = (index) =>{
    var imgstrArr = data.imgstr.split(",");
  showImagePreview({
    images:imgstrArr,
    startPosition: index,
});
}

const setLinkageItem = (id) => {
    queryLinkageById({"id": id}, success => {
        submitData.lawEnforcementItem = success.title
    },error=>{});
}
const setLinkageGA = (id) => {
    queryLinkageById({"id": id}, success => {
        submitData.lawEnforcementBasis = success.title
    },error=>{});
}

const setAttr = () =>{
    // 查询检查要求字典信息
    getAttr(route?.query?.id, success => {
        if (success.data.filePreview != null) {
            for (var i=0; i<success.data.filePreview.fileList.length; i++) {
                data.imgstr += success.data.filePreview.fileList[i] + ",";
            }
            data.imgstr = data.imgstr.substring(0, data.imgstr.length - 1);
        }
    },error=>{});
}

//3a0096181c184e5aa56f70923680856d$6e74ceda1463c165fd43eeeadce4f7cd
//初始化参数，获取扫码的企业统一信用编码
onMounted(() =>{
    //查询执法登记信息
    queryEnforcementRegistrationById(route?.query?.id,success =>{
        submitData.enterpriseName = success.data.enterpriseName;
        submitData.enterpriseNumber = success.data.enterpriseNumber;
        submitData.lawEnforcement = success.data.lawEnforcement;
        submitData.lawEnforcerTwo = success.data.lawEnforcerTwo;
        submitData.subsidiaryer = success.data.subsidiaryer;
        submitData.lawEnforcementId = success.data.lawEnforcementId;
        submitData.lawEnforcementItem = success.data.lawEnforcementItem;
        submitData.lawEnforcementBasis = success.data.lawEnforcementBasis;
        submitData.lawEnforcerIdTwo = success.data.lawEnforcerIdTwo;
        submitData.lawEnforcer = success.data.lawEnforcer;
        submitData.remark = success.data.remark;
        if(success.data.reslut == 0){
          data.good = "#7FFFD4";
          data.bad = "#D3D3D3";
        }else{
          data.good = "#D3D3D3";
          data.bad = "#7FFFD4";
        }

        setLinkageItem(submitData.lawEnforcementItem);
        setLinkageGA(submitData.lawEnforcementBasis);
    },error=>{

    })

    setAttr();
})

// 返回
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 =>{
    //跳转首页
    if(success.success){
        showSuccessToast('登记成功');
        router.push({ path: "/home" });
    }
  },error=>{
      console.log("登记失败")
  })
}

const showPopup = () =>{
    data.popupVisible = true;
}
const showPopup2 = () =>{
    data.popupVisible2 = true;
}
const closePopup = () =>{
    data.popupVisible = false;
    data.popupVisible2 = false;
}
const reciveData = (item) =>{
    submitData.lawEnforcerTwo = item.userName;
    submitData.lawEnforcerIdTwo = item.userId;
}
const reciveData2 = (item) =>{
    submitData.subsidiaryer = item.userName;
    submitData.subsidiaryerId = item.userId;
}

</script>

<style lang="less" scoped>
.address_edit {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: #ebf3fb;
}

.warp_body {
    margin: 0 3%;
    padding-bottom: 3rem;
    width: 94%;
    height: 100%;
    //border-radius: 0.25rem;
    background-image: linear-gradient(to bottom, #ebf3fb, #fff);
    overflow-y: auto;
}

.qy-name{
    font-size: large;
    margin-left: 5%;
    height: 34px;
    margin-top: 0%;
    font-weight: 600;
}
.zf-name{
    font-size: 15px;
    height: 33px;
    background-color: white;
    padding-left: 4%;
    padding-top: 2%;
    font-weight: 600;
}

/* 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;
}

.divdsty {
    margin: auto;
    width: 100%;
    height: 0.25rem;
    background-color: #f4f4f4;
    border: 0;
}
.file-upload{
    min-height: 4.5rem;
    position: relative;
}
.file-upload-center{
    position: absolute;
    height: 20%;
    top: 10%;
    left: 2%;
    font-size: 0.38rem;
    span {
        font-size: 0.32rem;
        color: rgb(221, 229, 227);
    }
}
.file{
    position: absolute;
    bottom: 10%;
    left: 2%;
}

.preview-cover {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    color: #fff;
    font-size: 0.32rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
}
.zoom{
    padding-top: 10px;
    padding-left: 10px;
    img{
      width: 2rem;
      height: 2rem;
      padding-right: 10px
    }
}
</style>