zdxtLawEnforcementCodeView/src/views/enterprise/registrationEdit.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">
                <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.lawCertificateNumText"
                      label="执法人员"
                      readonly
                    />
                    <van-field
                      v-model="submitData.lawCertificateNumTwoText"
                      label="执法人员"
                      readonly
                      placeholder="请选择"
                      right-icon="add-o"
                      @click="showPopup"
                    />
                    <van-field
                      v-model="submitData.subsidiaryerText"
                      label="辅助人员"
                      readonly
                      placeholder="请选择"
                      right-icon="add-o"
                      @click="showPopup2"
                    />
                    <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
                      label="执法依据"
                      :rules="[{ required: true, message: '必填项' }]"
                      placeholder="必填 执法依据"
                      @click="data.showGA = true"
                      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: 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
                    />

                    <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>
                </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="必填 企业名称"
                    />
                    <van-field
                            v-model="submitData.enterpriseNumber"
                            required
                            label="统一社会信用代码"
                            :rules="[{ required: true, message: '必填项' }]"
                            placeholder="必填 统一社会信用代码"
                    />
                </van-cell-group>

                <van-action-bar>
                  <van-button v-if="submitData.isSubmit != 0 " round block type="info" native-type="submit" @click="submit(0)">保存</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>
        <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>
	</div>
</template>

<script setup name="register">

import { showSuccessToast } from 'vant';
import {addEnforcementRegistration,queryRegistrationById} from '@/api/enforce'
import { reactive, ref } from "vue";
import {uploadFile} from "@/util/fileUpload";
import {formattedTime} from "@/util/util";
//用户筛选弹窗
import Popup from '@/views/enforce/userFilter';
import { queryLinkage, queryLinkageDictByValueAndParentId } from "@/api/linkage";

const { useMy } = $globalStore

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

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(() =>{
    //查询企业信息
    queryRegistrationById(route?.query?.id,success =>{
      if (null != success.data) {
          console.log(success.data)
          submitData.lawEnforcement = success.data.lawEnforcement;
          submitData.lawEnforcementId = success.data.lawEnforcementId;
          submitData.lawEnforcementBasis = success.data.lawEnforcementBasis;
          data.lawEnforcementBasisText = success.data.lawEnforcementBasisText;
          submitData.lawEnforcementItem = success.data.lawEnforcementItem;
          data.lawEnforcementItemText = success.data.lawEnforcementItemText;
          submitData.lawCertificateNumText = success.data.lawEnforcer;
          submitData.lawEnforcerId = success.data.lawEnforcerId;
          submitData.lawCertificateNumTwoText = success.data.lawEnforcerTwo;
          submitData.lawEnforcerIdTwo = success.data.lawEnforcerId;
          submitData.subsidiaryer = success.data.subsidiaryer;
          submitData.subsidiaryerId = success.data.subsidiaryerId;
          submitData.reslut = success.data.reslut;
          submitData.isSubmit = success.data.isSubmit;
          if(submitData.reslut == 0){
            data.good = "#13c11a";
            data.bad = "#D3D3D3";
          }else{
            data.good = "#D3D3D3";
            data.bad = "#13c11a";
          }
      }
    },error=>{})

    //初始化时间
    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 submit = (type) =>{
  submitData.isSubmit = type;
    addEnforcementRegistration(submitData,success =>{
    //跳转首页
    if(success.success){
        showSuccessToast('登记成功');
        router.push({ path: "/enforceHome" });
    }
  },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.lawCertificateNumTwoText = item.userName + " " + item.lawCertificateNum
    submitData.lawEnforcerIdTwo = item.userId;
}
const reciveData2 = (item) =>{
    submitData.subsidiaryer = item.userName;
    submitData.subsidiaryerId = item.userId;
    submitData.subsidiaryerText = item.userName + " " + item.lawCertificateNum;
}

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

.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);
}

/deep/ .van-button {
  margin: 5% 3%;
  padding: 0;
  width: 94%;
  height: 1rem;
  color: #fff;
  font-size: 0.4rem;
  border-radius: 1rem;
  background: #1367fe;
  border: 0.02667rem solid #1367fe;
  text-align: center;
}

</style>