RuoYi-Vue-Plus/zdxt-web-client/zdxt-enforcement-code-app/fordelete/enforce/enforcementPlanDetailed.vue

<template>
  <div class="address_edit">
    <div class="warp_body">
        <van-cell-group>
<!--            <van-field
                label="计划名称"
                v-model=obj.planName
                readonly
            />-->
          <div class="fold-div">
            <label>计划名称</label>
            <van-text-ellipsis :content="obj.planName" rows="2" autosize expand-text="展开" collapse-text="收起" />
          </div>
            <van-field
                label="执法单位"
                v-model=obj.bureauDeptName
                readonly
            />
            <van-field
                label="发布时间"
                v-model=obj.createTime
                readonly
            />
            <van-field
                label="执法区域"
                v-model=obj.enforcementArea
                readonly
            />
<!--            <van-field
                label="文件名称"
                v-model=obj.objList.fileName
                readonly
                @click="toPdfView(obj.objList.fileUrl)"
                right-icon="eye"
            />-->
          <div class="fold-div">
            <label>附&nbsp; &nbsp; &nbsp; &nbsp;件</label>
            <van-text-ellipsis :content="obj.objList.fileName"  rows="3" autosize />
            <van-icon v-if="obj.iconShow" @click="toPdfView(obj.objList.fileUrl)" name="eye" />
          </div>
        </van-cell-group>
    </div>
  </div>
</template>



<script setup>
import { reactive } from "vue";
import { detail } from "../../api/enforce";

const router = useRouter();
const route = useRoute();

const obj = reactive({
    planName:"",
    bureauDeptName:"",
    createTime:"",
    enforcementArea:"",
    objList:{
        fileName:"",
        fileUrl:""
    },
    iconShow:false
});

const data = reactive({});

const queryList = () => {
  detail(route.query?.id, (success) => {
    obj.planName = success.data.planName;
    obj.bureauDeptName=success.data.bureauDeptName
    obj.createTime=success.data.createTime;
    obj.enforcementArea=success.data.enforcementArea;
    console.log(obj);
     if(success.data.fileObject!=null && success.data.fileObject!="undefined"){
        obj.objList.fileName = success.data.fileObject.fileName;
        obj.objList.fileUrl = success.data.fileObject.fileUrl;
        obj.iconShow=true;
    } 
    
  });
};

const toPdfView = (url) => {
        console.log(url)
        if(url!=null){
            router.push(
            {
                path: "/pdfPngPreview",
                query: {
                    url: url
                }
            });
        }
    }

onMounted(() => {
  queryList();
});
</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: 98%;
      background-color: #ebf3fb;
      overflow-y: auto;
      margin-top: 0.15rem;
    }

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

    /deep/ .van-field__right-icon i {
      color: #2b75fd;
    }

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

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

    .fold-div:last-child .van-text-ellipsis {
      width: calc(100% - 3.2rem);
    }

    .fold-div i {
      position: absolute;
      bottom: 0.3rem;
      right: 0.43rem;
      display: inline-block;
      color: #2b75fd;
      font-size: 0.5rem;
    }

</style>