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 - (44px + ${proxy.$settingStore.StatusBarHeight}))`,
      //#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 ? 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 ? 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="JSON.parse(item.reportImage)&&JSON.parse(item.reportImage).length>0">
            <image class="image m5" style="width: 50px" mode="widthFix" v-for="(a, index) in JSON.parse(item.reportImage)" :key="index" :src="a.url" @click="previewImage(index)" />
          </view>
          <view class="imageBox" v-else>无</view>
        </view>

        <view class="content-area-center mb10">
          <view class="content-area-center-top">附件 </view>
          <view v-if="JSON.parse(item.reportFile)&&JSON.parse(item.reportFile).length>0">
            <uni-link v-for="(file, index) in JSON.parse(item.reportFile)" :key="index" :href="file.url" text="file.url" style="color: rgba(0, 0, 0, 0.7)">{{ file.name }}</uni-link>
          </view>
          <view v-else>无</view>
        </view>
        <view class="content-area-center mb10" style="display: flex; flex-wrap: wrap">
          <u-tabs
            :list="tabsList"
            :current="tabsCurrent"
            @click="tabsClick"
            lineColor="#333"
            :activeStyle="{ color: '#333', fontSize: '14px' }"
            :inactiveStyle="{ color: '#909399', fontSize: '14px' }"
            :scrollable="false"
            style="width: 100%"
          ></u-tabs>
          <view class="content-area-header mt20 mb10 text-center" style="display: inline-block" v-for="(item, index) in reportDetailData.treeSelectNodes" :key="index">
            <img v-if="item.avatar" class="content-area-header-avatarImg mlr5" :src="item.avatar" style="display: block; width: 40px; height: 40px" />
            <u-avatar
              v-if="!item.avatar"
              class="content-area-header-avatar mlr5"
              :text="item.nickName.length > 2 ? item.nickName.slice(1, 3) : item.nickName"
              shape="square"
              size="40"
              fontSize="12"
              color="#ffffff"
              :bgColor="proxy.$settingStore.themeColor.color"
            ></u-avatar>
            <u-text :text="item.nickName" color="#000000" size="14" align="center"></u-text>
          </view>
        </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";
import { deptUserTreeSelect } from "@/api/system/user.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
/*----------------------------------变量声明-----------------------------------*/
const tree = ref({
  value: "tree_root",
  label: "Root",
  children: [],
});
const reportDetailData = ref([]);
const pmReportReaders = ref([]); //已读未读集合
const state = reactive({
  loading: true,
  dataList: [], //日报列表
  options: {
    //日报详情参数
    reportId: "",
  },
  userData: [], //用户列表
  images: [], //图片列表
  files: [], //附件列表
  tabsList: [
    { name: "已读", value: 0 },
    { name: "未读", value: 1 },
  ],
  tabsCurrent: 0,
});

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

/**
 * @tabs点击事件
 */
function tabsClick(e) {
  state.tabsCurrent = e.index;
  reportDetailData.value.treeSelectNodes = proxy.$common.findTreeNodes(tree.value, state.tabsCurrent == 0 ? pmReportReaders.value.readAlready : pmReportReaders.value.readNotAlready);
}
function previewImage(index) {
  uni.previewImage({
    current: index, // 当前显示图片索引
    urls: state.images, // 需要预览的图片http链接列表
  });
}

/**
 * @初始化
 */
function init() {
  dataList.value = [];
  state.loading = true;
  /** 查询树结构用户列表  回显抄送人*/
  deptUserTreeSelect({ pageNum: "1", pageSize: "1000" }).then((res) => {
    tree.value = res.data;
    projectApi()
      .ReportRecord({
        reportId: state.options.reportId,
        pageNum: 1,
        pageSize: 1,
      })
      .then((requset) => {
        dataList.value = requset.data.records;
        state.loading = false;
        pmReportReaders.value = requset.data.records[0].pmReportReaders;
        state.tabsList[0].name=state.tabsList[0].name+'('+pmReportReaders.value.read+')';
        state.tabsList[1].name=state.tabsList[1].name+'('+pmReportReaders.value.unRead+')';
        reportDetailData.value.treeSelectNodes = proxy.$common.findTreeNodes(tree.value, tabsCurrent.value == 0 ? pmReportReaders.value.readAlready : pmReportReaders.value.readNotAlready);
        var imgs = JSON.parse(dataList.value[0].reportImage);
        var files = JSON.parse(dataList.value[0].reportFile);
        imgs.forEach(function (item) {
          state.images.push(item.url);
        });
        files.forEach(function (item) {
          state.files.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>