EnforcementCode-2.0/zdxt-web-client/zdxt-enforcement-code-app/fordelete/views/enterprise/enterpriseInspectionDetail.vue

<template>
	<div class="address_edit">
		<!-- 导航栏 -->
		<!-- <div class="header_body"> -->
			<!--<header-nav :slefBack="true" @goBack="goBack" :titelText="`详情`"></header-nav>-->
		<!-- </div> -->
		<!-- 中间 -->
		<div class="warp_body">
      <span class="joint-tag" v-if="data.bureauDeptNames.length>1"><label>联</label></span>
        <van-form @failed="onFailed" @submit="submit">
          <van-cell-group>

            <van-field
                v-model="submitData.checkTime"
                readonly
                label="执法时间"
            />

<!--            <van-field-->
<!--                v-model="submitData.bureauDeptName"-->
<!--                readonly-->
<!--                label="执法单位"-->
<!--            />-->
<!--              <van-field v-for="(item, index) in data.bureauDeptNames"-->
<!--                      v-model="data.bureauDeptNames[index]"-->
<!--                      readonly-->
<!--                      :label="'执法单位'+(index+1)"-->
<!--              />-->

              <div class="one-label">
                  <van-field
                          label="执法单位"
                          v-model="data.bureauDeptNames[0]"
                          readonly
                  />
                  <van-field class="no-label"
                             v-for="(item, index) in data.bureauDeptNames.slice(1, data.bureauDeptNames.length)" :key="index"
                             v-model="data.bureauDeptNames[index+1]"
                             label=" "
                             readonly
                  />
              </div>
<!--            <van-field
                v-model="submitData.checkItem"
                label="执法事项"
                rows="2"
                readonly
                type="textarea"
                show-word-limit
            />
            <van-field
                v-model="submitData.checkRequire"
                label="执法要求"
                rows="2"
                readonly
                type="textarea"
                show-word-limit
            />-->
          <div class="fold-div">
            <label>执法事项</label>
            <van-text-ellipsis :content="submitData.checkItem" rows="2" autosize expand-text="展开" collapse-text="收起" />
          </div>

          <div class="fold-div">
            <label>执法要求</label>
            <van-text-ellipsis :content="submitData.checkRequire" rows="2" autosize expand-text="展开" collapse-text="收起" />
          </div>

<!--            <van-field-->
<!--              v-model="submitData.enterpriseName"-->
<!--              label="企业名称"-->
<!--              readonly-->
<!--            />-->
<!--            <van-field-->
<!--              v-model="submitData.linkMan"-->
<!--              label="企业联系人"-->
<!--              readonly-->
<!--            />-->
<!--            <van-field-->
<!--              v-model="submitData.linkTel"-->
<!--              label="联系人电话"-->
<!--              :rules="[{ validator, message: '请输入正确内容' }]"-->
<!--              readonly-->
<!--            />-->

            <van-field
                v-if="!data.isEnterprise"
                v-model="submitData.lawEnforcer"
                readonly
                label="执法人员"
            />
            <van-field 
            v-if="!data.isEnterprise"
            v-for="(item, index) in data.lawCer" :key="index"
                       v-model="item.show"
                       label="执法人员"
                       readonly
                       @click="showPopup"
            />
<!--            <van-field-->
<!--              v-model="submitData.remark"-->
<!--              label="备注"-->
<!--              rows="2"-->
<!--              autosize-->
<!--              type="textarea"-->
<!--              readonly-->
<!--            />-->

            <van-action-bar v-if="!data.isEnterprise && submitData.isReg != 1 && submitData.status != 1 && submitData.status != 3">
                <van-button round block type="info" native-type="submit" @click="cancel">取消</van-button>
            </van-action-bar>
    </van-cell-group>
        </van-form>

        </div>

<!--        <div class="warp_body">-->
<!--            <van-action-bar>-->
<!--                <van-action-bar-button 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 {getEnterpriseLawEnforcement, cancelEnterpriseLawEnforcement} from '../../api/enforce/administrative'
import { reactive, ref } from "vue";
import {getDict} from "../../api/Home";
import {queryLinkageById} from "../../api/linkage";
import {formattedTimeYYYYmmdd} from "@/util/util";

const router = useRouter();
const route = useRoute();
let queryaddressId = ref("");
const data = reactive({
    showLawEnforcerFlag:false,
    showTimePicker:false,
    isEnterprise: false,
    lawCer:[{ text:"", id:"" }],
    bureauDeptNames: [],
    bureauDeptIds: [],
});
//保存参数
let submitData = reactive({
    /** 登记编号 */
    lawEnforcementCode:"",
    /** 企业名称 */
    enterpriseName:"",
    /** 企业ID */
    enterpriseId:"",
    /** 企业联系人 */
    linkMan:"",
    /** 联系人电话 */
    linkTel:"",
    /** 执法时间 */
    checkTime:"",
    /** 执法事项 */
    checkItem:"",
    /** 执法要求 */
    checkRequire:"",
    /** 执法单位 */
    lawEnforcement:"",
    /** 执法部门ID */
    lawEnforcementId:"",
    /** 执法人员 */
    lawEnforcer:"",
    /** 执法人员ID */
    lawEnforcerId:"",
    /** 执法人员2 */
    lawEnforcerTwo:"",
    /** 执法人员ID2 */
    lawEnforcerTwoId:"",
    /** 备注 */
    remark:"",
    /** 是否已登记 */
    isReg:1,
    /** 状态 0:正常;1:取消 */
    status:1,
})

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 cancel = () => {
    cancelEnterpriseLawEnforcement(route?.query?.id,success =>{
        router.go(-1);
    });
};

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

//初始化参数，获取扫码的企业统一信用编码
onMounted(() =>{
    data.isEnterprise = route?.query?.isEnterprise
    getEnterpriseLawEnforcement(route?.query?.id,success =>{
    //跳转企业二维码地址
    if(success.success){
        console.log("===> 0 : ", success.data)
        submitData.lawEnforcementCode = success.data.lawEnforcementCode;
        submitData.lawEnforcement = success.data.lawEnforcement;
        submitData.lawEnforcer = success.data.lawEnforcer;
        submitData.lawEnforcerTwo = success.data.lawEnforcerTwo;
        // submitData.checkItem = success.data.checkItem;
        // submitData.checkRequire = success.data.checkRequire;
        submitData.checkItem = success.data.checkItemText;
        submitData.checkRequire = success.data.checkRequireText;
        submitData.enterpriseName = success.data.enterpriseName;
        submitData.linkMan = success.data.linkMan;
        submitData.linkTel = success.data.linkTel;
        submitData.checkTime = formattedTimeYYYYmmdd(success.data.checkTime) +" "+success.data.checkHourStart+"~"+success.data.checkHourEnd
        submitData.remark = success.data.remark;
        submitData.isReg = success.data.isReg;
        submitData.status = success.data.status;
        // submitData.bureauDeptName = success.data.bureauDeptName;
        // submitData.bureauDeptId = success.data.bureauDeptId;
        data.bureauDeptNames = success.data.bureauDeptName.split(',');
        data.bureauDeptIds = success.data.bureauDeptId.split(',');

        // 执法人员
        submitData.lawEnforcerTwoId = success.data.lawEnforcerTwoId;
        submitData.lawEnforcerTwo = success.data.lawEnforcerTwo;
        var lawEnforcer2ShowStr = success.data.lawEnforcer2Show;
        if ((null != submitData.lawEnforcerTwoId && submitData.lawEnforcerTwoId.length > 0)
            && (null != submitData.lawEnforcerTwo && submitData.lawEnforcerTwo.length > 0)) {
            var tmpEnforceId = submitData.lawEnforcerTwoId.split(',');
            var tmpEnforceText = submitData.lawEnforcerTwo.split(',');
            var lawEnforcer2Show = lawEnforcer2ShowStr.split(',');
            data.lawCer = [];
            for (var i = 0; i < tmpEnforceId.length; i++) {
                data.lawCer.push({text: tmpEnforceText[i], id: tmpEnforceId[i], show: lawEnforcer2Show[i]});
            }
        }

        setLinkageItem(submitData.checkItem);
        setLinkageGA(submitData.checkRequire);
    }
  },error=>{
      console.log("登记失败")
  })
})

</script>
<style lang="less" scoped>
.address_edit {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: #ebf3fb;
}
/* 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;
}
.warp_body {
  margin: 0 3%;
  padding-bottom: 3rem;
  width: 94%;
  height: 100%;
  background: #ebf3fb;
  overflow-y: auto;
  margin-top: 0.15rem;
}

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

/deep/ .van-picker-column__item--selected {
  background: #e5eef9;
  color: #000;
  font-weight: 600;
}

/deep/ .van-field .van-field__control {
  color: #666;
}

/deep/ .van-field__label--required:before {
  margin-left: -0.2rem;
}

/deep/ .van-cell-group {
  padding: 0.27rem 0 1rem;
}

.fold-div {
  position: relative;
  display: flex;
  padding: 0 0.43rem 0.13rem;
  width: 100%;
  box-sizing: border-box;
  color: rgb(50, 50, 51);
  font-size: 0.37rem;
}

.fold-div::after {
  position: absolute;
  left: 0.43rem;
  bottom: 0;
  width: calc(100% - 0.86rem);
  border-bottom: 1px solid #ebedf0;
  content: "";
  transform: scaleY(.5);
}

.fold-div label {
  width: 2.6rem;
  padding: 0.27rem 0px 0.27rem 0;
}

.fold-div .van-text-ellipsis {
  padding: 0.27rem 0;
  width: calc(100% - 2.6rem);
  color: #666;
}

.one-label {
  position: relative;
}

.one-label::after {
  position: absolute;
  left: 0.43rem;
  bottom: 0;
  width: calc(100% - 0.86rem);
  border-bottom: 1px solid #ebedf0;
  content: "";
  transform: scaleY(.5);
}

.one-label .van-cell:first-child {
  padding-bottom: 0;
}

.one-label .no-label {
  margin-top: -1px;
  padding-top: 0;
  padding-bottom: 0;
}

.one-label .no-label:last-child {
  padding-bottom: 0.27rem;
}

.joint-tag {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  display: block;
  width: 3rem;
  height: 2rem;
  color: #fff;
}

.joint-tag label {
  position: absolute;
  top: 22%;
  right: 20%;
  z-index: 1;
  font-size: 0.5rem;
}

.joint-tag::before, .joint-tag::after {
  position: absolute;
  z-index: 0;
  top: -0.25rem;
  right: -0.1rem;
  width: 3rem;
  height: 1rem;
  background: #2d94fa;
  content: "";
  transform: rotate(45deg) scale(0.65);
}

.joint-tag::after {
  top: 1rem;
  bottom: 0;
  right: -1.34rem;
  z-index: 0;
  transform: rotate(-135deg) scale(0.65);
}


</style>