zdxtLawEnforcementCodeView/src/views/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.planYear
                readonly
            />
            <van-field
                label="执法部门"
                v-model=obj.enforcementDepartment
                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>文件名称</label>
            <van-text-ellipsis :content="obj.objList.fileName" @click="toPdfView(obj.objList.fileUrl)" rows="3" autosize />
            <van-icon 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:"",
    planYear:"",
    enforcementDepartment:"",
    createTime:"",
    enforcementArea:"",
    objList:{
        fileName:"",
        fileUrl:""
    } 
});

const data = reactive({});

const queryList = () => {
  detail(route.query?.id, (success) => {
    obj.planName = success.data.planName;
    obj.planYear=success.data.planYear;
    obj.enforcementDepartment=success.data.enforcementDepartment
    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;
    } 
    
  });
};

const toPdfView = (url) => {
        console.log(url)
        if(url!=null){
            router.push(
            {
                path: "/pdfView",
                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-field__right-icon i {
      color: #2b75fd;
    }

    .fold-div {
      position: relative;
      display: flex;
      margin: 0 0.3rem;
      padding-bottom: 0.13rem;
      border-bottom: 1px solid #f5f6f7;
      color: rgb(50, 50, 51);
      font-size: 0.37rem;
    }

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

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

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

</style>