laws_weilai/jero-web/src/views/processCenter/components/standardContent.vue

<template>
  <div class="box">
    <div class="box-text">
      <div class="header-text">
        {{title}}
      </div>
      <div v-if="isConfirmationDeadline" class="header-text" style="margin-right: 20px">
        {{this.$t('ConfirmationDeadline')}} : {{this.queryForm.taskAffirmDueDate}}
      </div>
    </div>
    <div class="content-text">
      <div class="text-field" :class="{'text-content-button-one':item.type == 4 ? true :false}"
           v-for="(item,index) in standardContentList" :key="index">
        <span class="text-field-left" :title="item.title">{{item.title}}</span>
        <span class="text-field-right text-field-right-url"
              :title="queryForm[item.value]"
              @click="urlClick(queryForm[item.value])"
              v-if="item.type == 1"
        >{{queryForm[item.value]}}</span>

        <span class="text-field-right text-field-right-url"
              @click="clickButtonToUpload(queryForm[item.value])"
              v-if="item.type == 2 && queryForm[item.value]"
        >{{ $t('viewFile') }}</span>
        <span class="text-field-right"
              :title="queryForm[item.value]" v-else
        >{{queryForm[item.value]}}</span>
      </div>
    </div>
    <viewFileModel ref="viewFileModelRef"/>
  </div>
</template>
<!--
   type:
   1打开新页面
   2显示文件
   3点击事件处理\需要传点击事件
-->
<script>
  import { getAction, postAction, downloadFile, putAction } from '@/api/manage'
  import { Base64 } from 'js-base64'
  import viewFileModel from '@/components/viewFileModel/index'

  export default {
    name: 'standardContent',
    props: {
      //   {title:'',value:'v-model的绑定值'}
      standardContentList: {
        type: Array,
        default: []
      },
      //  需要参数urlFrom，获取数据去显示内容
      url: {
        type: Object,
        default: {}
      },
      standardContentQuery: {
        type: Object,
        default: {}
      },
      title: {
        type: String,
        default: ''
      },
      isConfirmationDeadline: {
        type: Boolean,
        default: false
      }
    },
    components: {
      viewFileModel
    },
    data() {
      return {
        queryForm: {}
      }
    },
    mounted() {
      this.queryForm = this.standardContentQuery
      this.queryForm.taskExplain = 'sdf dsjf;l sdf;ldsf ;lsdfkj d;lsfkds;lfdksf第三方是德国搞定过分乐观看待给对方；公开地方领导反馈给东丽的反馈给管库给的给'
    },
    methods: {
      urlClick(val) {
        if (val) {
          window.open(val)
        }
      },
      clickButtonToUpload(item) {
        this.$refs.viewFileModelRef.clickButtonToUpload(item)
      }
    }
  }
</script>

<style scoped lang="less">
  .box {
    padding: 0 24px 24px 24px;
    box-sizing: border-box;
  }

  .box-text {
    display: flex;
    justify-content: space-between;
    height: 60px;
    line-height: 40px;

    .header-text {
      font-size: 16px;
      font-weight: 400;
      color: #000F16;
    }
  }

  .content-text {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .text-field {
      width: 33%;
      margin-bottom: 8px;

      .text-field-left {
        width: 124px;
        display: inline-block;
        font-size: 14px;
        font-weight: 400;
        color: #6F7385;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin-right: 24px;
      }

      .text-field-right {
        width: calc(100% - 200px);
        display: inline-block;
        font-size: 16px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: #040B29;
        font-weight: 400;
      }

      .text-field-right-url {
        color: #00B3BE !important;
        cursor: pointer;
      }
    }

    .text-content-button-one {
      width: 100%;

      .text-field-left {
        width: 124px;
        display: inline-block;
        font-size: 14px;
        font-weight: 400;
        color: #6F7385;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin-right: 24px;
        float: left;
        margin-top: 3px;
      }

      .text-field-right {
        width: calc(100% - 200px);
        display: inline-block;
        font-size: 16px;
        text-overflow: ellipsis;
        white-space: pre-wrap;
        overflow: visible;
        float: left;
        color: #040B29;
        font-weight: 400;
      }

      .text-field-right-url {
        color: #00B3BE !important;
        cursor: pointer;
      }
    }
  }
</style>