dvcp_v2_wxcp_app/src/pages/documentFlow/components/detail.vue

<template>
  <div class="detail">
    <template v-if="!userSelect">
      <div class="card">
        <header>{{detail.documentName}}</header>
        <u-gap height="16"></u-gap>
        <u-row>
          <span>公文编号：</span>
          <span>{{detail.documentCode}}</span>
        </u-row>
        <u-gap height="8"></u-gap>
        <u-row>
          <span>公文类型：</span>
          <span>{{$dict.getLabel("officialDocumentName",detail.documentType)}}</span>
        </u-row>
        <u-gap height="8"></u-gap>
        <u-row>
          <span>紧急程度：</span>
          <span :style="{color:$dict.getColor('documentEmergencyLevel',detail.emergencyLevel)}">{{$dict.getLabel("documentEmergencyLevel",detail.emergencyLevel)}}</span>
        </u-row>
        <u-gap height="8"></u-gap>
        <u-row>
          <span>发文机关：</span>
          <span>{{detail.issuingUnit}}</span>
        </u-row>
        <u-gap height="8"></u-gap>
        <u-row>
          <span>发文字号：</span>
          <span>{{detail.issuingFont}}</span>
        </u-row>
        <u-gap height="8"></u-gap>
        <u-row>
          <span>签发人：</span>
          <span>{{detail.signer}}</span>
        </u-row>
        <u-gap height="16"></u-gap>
        <img v-if="detail.confidentialityLevel" :src="$cdn + tag(detail.confidentialityLevel)" alt="">
      </div>
      <div class="card" style="margin-bottom: 0;padding-top: 0">
        <div class="label">备注</div>
        <span>{{detail.remark}}</span>
      </div>
      <div class="card" style="padding-top: 0" v-if="detail.files && detail.files.length">
        <div class="label">相关附件</div>
        <div class="file" v-for="(item,index) in detail.files" :key="index" @click="preFile(item)">
          <u-row justify="between">
            <label class="left">
              <img :src="$cdn + 'common/appendix.png'" alt="">
              <span>{{item.fileName}}.{{item.postfix}}</span>
            </label>
            <span>{{(item.size/1024).toFixed(2)}}KB</span>
          </u-row>
        </div>
      </div>
      <div class="card">
        <div class="label" style="96px;">{{detail.readType ==0 ? "流转信息" : "传阅情况"}}
          <em>({{$dict.getLabel("documentStatus",detail.status)}})</em></div>
        <div class="progress">
          <div class="item" v-for="(item,index) in detail.flowUsers" :key="index">
            <div class="avatar">{{item.flowUserName && item.flowUserName.substr(-2)}}</div>
            <div class="right">
              <u-row justify="between">
                <text class="status" :style="{color:item.readStatus==1?'#FF8822':'#1365DD'}">{{$dict.getLabel(detail.readType ==1 ? "readingStatus" :
                  "documentFlowStatus",detail.readType ==0 ? item.flowStatus : item.readStatus)}}
                </text>
                <text class="date">{{item.flowTime}}</text>
              </u-row>
              <u-row justify="between">
                <text class="name">{{item.flowUserName}}</text>
              </u-row>
              <u-row justify="between">
                <text class="note">{{item.description}}</text>
              </u-row>
            </div>
          </div>
        </div>
      </div>

      <div class="footer" v-if="detail.flowRight==1 && detail.readType==0">
        <div @click="handleClick(0)">批示</div>
        <div @click="handleClick(1)">流转</div>
      </div>

      <div class="footer" v-if="detail.readType==1 && detail.flowRight==1" @click="read" style="background-color: #1365DD;color: #FFFFFF">我已阅完</div>

    </template>

    <AiSelectEnterprise :visible.sync="userSelect" v-if="userSelect" :multiple="false"
                        @change="change"></AiSelectEnterprise>

    <AiBack v-if="!userSelect"/>
  </div>
</template>

<script>
  import AiBack from "../../../components/AiBack";
  import AiSelectEnterprise from "../../../components/AiSelectEnterprise";
  import {mapActions} from "vuex";

  export default {
    name: "detail",
    components: {AiBack, AiSelectEnterprise},
    data() {
      return {
        id: null,
        detail: {},
        userSelect: false,
      }
    },

    onLoad(opt) {
      this.$dict.load("officialDocumentName", "documentEmergencyLevel", "documentStatus", "readingStatus", "documentFlowStatus")
      this.id = opt.id
    },

    methods: {
      ...mapActions(['previewFile', 'injectJWeixin']),
      read() {
        this.$http.post("/app/appofficialdocumentinfo/readById", null, {
          params: {
            id: this.id
          }
        }).then(res => {
          if (res.code == 0) {
            this.$u.toast("已阅读")
            this.getDetail()
          }
        })
      },
      preFile(e) {
        if([".jpg",".png",".gif"].includes(e.postfix.toLowerCase())){
          uni.previewImage({
            current: e.url,
            urls: [e.url]
          })
        }else {
          this.previewFile({...e})
        }
      },
      change(e) {
        this.$http.post("/app/appofficialdocumentinfo/flowById", null, {
          params: {
            flowUserId: e[0].id,
            flowUserName: e[0].name,
            id: this.id,
            avatar: e[0].avatar,
            flag: 0
          }
        }).then(res => {
          if (res.code == 0) {
            this.$u.toast("流转成功")
            this.getDetail()
          }
        })
      },

      tag(status) {
        return {
          "0": "common/mm.png",
          "1": "common/jm.png",
          "2": "common/tm.png"
        }[status]
      },
      getDetail() {
        this.$http.post("/app/appofficialdocumentinfo/queryDetailById", null, {
          params: {
            id: this.id,
            flag: 1
          }
        }).then(res => {
          if (res && res.data) {
            this.detail = res.data
          }
        })
      },
      handleClick(status) {
        if (status == 0) {
          uni.navigateTo({
            url: "/pages/documentFlow/components/approval?id=" + this.id
          })
        } else {
          this.userSelect = true
        }
      }
    },
    onShow() {
      this.getDetail()
    }
  }
</script>

<style lang="scss" scoped>
  .detail {
    min-height: 100%;
    background-color: #F5F5F5;
    padding-bottom: 140px;
    position: relative;

    .card {
      background-color: #FFFFFF;
      margin-bottom: 8px;
      box-sizing: border-box;
      padding: 16px 32px;
      position: relative;

      header {
        font-size: 40px;
        font-weight: 600;
        color: #333333;
        line-height: 64px;
        letter-spacing: 1px;
      }

      .u-row {
        & > div {
          background-color: #2266FF;
          border-radius: 50%;
          text-align: center;
          font-size: 22px;
          font-weight: bold;
          color: #FFFFFF;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        & > span:first-child {
          font-size: 30px;
          color: #999999;;
          line-height: 48px;
        }

        & > span:last-child {
          font-size: 30px;
          color: #343D65;
          margin-left: 16px;
          line-height: 48px;
        }
      }

      & > img {
        width: 190px;
        height: 190px;
        position: absolute;
        right: 0;
        top: 74px;
      }

      & > span {
        font-size: 32px;
        color: #333333;
        line-height: 48px;
        letter-spacing: 1px;
        display: inline-block;
      }

      .label {
        height: 80px;
        font-size: 32px;
        color: #333333;
        display: flex;
        align-items: center;
        margin-bottom: 16px;

        & > em {
          font-style: normal;
          font-size: 32px;
          color: #1365DD;
        }
      }

      .file {
        height: 128px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #CCCCCC;
        box-sizing: border-box;
        padding: 0 16px;
        margin-bottom: 32px;

        & > .u-row {
          height: 100%;

          .left {
            width: 500px;
            display: flex;
            align-items: center;

            & > img {
              flex-shrink: 0;
              width: 96px;
              height: 96px;
            }

            & > span {
              font-size: 32px;
              color: #333333;
              display: inline-block;
              line-height: 44px;
              overflow: hidden;
              text-overflow: ellipsis;
              display:-webkit-box;
              -webkit-box-orient:vertical;
              -webkit-line-clamp:2;
            }
          }

          & > span {
            font-size: 28px;
            color: #999999;
          }
        }
      }

      .active {
        background-color: #F3F6F9;
      }

      .progress {
        margin-top: 8px;

        .item {
          display: flex;
          align-items: center;
          position: relative;
          min-height: 136px;
          margin-bottom: 80px;

          .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #2266FF;
            font-size: 28px;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
          }

          .right {
            width: 100%;
            display: flex;
            flex-direction: column;

            & > .u-row {
              margin-left: 40px;

              .status {
                font-size: 32px;
                color: #333333;
              }

              .date {
                font-size: 28px;
                color: #999999;
              }

              .name {
                font-size: 28px;
                color: #666666;
                margin: 8px 0;
              }

              .note {
                font-size: 28px;
                color: #343D65;
              }
            }
          }

          &:after {
            content: "";
            width: 4px;
            height: 100%;
            background-color: #EEEEEE;
            position: absolute;
            left: 40px;
            top: 112px;
          }

          &:last-child:after {
            display: none;
          }
        }
      }
    }

    .footer {
      height: 112px;
      width: 100%;
      position: fixed;
      left: 0;
      bottom: 0;
      background-color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;

      & > div {
        color: #333333;
      }

      & > div:first-child {
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      & > div:last-child {
        width: 50%;
        height: 100%;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #1365DD;
      }

      & > label {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #1365DD;
      }
    }
  }
</style>