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

<template>
  <u-sticky class="shadow-default" bgColor="#fff" style="top: 0">
    <u-navbar :titleStyle="{ color: '#000' }" :autoBack="true" title="定时日志" :placeholder="true" :safeAreaInsetTop="true" bgColor="#fff">
     
    </u-navbar>
   
  </u-sticky>

  <oa-scroll
    customClass="record-container scroll-height"
    :pageSize="pageSize"
    :total="total"
    :isSticky="true"
    :customStyle="{
      //#ifdef APP-PLUS || MP-WEIXIN
      height: 'calc(100vh - 40px)',
      //#endif
      //#ifdef H5
      height: 'calc(100vh - 40px)',
      //#endif
    }"
    :refresherLoad="true"
    :refresherEnabled="true"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :lowerThreshold="44"
    :refresherBackground="'#f5f6f7'"
    @load="load"
    @refresh="refresh"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>

      <u-loading-page :loading="state.loading" fontSize="16" style="z-index: 99"></u-loading-page>
      <view class="content-area" v-for="(group, date) in proxy.$common.groupedItems(state.timedList, 'submitDate')" :key="date">
        <view class="content-area-time font14">{{ proxy.$time.jktTimes(date, "否") }}</view>
        <view class="content-area-center bg-white" v-for="(el, ind) in group" :key="ind">
          <view class="content-area-top menu-item" style="float:right;padding:10px 0px">
            <view class="content-area-top-time"> </view>
            <u-icon  class="content-area-top-icon" name="more-dot-fill" size="20" color="#000" @click="moreClick(el)"></u-icon>
          </view>
          <view class="flex mb10" @click="goContentDetails(el)">
            <u-avatar
              class="content-area-center-avatar mr10"
              :text="el.createBy.length > 2 ? el.createBy.slice(1, 3) : el.createBy"
              shape="square"
              size="35"
              fontSize="10"
              color="#ffffff"
              :bgColor="proxy.$settingStore.themeColor.color"
            ></u-avatar>
            <view>
              <view class="content-area-center-title font14 mb5">{{ el.createBy }}的日报</view>
              <!-- <view class="content-area-center-time font12">{{ proxy.$time.jktTimes(el.submitDate.replace("T", " ")) }}</view> -->
            </view>
          </view>
          <view class="mb5" @click="goContentDetails(el)">
            <u-text :text="el.contentText.length >= 100 ? el.contentText.slice(0, 100) + '···' : el.contentText" color="#666666" size="14"></u-text>
          </view>
          <view style="font-size:12px;color:#a7a4a4">
            <u-button size="mini" style="width:50px;float:left;margin-right:5px;line-height:18px;height:18px">定时日志</u-button>
            将于 {{ el.timingTime.replace("T", " ").slice(0, 16) }} 发布
          </view>
        
        </view>
      </view>
    </template>
  </oa-scroll>


  <u-popup :show="popup.show" mode="bottom" bgColor="#fff" :round="10" @close="popup.show = false">
    <view
      :style="{
        borderTopLeftRadius: '10px',
        borderTopRightRadius: '10px',
        overflow: 'hidden',
      }"
    >
     
      <u-button
        class="custom-style"
        type="info"
        size="normal"
        text="编辑"
        :customStyle="{
          height: '50px',
          color: '#3c9cff',
          borderWidth: 0,
          borderRadius: 0,
          borderBottomWidth: '1px',
        }"
        @click="handleSubmit('update', eventList)"
      ></u-button>
      <u-button
        class="custom-style"
        type="info"
        size="normal"
        text="删除"
        :customStyle="{
          height: '50px',
          color: '#f56c6c',
          borderWidth: 0,
          borderRadius: 0,
          borderBottomWidth: '3px',
        }"
        @click="handleModal('delete', `确认删除“ ${eventList.createBy} ” 的“ ${eventList.reportDate} ” 的日报？`)"
      ></u-button>
      <u-button
        class="custom-style"
        type="info"
        size="normal"
        text="取消"
        :customStyle="{
          height: '50px',
          color: '#3c9cff',
          border: 'none',
          borderRadius: 0,
        }"
        @click="popup.show = false"
      ></u-button>
    </view>
  </u-popup>

  



  <uni-popup ref="alertDialog" type="dialog">
    <uni-popup-dialog :type="state.tip.type" cancelText="取消" confirmText="确定" title="操作提醒" :content="state.tip.content" @confirm="dialogConfirm"
      @close="dialogClose"></uni-popup-dialog>
  </uni-popup>

  <u-modal
    :show="modal.show"
    title="操作提醒"
    :content="modal.content"
    :showCancelButton="true"
    :closeOnClickOverlay="true"
    @confirm="handleSubmit(state.modal.type, eventList)"
    @cancel="modal.show = false"
    @close="modal.show = false"
  ></u-modal>

</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onReady, onHide, onLaunch, onUnload, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { projectApi } from "@/api/business/project.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const useStore = useStores();
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  loading: false,
  pageSize: 20,
  current: 1,
  total: 0,

  popup: {
    show: false, //弹窗显示
    content: "", //提示信息
  },
  modal: {
    type: "", //操作类型
    show: false, //弹窗显示
    content: "", //提示信息
  },
  eventList: {}, //数据存储


  tip:{
    type:undefined,//弹框类型
    content:"",//提示信息
    data:{},//带入数据
    operation:undefined,//操作类型
  },
  timedList:[]
});

const {pageSize, current, total,popup,eventList,modal,timedList} = toRefs(state);
/**
 * 操作弹框提醒
 * @param type  弹框类型
 * @param content 提示内容
 * @param item 带入数据
 * @param operation 操作类型
 */
 function tips(type,content,item,operation){
  state.tip.type=type
  state.tip.content=content
  state.tip.data=item
  state.tip.operation=operation
  proxy.$refs.alertDialog.open()
}
/**弹框确定操作 */
function dialogConfirm(){
  if(state.tip.operation =='delete'){
    handleSubmit('delete',state.tip.data)
  }
  if(state.tip.operation=='exit'){
    handleSubmit('exit',state.tip.data)
  }
}
/**
 * @初始化
 */
function init() {
  projectApi()
    .TimedReports({
     }).then((requset) => {
      state.timedList = requset.data;
      requset.data.forEach((el) => {
        el.contentText = "";
        el.workContents.forEach((cl) => {
          el.contentText += `${cl.projectName} ${cl.workTime}h \n ${cl.workContent}`;
        });
      });
      state.total = requset.data.length;
      state.loading = false;
     })
    .catch((err) => {
      state.loading = false;
    })
}

/**
 * @跳转详情
 */
function goContentDetails(e) {
  // proxy.$tab.navigateTo(`/pages/business/common/projectMange/record/details?reportId=${e.id}`);
}

/**
 * @scrollView加载数据
 */
function load() {
  init();
}

/**
 * @scrollView刷新数据
 */
function refresh() {
  init();
}

/** 更多按钮点击事件 */
function moreClick(event) {
  state.popup.show = true;
  state.eventList = event;
}

/** 确认按钮点击事件 */
function handleModal(type, content) {
  state.modal.show = true;
  state.modal.type = type;
  state.modal.content = content;
}

/** 编辑、删除日报*/
function handleSubmit(type,item) {
  if (type === "update") {
    proxy.$tab.navigateTo(`/pages/business/common/projectMange/write/insert?templateId=1&id=${item.id}`);
    state.modal.show = false;
  } else if (type === "delete") {
    projectApi()
      .ReportDelete(item.id)
      .then(() => {
        proxy.$modal.msg("日报删除成功！");
        state.modal.show = false;
        state.popup.show = false;
        init();
      })
      .catch((errors) => {
        proxy.$modal.msg(errors);
      });
  } 
}

onReady(() => {});

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

onLoad((options) => {
  init();
  uni.$on("projectMange_record", function (value) {
    init();
  });
});

onUnload(() => {
  uni.$off("projectMange_record"); //将值删除监听器
});
</script>

<style lang="scss" scoped>
.content-area {
  &-time {
    padding: 10px;
    text-align: left;
    color: #000000;
    font-weight: 600;
  }

  &-center {
    margin: 0;
    padding: 15px;
    overflow: hidden;
    border-bottom: 1px solid #eaeef1;

    &:last-child {
      border-bottom: 0px solid #eaeef1;
    }

    &-avatar {
      margin: auto 0;
    }

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

.pp{
  text-align: left;
}
</style>
<style>
.pp .u-modal__content{
  justify-content: left !important
}
</style>