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>-->
    <span class="tohome" @click="toEnforceHomeView"><i class="van-badge__wrapper van-icon van-icon-wap-home-o"></i></span>
		<!-- 中间 -->
		<div class="warp_body">
            <van-form @failed="onFailed" ref="form">
                <van-cell-group>
                    <div class="zf-name">执法信息</div>
                    <van-field
                      v-model="submitData.lawEnforcement"
                      label="执法部门"
                      readonly
                      required
                      :rules="[{ required: true, message: '请加载执法部门' }]"
                    />
                    <van-field
                      v-model="submitData.lawCertificateNumText"
                      label="执法人员"
                      readonly
                      required
                      :rules="[{ required: true, message: '请加载执法人员' }]"
                    />
                    <van-field
                      v-model="submitData.lawCertificateNumTwoText"
                      label="执法人员"
                      readonly
                      required
                      placeholder="请选择"
                      right-icon="add-o"
                      @click="showPopup"
                      :rules="[{ required: true, message: '请选择执法人员' }]"
                    />
                    <van-field
                      v-model="submitData.subsidiaryerText"
                      label="辅助人员"
                      readonly
                      required
                      placeholder="请选择"
                      right-icon="add-o"
                      @click="showPopup2"
                      :rules="[{ required: true, message: '请选择辅助人员' }]"
                    />
                    <view v-if="data.isNoScan == 'true'">
                    <van-field
                      v-model="submitData.enforce"
                      label="未扫码原因"
                      readonly
                      placeholder="请选择"
                    />
                    </view>
                    <van-field
                        v-model="submitData.enforcementTime"
                        label="检查时间"
                        readonly
                        placeholder="请选择"
                    />
                    <van-field
                      v-model="data.lawEnforcementItemText"
                      required
                      readonly
                      label="检查事项"
                      :rules="[{ required: true, message: '必填项' }]"
                      placeholder="必填 执法事项"
                      @click="data.showItem = true"
                      type="textarea"
                      rows="1"
                      autosize
                    />
                    <van-field v-model="submitData.lawEnforcementItem" v-show="false" />
                    <van-field
                      v-model="data.lawEnforcementBasisText"
                      required
                      readonly
                      :rules="[{ required: true, message: '必填项' }]"
                      label="检查依据"
                      placeholder="必填 执法依据"
                      @click="showPopupqz"
                      type="textarea"
                      rows="1"
                      autosize
                    />
                    <van-field v-model="submitData.lawEnforcementBasis" v-show="false" />
                    <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: 0.4rem;">不合格</van-tag>
                            </div>
                        </template>
                    </van-field>
                    <van-field
                      v-model="submitData.remark"
                      label="备注"
                      rows="2"
                      autosize
                      type="textarea"
                      maxlength="50"
                      placeholder="请输入备注"
                      show-word-limit
                    />

                    <van-field
                            v-model="submitData.lawText"
                            label="检查项"
                            maxlength="50"
                            placeholder="请选择"
                            readonly
                            required
                            :rules="[{ required: true, message: '必填项' }]"
                            @click="data.lawChecked=true"
                    />

                    <van-divider class="divdsty" />

                    <div class="file-upload">
                        <div class="file-upload-center">
                            <label>上传附件</label> <span>(不多于9张)</span>
                        </div>
                        <!-- :after-read="uploadFiles" -->
                        <van-uploader v-model="submitData.fileListObj" class="file" multiple max-count="9" :after-read="uploadFiles" :before-delete="deleteFile">
                            <template #preview-cover="{ file }">
                                <div class="preview-cover van-ellipsis">{{ file.name }}</div>
                            </template>
                        </van-uploader>
                    </div>
                </van-cell-group>

                <van-divider class="divdsty" />

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

                <van-action-bar>
<!--                  <van-button round block type="info" native-type="submit" @click="tmpSave">保存</van-button>-->
                  <van-button round block type="info" native-type="submit" @click="submit(1)">提交</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" />


        <van-popup v-model:show="data.showItem" position="bottom" :style="{ height: '30%' }">
            <van-picker title="事项"
                        :columns="data.item_columns"
                        @confirm="itemConfirm"
                        @change="itemChange"
                        @cancel="gaCancel"
            />
        </van-popup>
        <Popupzq :visible="data.popupVisibleqz" :content="data.popupContentqz" @close="closePopup" @reciveData="reciveDataqz" />
<!--        <van-popup v-model:show="data.showGA" position="bottom" :style="{ height: '30%' }">-->
<!--            <van-picker title="依据"-->
<!--                        :columns="data.ga_columns"-->
<!--                        @confirm="gaConfirm"-->
<!--                        @cancel="gaCancel"-->
<!--            />-->
<!--        </van-popup>-->

        <LawPopup :lawEnforcementId="submitData.lawEnforcementId" :enterpriseNumber="submitData.enterpriseNumber" :visible="data.lawChecked" :content="data.lawContent" @close="closePopup"
                   @reciveData="reciveLaw"/>
	</div>
</template>

<script setup name="register">

import { showSuccessToast } from 'vant';
import 'vant/es/toast/style';
import {addEnforcementRegistration, editEnforcementRegistration, getRegByUserIdAndZero, queryUserInfo} from '../../api/enforce'
import {getEnterpriseInformation} from '../../api/enterprise'
import { reactive, ref } from "vue";
import {uploadFile} from "../../util/fileUpload";
import {formattedTime} from "@/util/util";
import Compressor from 'compressorjs'
//用户筛选弹窗
import Popup from './userFilter.vue';
import LawPopup from './lawFilter.vue';
import PopupA from './assistUserFilter.vue';
import Popupzq from './zqyjjdmFilter.vue';
import {getDict} from "../../api/Home";
import { queryLinkage, queryLinkageDictByValueAndParentId } from "../../api/linkage";
import {addEnterpriseLawEnforcement, getByUserIdAndZero} from "../../api/administrative";

const { useCommon,useMy } = $globalStore

const router = useRouter();
//路由参数
const route = useRoute();
const form = ref(null);
let queryaddressId = ref("");
const data = reactive({
    showLawEnforcerFlag:false,
    currentPage: 1,
    good:"",
    bad:"",
    popupVisible: false,
    popupContent: '',
    popupVisible2: false,
    popupVisibleqz: false,
    popupContent2: '',
    popupContentqz: '',
    showGA:false,
    showItem:false,
    lawEnforcementBasisText:"",
    lawEnforcementItemText: "",
    ga_columns: [],
    item_columns: [],
    isNoScan: false,
    lawChecked: false,
    lawContent: "",
});
var fileSize = 0;
//保存参数
const submitData = reactive({
    // id
    id:"",
    //执法部门
    lawEnforcement:"",
    lawEnforcementId:"",
    //执法人员1
    lawEnforcer:"",
    lawEnforcerId:"",
    lawCertificateNumText:"",
  
    //执法人员2
    lawEnforcerTwo: "",
    lawEnforcerIdTwo: "",
    lawCertificateNumTwoText: "",
    //辅助人员
    subsidiaryer: "",
    subsidiaryerId: "",
    subsidiaryerText: "",
    //执法事项
    lawEnforcementItem:"",
    //执法依据
    lawEnforcementBasis:"",
    //执法结果
    reslut:0,
    //备注
    remark:"",
    //企业名称
    enterpriseName:"",
    //统一信用码
    enterpriseNumber:"",
    //执法时间
    enforcementTime:formattedTime(new Date()),
    //后台保存图片列表
    fileList:[],
    //vant组件上传照片列表
    fileListObj:[],
    // 数据保存或提交 0 保存 1提交
    isSubmit: 0,
    lawId: "",
    lawText: "",
    uniteCheck: "",
})

const tapGood = () => {
    data.good = "#13c11a";
    data.bad = "#D3D3D3";
    submitData.reslut = 0;
}
const tapBad = () => {
    data.good = "#D3D3D3";
    data.bad = "#ff0000";
    submitData.reslut = 1;
}

const getLinkageByValueAndParentId = (value, parentId) => {
    // 查询检查要求字典信息
    queryLinkageDictByValueAndParentId({"value":value, "parentId": parentId}, success => {
        getLinkageByParentIdToItem(success.id)
    },error=>{});
}

const getLinkageByParentIdToItem = (parentId) => {
    // 查询检查要求字典信息
    queryLinkage({"parentId": parentId}, success => {
        for(var i=0; i<success.length; i++) {
            data.item_columns.push({ text: success[i].title, value: success[i].id, id: success[i].id })
            // if (i==0) {
            //     data.lawEnforcementItemText = success[i].title;
            //     submitData.lawEnforcementItem = success[i].id;
            //     getLinkageByParentIdToGA(success[i].id);
            // }
        }
    },error=>{});
}

const getLinkageByParentIdToGA = (parentId) => {
    // 查询检查要求字典信息
    data.ga_columns = [];
    queryLinkage({"parentId": parentId}, success => {
        for(var i=0; i<success.length; i++) {
            data.ga_columns.push({ text: success[i].title, value: success[i].id, id: success[i].id })
            // if (i==0) {
            //     data.lawEnforcementBasisText = success[i].title;
            //     submitData.lawEnforcementBasis = success[i].id;
            // }
        }
    },error=>{});
}

//3a0096181c184e5aa56f70923680856d$6e74ceda1463c165fd43eeeadce4f7cd
//初始化参数，获取扫码的企业统一信用编码
onMounted(() =>{
    // 数据填充
    // dataFillIn();
    submitData.enforce = route?.query?.reason;
    data.isNoScan = route?.query?.isNoScan;
    submitData.enterpriseNumber = route?.query?.enterpriseNumber;
    console.log(data.isNoScan)

    //查询企业信息
    getEnterpriseInformation(route?.query?.enterpriseNumber,success =>{
      if (null != success.data) {
          submitData.enterpriseName = success.data.enterpriseName
          submitData.enterpriseNumber = success.data.enterpriseNumber
      }
    },error=>{

    })
    //查询执法部门信息
    queryUserInfo(useCommon.userId,success =>{
        if (null != success.data) {
            submitData.lawEnforcer = success.data.userName
            // submitData.lawCertificateNumText = success.data.userName + " " + success.data.lawCertificateNum
            submitData.lawCertificateNumText = success.data.userName
            submitData.lawEnforcerId = success.data.userId
            submitData.lawEnforcement = success.data.dept.deptName;
            submitData.lawEnforcementId = success.data.dept.deptId;
        }
    },error=>{

    })

    getLinkageByValueAndParentId("law_item", "100");
    //初始化时间
    submitData.enforcementTime = formattedTime(new Date());
})

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

// 返回首页
const toEnforceHomeView = () =>{
  router.push({
    path: "/enforceHome",
  });
};

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

}

const deleteFile = (file,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 删除
        }
    });
    return true;
}

/* 检查要求 start */
const gaConfirm = ({ selectedOptions }) => {
    // data.lawEnforcementBasisText = selectedOptions[0].text;
    submitData.lawEnforcementBasis = selectedOptions[0].value;
    data.showGA = false;
    data.showItem = false;
};

/* 检查要求 start */
const itemConfirm = ({ selectedOptions }) => {
    data.lawEnforcementItemText = selectedOptions[0].text;
    submitData.lawEnforcementItem = selectedOptions[0].value;
    data.showGA = false;
    data.showItem = false;

    getLinkageByParentIdToGA(selectedOptions[0].id);
};
const itemChange =({ selectedOptions }) => {
    // getLinkageByParentIdToGA(selectedOptions[0].id);
}
const gaCancel = () => {
    data.showGA = false;
    data.showItem = false;
}
/* 检查要求 end */

const dataFillIn = () => {
    getRegByUserIdAndZero(useCommon.userId,success =>{
        //跳转企业二维码地址
        if(success.success){
            Object.keys(submitData).forEach((item) => {
                if ("lawEnforcement"!=item && "lawCertificateNumText"!=item && "enforcementTime"!=item) {
                    submitData[item] = success.data[item] ? success.data[item] : "";
                }
            })
            data.lawEnforcementItemText =success.data['params'].lawEnforcementItemText;
            // data.lawEnforcementBasisText =success.data['params'].lawEnforcementBasisText;
            // submitData.lawCertificateNumText =success.data['lawEnforcer'];
            submitData.lawCertificateNumTwoText =success.data['lawEnforcerTwo'];
            submitData.subsidiaryerText =success.data['subsidiaryer'];
            if(success.data['reslut']==0) {
                tapGood();
            } else {
                tapBad();
            }
            submitData.fileList = [];
            submitData.fileListObj = [];
            showSuccessToast('保存成功');
        }
    },error=>{
        console.log("保存失败")
    })
}

const tmpSave = () => {
    showSuccessToast('临时保存');
    submitData.userId = useCommon.userId;
    addEnforcementRegistration(submitData,success =>{
        //跳转企业二维码地址
        if(success.success){
            showSuccessToast('保存成功');
            router.push({ path: "/enforceHome" });
        }
    },error=>{
        console.log("保存失败")
    })
}

const submit = (type) =>{
    submitData.isSubmit = type;
    submitData.userId = useCommon.userId;
    form.value.validate().then(() => {
        editEnforcementRegistration(submitData, success => {
            //跳转首页
            if (success.success) {
                showSuccessToast('登记成功');
                router.push({path: "/enforceHome"});
            }
        }, error => {
            console.log("登记失败")
        })
    });
}

const showPopup = () =>{
    data.popupVisible = true;
}
const showPopup2 = () =>{
    data.popupVisible2 = true;
}
const showPopupqz = () =>{
    data.popupVisibleqz = true;
}
const closePopup = () =>{
    data.popupVisible = false;
    data.popupVisible2 = false;
    data.popupVisibleqz = false;
    data.lawChecked = false;
}
const reciveData = (item) =>{
    submitData.lawEnforcerTwo = item.userName;
    // submitData.lawCertificateNumTwoText = item.userName + " " + item.lawCertificateNum
    submitData.lawCertificateNumTwoText = item.userName;
    submitData.lawEnforcerIdTwo = item.userId;
}
const reciveData2 = (item) =>{
    submitData.subsidiaryer = item.userName;
    submitData.subsidiaryerId = item.userId;
    // submitData.subsidiaryerText = item.userName + " " + item.lawCertificateNum;
    submitData.subsidiaryerText = item.userName;
}
const reciveDataqz = (item) =>{
    console.log(item);
    submitData.lawEnforcementBasis = item.id;
    // submitData.subsidiaryerText = item.userName + " " + item.lawCertificateNum;
    data.lawEnforcementBasisText = item.lawName;
}
const reciveLaw = (item) => {
    submitData.lawId = item.id;
    submitData.lawText = item.checkItem;
    submitData.uniteCheck = item.uniteCheck;
}

const beforeRead = (file) =>{
      if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/jpg') {
        // Toast('请上传图片格式');
        return false;
      }
      // if(file.size<1024*1024*2){
      //   console.log('图片大小1',file.size)
      //   // Toast('请上传2M以上图片');
      //   return false;
      // }
      if(file.size>1024*1024*1.3){
        console.log('图片大小2',file.size)
        // Toast('请上传20M以下图片');
        let that = this
        console.log('aaaaaaaaaaaaaaaaaaaaaaa',file)
        return new Promise((resolve) => {
          // compressorjs 默认开启 checkOrientation 选项
          // 会将图片修正为正确方向
          new Compressor(file, {
            quality: 0.1,
            success(result){
              let file1 = new File([result], file.name, { type: file.type })
              console.log("File对象", file1);
              console.log("File对象", file1.size);
              // uploadFile(file1)
              uploadFile(file1,(res) =>{
                  submitData.fileList.push(res.url)
              });
              resolve(result);
            },
            error(err) {
              console.log(err.message);
            },
          });
        });
      }
      console.log('图片大小3',file.size)
      // uploadFile(file)
      uploadFile(file,(res) =>{
        submitData.fileList.push(res.url)
      });
      return true;
    }
</script>

<style lang="less" scoped>
.tohome {
  position: absolute;
  top: 1.25%;
  right: 5%;
  font-size: 0.5rem;
}
.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;
    margin-top: 0.15rem;
}

.qy-name, .zf-name {
  margin: 0 0.27rem;
  font-size: 0.42rem;
  height: 1.2rem;
  background-color: white;
  font-weight: 600;
  line-height: 3.5;
}

/* 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 {
    position: relative;
    min-height: 4.2rem;
    padding: 0.27rem 0.43rem;
    box-sizing: border-box;
}
.file-upload-center {
    position: absolute;
    height: 20%;
    top: 10%;
    left: 0.43rem;
    font-size: 0.38rem;
    span {
        font-size: 0.32rem;
        color: rgb(221, 229, 227);
    }
}
.file {
    position: absolute;
    bottom: 10%;
    left: 0.43rem;
    width: calc(100% - 0.86rem);
}

.preview-cover {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 0.13rem;
    color: #fff;
    font-size: 0.32rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
}

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

/deep/ .van-action-bar {
  box-shadow: 0 0 0.27rem #e5e5e5;
}

</style>