usky-web-mobile/src/pages/business/common/projectMange/record/details.vue

<template>
  <u-navbar :titleStyle="{ color: '#000' }" :autoBack="true" :title="dataList[0]?.createBy + '的日报'" :placeholder="true" :safeAreaInsetTop="true" bgColor="#fff">
    <template #left>
      <view class="u-navbar__content__left__item">
        <u-icon name="arrow-left" size="20" color="#000"></u-icon>
      </view>
    </template>
  </u-navbar>

  <oa-scroll
    customClass="record-details-container scroll-height"
    :style="{
      //#ifdef APP-PLUS || MP-WEIXIN
      height: 'calc(100vh - 88px)',
      //#endif
      //#ifdef H5
      height: 'calc(100vh - 44px)',
      //#endif
    }"
    :refresherLoad="false"
    :refresherEnabled="false"
    :refresherEnabledTitle="false"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <view class="content-area radius bg-white" v-for="(item,index) in dataList" :key="index">
        <view class="content-area-header flex mb10">
          <img :src="item.avatar"  class="content-area-header-avatarImg mr10" v-if="item.avatar"/>
          <u-avatar
            v-if="!item.avatar"
            class="content-area-header-avatar mr10"
            :text="item.createBy.length > 2 ? item.createBy.slice(1, 3) : item.createBy"
            shape="square"
            size="40"
            fontSize="12"
            color="#ffffff"
            :bgColor="proxy.$settingStore.themeColor.color"
          ></u-avatar>
          <view>
            <view class="content-area-header-title font16 mb5">{{ item.createBy ? item.createBy : " " }}</view>
            <view class="content-area-header-time font14">{{ item.submitDate ? item.submitDate.replace("T", " ") : " " }}</view>
          </view>
        </view>

        <view class="content-area-center mb10" v-for="child in item.workContents" :key="child">
          <view class="content-area-center-top flex">
            <view class="content-area-center-top-title mr10" style="color: #559AFF;" @click="toProjectMange(child.projectId)">{{ child.projectName ? child.projectName : " " }}</view>
            <view class="content-area-center-top-time" :style="{ color: proxy.$settingStore.themeColor.color }">{{ child.workTime }}h</view>
          </view>
          <u-text :text="child.workContent" color="#000000" size="14"></u-text>
        </view>
        <view class="content-area-center mb10">
          <view class="content-area-center-top"> 明日计划 </view>
          <u-text :text="item.tomorrowPlan" color="#000000" size="14"></u-text>
        </view>
        <view class="content-area-center mb10">
          <view class="content-area-center-top"> 工作协调 </view>
          <u-text :text="item.coordinateWork" color="#000000" size="14"></u-text>
        </view>
        <view class="content-area-center mb10">
          <view class="content-area-center-top">图片 </view>
            <view class="imageBox" v-if="item.reportImage">
              <image class="image" style="width:50px;margin:5px" mode="widthFix" v-for="(a,index) in JSON.parse(item.reportImage)" :key="index" :src="a.url"  @click="previewImage(index)" />

            </view>
          <!-- <u-text :text='item.ccTo ? proxy.$common.mapping("nickName", "userId", item.ccTo, userData) : "无"' color="#000000" size="14"></u-text> -->
        </view>
        <view class="content-area-center mb10">
          <view class="content-area-center-top">抄送人 </view>
          <u-text :text='item.ccTo ? proxy.$common.mapping("nickName", "userId", item.ccTo, userData) : "无"' color="#000000" size="14"></u-text>
        </view>


      </view>
    </template>

    
  </oa-scroll>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onReady, onHide, onLaunch, onBackPress, onUnload, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { projectApi } from "@/api/business/project.js";
import { dUserList } from "@/api/system/user.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  loading: true,
  dataList: [],//日报列表
  options: {//日报详情参数
    reportId: "",
  },
  userData:[],//用户列表
  images:[],//图片列表
});

const { dataList, userData} = toRefs(state);

function previewImage(index){
  uni.previewImage({
        current: index, // 当前显示图片索引
        urls: state.images // 需要预览的图片http链接列表
      });
}


/**
 * @初始化
 */
function init() {
  dataList.value = [];
  state.loading = true;
  dUserList().then(res=>{
    userData.value = res.data;
    projectApi()
    .ReportRecord({
      reportId: state.options.reportId,
      pageNum: 1,
      pageSize: 1,
    })
    .then((requset) => {
      dataList.value = requset.data.records;
      state.loading = false;
      var imgs = JSON.parse(dataList.value[0].reportImage);
      console.log(dataList.value[0].reportImage)
      imgs.forEach(function(item){
        state.images.push(item.url);
      })
    })
    .catch((err) => {
      state.loading = false;
    });
  })

}
/**
 * 跳转项目概览
 * @param id 项目id
 */
function toProjectMange(id) {
  proxy.$tab.navigateTo(`/pages/business/common/projectMange/overview/index?id=${id}`);
}
onReady(() => {});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});

onLoad((options) => {
  state.options.reportId = options?.reportId;
  init();
});

onUnload(() => {
  projectApi()
    .ReportRecordReadFlag({ reportId: state.options.reportId })
    .then((requset) => {
      uni.$emit("projectMange_record", true); //监听器
    })
    .catch((err) => {
      uni.$emit("projectMange_record", true); //监听器
    });
});
</script>

<style lang="scss" scoped>
.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;
    }
  }
}
</style>