usky-web-mobile/src/pages/business/oa/toDo/detail.vue

<template>
  <u-navbar :autoBack="false" :placeholder="true" :safeAreaInsetTop="true" :bgColor="proxy.$settingStore.themeColor.color">
    <template #left>
      <u-icon name="arrow-left" size="20" color="#fff" @click="returnTo('business/oa/toDo/index')"></u-icon>
    </template>
    <template #center>
      <text class="grid-area_center_item_title" style="color: #fff;">详情</text>
    </template>
  </u-navbar>
  <view class="menu-list m0" style="overflow-y:scroll">
    <view class="list-cell" style="color: #666666; line-height: 25px; width: auto; ">
      <view class="content-area-top menu-item">
        <view class="content-area-top-name" >{{ state?.detail?.createBy + '提交的' + state?.detail?.formName }} </view>
      </view>
      <view class="content-area-row_wrap menu-item">
        <img class="typeIcon" src="@/static/images/oa/approval.png" v-if="state.approvalStatus === '1' "/>
        <img class="typeIcon" src="@/static/images/oa/pass.png" v-if="state.approvalStatus === '2' "/>
        <img class="typeIcon" src="@/static/images/oa/refuse.png" v-if="state.approvalStatus === '3' "/>
        <view class="content-area-row_wrap-view gray"> 上海永天科技股份有限公司 </view>
        <view class="content-area-row_wrap-view gray"> 单据编号：{{ state.detail.docNo }} </view>
        <view class="content-area-row_wrap-view" style="display: block">
          <span :style="{ color: proxy.$common.mapping('elTagClass', 'value', state.approvalStatus, form_status) }" >{{ proxy.$common.mapping("label", "value", state.approvalStatus, form_status) }} </span>
        </view>
        <view class="content-area-row_wrap-view gray label">所在部门</view>
        <view class="content-area-row_wrap-view gray black">{{ state.detail.deptName }}</view>
        <view class="content-area-row_wrap-view gray label" v-if="state.detail.duration">{{ state.detail.docNo.split("-")[0] ==  "JBD" ? "加班" : state.detail.docNo.split("-")[0] == "QJD" ? "请假" : ""  }}时长</view>
        <view class="content-area-row_wrap-view gray black" v-if="state.detail.duration">{{ state.detail.duration }}</view>
        <view class="content-area-row_wrap-view gray label" v-if="state.detail.reason">{{ state.detail.docNo.split("-")[0] ==  "JBD" ? "加班" : state.detail.docNo.split("-")[0] == "QJD" ? "请假" : ""    }}原因</view>
        <view class="content-area-row_wrap-view gray black" v-if="state.detail.reason">{{ state.detail.reason }}</view>
      </view>
    </view>
    <view class="list-cell" style="color: #666666; line-height: 25px; width: auto;margin:10px 0 60px 0;">
      <view class="content-area-top">
        <view style="width:100%;">流程</view>
        <view class="stepBar">
          <view class="item">
            <view class="left">
              <image class="icon" src="@/static/images/oa/user.png"></image>
              <image class="status" src="@/static/images/oa/pass2.png"></image>
              <div>
                <view class="title">
                  发起申请
                </view>
                <view class="name">
                  {{ state.detail.createBy }}
                </view>
              </div>
            </view>
            <view class="right">
              {{ state.detail.createTime }}
            </view>
            <view class="line sucess">
            </view>
          </view>
          <view class="item" v-for="(item, index) in nodeList" :key="index">
            <view class="left">
              <image class="icon" src="@/static/images/oa/user.png" v-if="item.nodeType == 1"></image>
              <image class="icon" src="@/static/images/oa/Ccto.png" v-if="item.nodeType == 2"></image>
              <div>
                <view class="title">
                  {{ item.nodeType == 1 ? '审批人' : item.nodeType == 2 ? `抄送${item.appointApprover.indexOf(",") && item.appointApprover.split(",").length>1 ? `(${item.appointApprover.split(",").length}人)` : "人"}` : "" }}
                </view>
                <view class="name" v-if="item.nodeType == 1">
                  {{  proxy.$common.mapping("nickName", "userId", item.appointApprover, state.userData) }}
                </view>
                <view class="name" v-if="item.nodeType == 2 && item.appointApprover.indexOf(',') && item.appointApprover.split(',').length == 1">
                  {{  proxy.$common.mapping("nickName", "userId", item.appointApprover, state.userData) }}
                </view>
                <view class="name" v-if="item.nodeType == 2 && item.appointApprover.indexOf(',') && item.appointApprover.split(',').length > 1">
                  抄送人
                </view>
              </div>
            </view>
            <view class="right">
              <!-- 2021-08-01 10:30:00 -->
            </view>
            <view class="center" v-if="item.nodeType == 2 && item.appointApprover.indexOf(',') && item.appointApprover.split(',').length > 1">
              <view class="content-area-header  mb10 text-center" style="display: inline-block"  v-for="(approver, index2) in item.appointApprover.split(',')" :key="index2">
                <img v-if='proxy.$common.mapping("avatar", "userId", approver, state.userData)' class="content-area-header-avatarImg mlr5" :src='proxy.$common.mapping("avatar", "userId", approver, state.userData)' style="display: block; width: 40px; height: 40px" />
                <u-avatar
                  class="content-area-header-avatar mlr5"
                  :text='proxy.$common.mapping("nickName", "userId", approver, state.userData).length > 2 ? proxy.$common.mapping("nickName", "userId", approver, state.userData).slice(1, 3) : proxy.$common.mapping("nickName", "userId", approver, state.userData)'
                  shape="square"
                  size="40"
                  fontSize="12"
                  color="#ffffff"
                  :bgColor="proxy.$settingStore.themeColor.color"
                ></u-avatar>
                <u-text :text='proxy.$common.mapping("nickName", "userId", approver, state.userData)' color="#000000" size="14" align="center"></u-text>
              </view>
            </view>
            <view class="line gray" v-if="item.nodeType == 1">
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="fixedBottom" v-if="state.approvalStatus == 2 || state.approvalStatus == 3">
      <img src="@/static/images/oa/loading.png" alt="">
      <span>再次提交</span>
    </view>
    <view class="approval" v-if="state.approvalStatus == 1">
      <button class="refuse" @click="handle('refuse',2)">拒绝</button>
      <button class="pass" @click="handle('pass',2)">同意</button>
    </view>
  </view>
</template>
<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject, watchEffect } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { getToDoPageList, approve } from "@/api/oa/todo/index.js";
import { getFormName, getDocumentDetails,getOaFormDefinition } from "@/api/oa/approval/index.js";
import { listDept, UserList } from "@/api/system/user";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const { form_status, workflow_form_subset } = proxy.useDict("form_status","workflow_form_subset");
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  loading: false,
  queryParams:{
    docNo: undefined,
    pageNum:1,
    pageSize:5,
  },
  detail:{},//详情数据
  userData:[],//用户列表
  nodeList:[],//节点列表
  approvalStatus:"",
  id:undefined,
});

const {  queryParams,  detail,formList, userData, nodeList, approvalStatus, id } = toRefs(state);
/**
 * @页面初始化
 */
function init() {
  getDetail();
}
/**
 * 表单审核
 * @param type 
 * @param status 
 */
function handle(type) {
  if(type == "pass" || type == "refuse"){
    approve({id:state.detail.id,approvalStatus:type == "pass"? 2:3}).then(() => {
      proxy.$modal.msgSuccess("操作成功");
      uni.redirectTo({
        url: `/pages/business/oa/toDo/index`
      })
    })
  }
}

/**
 * @列表查询
 * @api接口查询
 */
function getDetail(type) {
  state.loading = true;
  // getFormName().then((res1) => {
  //   state.formList = res1.data;
    getDocumentDetails(state.queryParams)
    .then((requset) => {
        state.detail = requset.data;
        state.detail.id = state.id;
        listDept({id:state.detail.deptId}).then((res2) => {
          state.detail.deptName = res2.data[0].deptName
        })
        UserList({ pageNum: "1", pageSize: "10000" }).then((res3) => {
          state.userData = res3.data.rows;
          console.log(state.userData.length)
          getOaFormDefinition( {formSign:state.queryParams?.docNo?.split("-")[0]}).then((res4)=>{
            if(res4.data.length){
              var info = res4.data[0]
              state.nodeList = JSON.parse(info.flowInfo).node
              state.detail.formName = info.formName
            }
          })
        })
        state.loading = false;
    })
    .catch((err) => {
      state.loading = false;
    });
  // })
}


/**
 * 返回上级页面
 * @param defaultPage 默认页面
 */
function returnTo(defaultPage) {
  if(getCurrentPages().length > 1){
    uni.navigateBack()
  }else{
    uni.redirectTo({
      url: `/pages/${defaultPage}`
    })
  }
}
onShow((options) => {
  
});
onLoad((options) => {
  if(options?.docNo){
    state.queryParams.docNo = options.docNo;
  }
  if(options?.approvalStatus){
    state.approvalStatus = options.approvalStatus;
  }
  if(options?.id){
    state.id = options.id;
  }
  init();
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});
</script>
<style lang="scss" scoped>
:deep(.u-modal__content) {
  font-size: 14px;
  justify-content: left;
}
:deep(.list-container .content-area-top-name) {
  font-size: 16px !important;
}
</style>
<style lang="scss" scoped>
  .content-area {
    &-top {
      font-size: 16px;
      font-weight: 600;
      color: #000000;
      width: 100%;
      &-name {
        font-size: 13px;
        width: 65%;
        text-align: left;
        color: #000;
        white-space: nowrap; /* 确保文本在一行内显示 */
        overflow: hidden; /* 隐藏超出容器的内容 */
        text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
      }
      &-time {
        font-size: 12px;
        text-align: right;
        color: #999;
        float:right;
        width:35%;
      }

      &-status {
        max-width: 30%;
        margin: auto 0 auto auto;
        font-size: 12px;
        color: #ffffff;
        padding: 0 5px;
        border-radius: 20px;
        line-height: 20px;
      }

      &-icon {
        max-width: 30%;
        margin: auto 0 auto auto;
      }
    }

    &-row_wrap {
      font-size: 13px;
      flex-flow: row wrap;

      &-view {
        display: flex;
        min-width: 100%;
        > .iconfont {
          font-size: 14px;
          color: #909399;
          margin-left: 5px;
        }

        &-status {
          margin: auto 0 auto 0;
          font-size: 12px;
          font-weight: 600;
          color: #ffffff;
          padding: 0 5px;
          border-radius: 20px;
          line-height: 20px;
        }
      }
    }
  }

  .gray{
    color:#999;
  }
  .label{
    margin-top:10px;
  }
  .black{
    color:#000;
    margin-top:0px;
  }
  .typeIcon{
    width:55px;
    position: absolute;
    top:25px;
    right:10px;
  }
  .fixedBottom{
    width:100%;
    height:36px;
    line-height: 36px;
    position: fixed;
    bottom: 0;
    left:0;
    background-color: #fff;
    text-align: center;
    color:#000;
    img{
      vertical-align: middle;
      margin-right:10px;
      margin-top:-2px;
    }
    span{
      vertical-align: middle;
    }
  }
  .stepBar{
    margin-top:-20px;
    font-weight: 400;
    .item{
      position: relative;
      margin-top:10%;
      .left,.right{
        display: inline-block;
        width:50%;
      }
      .left{
        position: relative;
        .icon{
          width:40px;
          height:40px;
          vertical-align: middle;
          float: left;
        }
        .status{
          width:16px;
          height:16px;
          position: absolute;
          left:28px;
          bottom:-2px;
        }
        >div{
          width:80%;
          margin-left:50px;
          vertical-align: middle;
          line-height: 20px;
          .title{
            font-size: 14px;
          }
          .name{
            font-size: 12px;
            color: #999;
          }
        }
      }
      .right{
        vertical-align: top;
        font-size: 12px;
        text-align: right;
        color:#909399;
      }
      .line{
        height:40px;
        width:1px;
        position: absolute;
        top:40px;
        left:18px;
      }
      .line.sucess{
        background: #67c23a;
      }
      .line.gray{
        background: #999;
      }
      .center{
        width:100%;
        margin:10px 0 0 40px;
        padding-right:10px;
      }
    }
  }
  .content-area {
    margin: 0;
    padding: 15px 20px;
    overflow: hidden;

    &-header {
      &-avatar {
        margin: auto 0;
      }
      &-avatarImg {
        width: 35px;
        height: 35px;
        border-radius: 4px;
      }

      &-title {
        margin: 0 0 15px 0;
        font-weight: 600;
        color: #000000;
      }
    }

    &-center {
      line-height: 25px;
      &-top {
        color: #000000;
        font-weight: 600;
      }
    }
  }
  .approval{
    position: fixed;
    width:100%;
    bottom: 10px;
    left:0;
    button{
      width:calc(50% - 15px);
      height:50px;
      margin-left:10px;
      display: inline-block;
      border-radius: 16px !important;
      
    }
    button.pass{
      background: #2A98FF;
      color:#fff;
    }
    button.refuse{
      border:1px solid #CFCFCF;
    }
  }
</style>