usky-web-mobile/src/pages/business/common/projectMange/write/components/template1.vue

<template>
  <view class="content-area">
    <view class="content-area-title font12 mtb5 plr10" v-if="!state.form.id">{{ state.form.id }}实时保存，保存时间 {{ saveTime }}</view>

    <view class="content-area-item p10 bg-white">
      <view class="font14 weight mb10 required">工作内容</view>

      <u-collapse v-if="form.workContents.length > 0" :accordion="true">
        <u-collapse-item :title="item.projectName + ' ' + (item.workTime ? item.workTime + 'h' : '0h')" :name="item.projectId" v-for="(item, index) in form.workContents" :key="index">
          <u-input
            v-model="item.workTime"
            placeholder="请输入工作耗时"
            placeholderStyle="color:#909399;font-size:12px"
            suffixIcon="h"
            suffixIconStyle="color:#909399;font-size:12px;width:10px"
            border="none"
            type="digit"
            style="padding: 0px; margin: 10px 0"
            @change="realTimeSaving()"
          />
          <u-textarea
            v-model="item.workContent"
            placeholder="请输入工作内容"
            placeholderStyle="color:#909399;font-size:12px"
            confirmType="return"
            :autoHeight="true"
            :maxlength="-1"
            border="none"
            style="padding: 0px; margin: 10px 0;min-height:100px"
            @change="realTimeSaving()"
          ></u-textarea>
        </u-collapse-item>
      </u-collapse>

      <u-button class="mt20" type="primary" style="width: 100px; height: 25px" @click="insertProjects()" shape="circle" icon="plus" size="mini"> 添加项目 </u-button>
    </view>
    <view class="content-area-item mt10 p10 bg-white">
      <view class="font14 weight mb10">明日计划</view>
      <u-textarea
        v-model="form.tomorrowPlan"
        placeholder="请输入"
        placeholderStyle="color:#909399;font-size:12px"
        confirmType="return"
        :autoHeight="true"
        :maxlength="-1"
        :height="'100%'"
        border="none"
        style="padding: 0px"
        @change="realTimeSaving()"
      ></u-textarea>
    </view>
    <view class="content-area-item mt10 p10 bg-white">
      <view class="font14 weight mb10">工作协调</view>
      <u-textarea
        v-model="form.coordinateWork"
        placeholder="请输入"
        placeholderStyle="color:#909399;font-size:12px"
        confirmType="return"
        :autoHeight="true"
        :maxlength="-1"
        :height="'100%'"
        border="none"
        style="padding: 0px"
        @change="realTimeSaving()"
      ></u-textarea>
    </view>
    <view class="content-area-item mt10 p10 bg-white">
      <view class="font14 weight mb10">图片上传</view>
      <view style="color: #f56c6c; font-size: 11px; margin-bottom: 10px">( 注：不可同步钉钉,最多上传5张 )</view>
      <oa-upload :uploadCount="5" :uploadList="reportImage1" :uploadListSrc="'url'" @uploadSuccessChange="uploadSuccessChange" @uploadDeleteChange="uploadDeleteChange"></oa-upload>
    </view>
    <view class="content-area-item mt10 p10 bg-white">
      <view class="font14 weight mb10">附件上传</view>
      <view style="color: #f56c6c; font-size: 11px; margin-bottom: 10px">( 注：不可同步钉钉,最多上传5个 )</view>
      <uni-file-picker
        limit="5"
        @select="selectUpload"
        v-model="reportFile1"
        :auto-upload="false"
        file-extname="git,pdf,docx,doc,xls,xlsx,ppt,pptx,txt,zip,rar,7z,gz,bz2,tar,tgz,tbz,txz,apk,ipa,mp3,mp4,avi,flv,rmvb,wmv,mkv,mov,wma,aac,m4a,amr,ogg,flac,wav,amr,ape,m4r,aac,ac3,dts,m4b,m4p,m4v,mp2,mpe,mpeg,mpg,mpv,ogv,rm,swf,vob,wmv,3gp,3g2,asf,asx,avi,flv,m2ts,m4v,mkv,mov,mp4,mpg,mpeg,rm,swf,vob,wmv,3gp,3g2,asf,asx,avi,"
        file-mediatype="all"
      >
      </uni-file-picker>
      <!-- 文件列表回显 -->
      <br />
      <view v-for="(file, index) in reportFile1" :key="index" style="border-bottom: 1px solid #eee; margin: 6px; padding: 6px; font-size: 12px">
        <uni-link :href="file.url" text="file.url">{{ file.name }}</uni-link>
        <uni-icons type="closeempty" size="12" style="float: right" @click="delectFile(file)"></uni-icons>
      </view>
    </view>

    <view class="content-area-item mt10 p10 bg-white">
      <view class="font14 weight mb10">抄送到人</view>
      <avatarList :userList="userList" @deleteUsers="deleteUsers" />
      <u-button class="mt20" type="primary" style="width: 100px; height: 25px" @click="insertUsers()" shape="circle" icon="plus" size="mini" :disabled="form.reportStatus == 1"> 选择人员 </u-button>
    </view>
    <view class="content-area-item mt10 p10 bg-white">
      <view class="flex">
        <view class="font14 weight">同步钉钉</view>
        <u-switch
          style="margin-left: auto"
          :modelValue="form.sendDingTalk == 0 ? false : true"
          :ctiveColor="proxy.$settingStore.themeColor.color"
          size="20"
          :disabled="form.reportStatus == 1"
          @change="(event) => switchChage(event, 'sendDingTalk')"
          asyncChange
        ></u-switch>
      </view>
      <view class="flex"> </view>
    </view>
    <view class="content-area-item mt10 p10 bg-white" v-if="form.reportStatus != 1">
      <view class="flex">
        <view class="font14 weight">定时发送</view>
        <u-switch
          style="margin-left: auto"
          :modelValue="form.isRegularlySend == 0 ? false : true"
          :ctiveColor="proxy.$settingStore.themeColor.color"
          size="20"
          @change="(event) => switchChage(event, 'isRegularlySend')"
          asyncChange
        ></u-switch>
      </view>
      <view class="flex" v-if="form.isRegularlySend == 0 ? false : true" @click="timeShow = true">
        <u-input
          v-model="form.timingTime"
          placeholder="请选择时间"
          placeholderStyle="color:#909399;font-size:12px"
          suffixIcon="arrow-right"
          suffixIconStyle="color:#909399;font-size:12px;width:10px"
          border="none"
          style="padding: 0px; margin: 10px 0"
          @change="realTimeSaving()"
          disabledColor="transparent"
          disabled
        />
      </view>
    </view>
  </view>

  <view class="app-button">
    <view class="app-button-padding"></view>
    <view class="app-button-fixed">
      <!-- {{ form }} -->
      <u-button class="app-buttom" type="primary" @click="handleSubmit('提交')" shape="circle"> {{ form.isRegularlySend == 1 && form.reportStatus != 1 ? "保 存" : "确 定" }} </u-button>
    </view>
  </view>

  <u-datetime-picker :show="timeShow" v-model="timeValue" mode="datetime" :closeOnClickOverlay="true" @cancel="timeShow = false" @confirm="timeConfirm"></u-datetime-picker>

  <u-modal :show="modalShow" title="" :confirmText="'确定'" :cancelText="'取消'" :zoom="false" :showCancelButton="true" @confirm="modalConfirm" @cancel="modalShow = false" :picker-options="pickerOptions">
    <view class="slot-content" style="max-height: 45vh; overflow: scroll !important;">
      <view v-if="projectsList.length > 0" >
        <scroll-view scroll-y style="height: 100%; max-height: 300px;">
          <u-checkbox-group v-model="projectsCheck" placement="row" :size="14" >
            <view class="checkbox-group-title">最近使用</view>
              <block v-for="(item, index) in projectsList" >
                <u-checkbox
                  v-if="item.submissions > 0"
                  :customStyle="{ marginBottom: '8px', width: '50%' }"
                  :label="item.projectName + ' (' + item.submissions + '次)'"
                  :name="item.id"
                  :activeColor="proxy.$settingStore.themeColor.color"
                >
                </u-checkbox>
              </block>
            <u-line class="u-line" color="info" style="margin: 10px 0"></u-line>

            <view class="checkbox-group-title">其他</view>

            <block v-for="(item, index) in projectsList">
              <u-checkbox v-if="!item.submissions" :customStyle="{ marginBottom: '8px', width: '50%' }" :label="item.projectName" :name="item.id" :activeColor="proxy.$settingStore.themeColor.color">
              </u-checkbox>
            </block>
          </u-checkbox-group>
        </scroll-view>

        <!-- <u-checkbox-group v-else v-model="projectsCheck" placement="row" :size="14"  style="max-height: 100%; overflow: auto">
        <u-checkbox
          :customStyle="{ marginBottom: '8px', width: '50%' }"
          v-for="(item, index) in projectsList"
          :key="index"
          :label="item.projectName"
          :name="item.id"
          :activeColor="proxy.$settingStore.themeColor.color"
        >
        </u-checkbox>
      </u-checkbox-group> -->
      </view>

      <view v-else>暂未添加项目，请点击确定前往“项目列表”，成为项目成员。</view>
    </view>
  </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, watchEffect, watch } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { projectApi } from "@/api/business/project.js";
import { dUserList } from "@/api/system/user.js";
/*----------------------------------组件引入-----------------------------------*/
import avatarList from "../../components/avatarList.vue";
/*----------------------------------store引入-----------------------------------*/
import { systemStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
import { storageSystem } from "@/utils/storage"; // 公共方法引用
import config from "@/config";
import dayjs from "dayjs";
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const systemStore = systemStores();
const props = defineProps({
  projectList: {
    type: Object,
    default: {},
  },
});
/*----------------------------------变量声明-----------------------------------*/
const modal = reactive({
  timeShow: false,
  timeValue: Number(new Date()),
  modalShow: false,
});
const state = reactive({
  form: {
    reportDate: null,
    tomorrowPlan: "",
    ccTo: "",
    coordinateWork: null,
    workContents: [],
    sendDingTalk: 1,
    isRegularlySend: 0,
    timingTime: null,
    reportImage: [],
    reportFile: [],
  },
  projectsCheck: [],
  projectsList: [],
  userList: [],
  userDate: [],
  saveTime: "",
});
const reportImage1 = ref([]); //图片
const reportFile1 = ref([]); //附件
const { timeShow, timeValue, modalShow } = toRefs(modal);
const { form, projectsCheck, projectsList, userList, userDate, saveTime } = toRefs(state);



const disabledDate = (time) => time > Date.now();
/**
 * @初始化
 */
function init() {
  // dUserList().then((res) => {
  //   state.userDate = res.data;
  // });
}

/** 时间选择器确定按钮点击事件 */
function timeConfirm(e) {
  const currentTime = dayjs().unix() * 1000; //当前时间戳
  const tomorrowZeroPoint = dayjs(dayjs().add(1, 'day').format('YYYY-MM-DD') + " 00:00:00").valueOf(); //第二日零点时间戳
  if(e.value < tomorrowZeroPoint && e.value > currentTime){
    state.form.timingTime = proxy.$time.getFormatterDate(e.value);
    modal.timeShow = false;
  }else if(e.value > tomorrowZeroPoint){
    proxy.$modal.msg("请选择当天时间！");
  }else if(e.value < currentTime){
    proxy.$modal.msg("选择时间要大约当前时间！");
  }
}

/** 开关按钮change事件 */
function switchChage(e, key) {
  state.form[key] = e == true ? 1 : 0;
  if (key === "isRegularlySend") {
    state.form.timingTime = null;
  }
  realTimeSaving();
}

/** 添加人员按钮事件 */
function insertUsers() {
  proxy.$tab.navigateTo(`/pages/business/common/projectMange/mall/index?number=200&title=选择抄送人`).then(() => {
    setTimeout(() => {
      uni.$emit("FathertuSon__UserMall", state.userList); //将值存储监听器
    }, 500);
  });
}

/** 删除人员按钮事件 */
function deleteUsers(index) {
  if (state.form.reportStatus == 1) {
    console.log("已发送不可修改抄送人");
    return;
  }
  state.userList.splice(index, 1);
  realTimeSaving();
}

/** 添加项目按钮事件 */
function insertProjects() {
  modal.modalShow = true;
  projectApi()
    .ProjectsSelect()
    .then((requset) => {
      state.projectsList = requset.data;
    });
}

/** 实时保存填写数据 */
function realTimeSaving() {
  if (!state.form.id) {
    state.saveTime = proxy.$time.formatterDate(new Date(), "hh:mm");
    storageSystem.set("project", state);
  }
}

/** 弹窗确定 */
function modalConfirm() {
  if(projectsList.value.length){
    var newWorkContents = JSON.parse(JSON.stringify(state.form.workContents));
    state.form.workContents = [];
  
    state.projectsCheck.forEach((e) => {
      state.form.workContents.push({
        projectId: e,
        projectName: proxy.$common.mapping("projectName", "id", e, state.projectsList),
        workTime: "",
        workContent: "",
      });
    });
  
    newWorkContents.forEach((e) => {
      state.form.workContents.forEach((f) => {
        if (e.projectId == f.projectId) {
          f.workTime = e.workTime;
          f.workContent = e.workContent;
        }
      });
    });
    modal.modalShow = false;
  }else{
    modal.modalShow = false;
    proxy.$tab.redirectTo("/pages/business/common/projectMange/list/index"); 
  }

  // realTimeSaving();
}

/**
 * @图片上传成功回调
 */
function uploadSuccessChange(e) {
  reportImage1.value.push({
    name: e.name,
    url: e.url,
  });
  reportImage1.value = reportImage1.value.slice(0, 5);
  realTimeSaving();
}
/**
 * @图片删除回调
 */
function uploadDeleteChange(e) {
  reportImage1.value = e;
  realTimeSaving();
}

/**
 * @文件删除
 */
function delectFile(param) {
  reportFile1.value = reportFile1.value.filter(function (item) {
    return item.name != param.name;
  });
  realTimeSaving();
}

/**
 * @文件上传
 */
function selectUpload(e) {
  // console.log('上传：', e)

  e.tempFilePaths.forEach((item, index) => {
    uni.uploadFile({
      url: config.baseUrl + "/service-file/upload",
      filePath: item,
      name: "file",
      success: (uploadFileRes) => {
        reportFile1.value.push(JSON.parse(uploadFileRes.data).data);
        realTimeSaving();
      },
      fail: (err) => {
        console.log(err);
      },
    });
  });
}
// function delectUpload(e){
//   console.log(e)
// }
// function uploadSuccess(e) {
// console.log('上传成功', e)
// }
// function uploadFail(e) {
// 	console.log('上传失败：', e)
// }

/** 提交 */
function handleSubmit() {
  state.form.sendDingTalk == true ? 1 : 0;
  state.form.id = state.form.id ? Number(state.form.id) : "";
  state.form.ccTo = state.userList.map((obj) => `${obj.id}`).join(",");
  state.form.reportDate = proxy.$time.formatterDate(new Date(), "yyyy-MM-dd");
  state.form.workContents.forEach((e) => {
    e.workTime = Number(e.workTime);
  });
  state.form.reportImage = JSON.stringify(reportImage1.value);
  state.form.reportFile = JSON.stringify(reportFile1.value);
  projectApi()
    .ReportInsert(state.form)
    .then((requset) => {
      proxy.$tab.redirectTo("/pages/business/common/projectMange/record/index"); //返回到需要执行方法的页面

      // storageSystem.set("project", state);
    })
    .catch((err) => {});
}
watch(
  () => reportFile1.value.length,
  (val) => {
    var element = document.querySelector(".files-button");
    if (reportFile1.value.length >= 5) {
      element.style.display = "none";
    } else {
      element.style.display = "block";
    }
  }
);

watch(
  () => props.projectList,
  (val) => {
    state.userList = [];
    state.projectsCheck = [];
    state.projectsList = [];
    state.form.reportImage = [];
    state.form.reportFile = [];

    Object.keys(props.projectList).forEach((key) => {
      state.form[key] = props.projectList[key];
    });

    reportImage1.value = state.form.reportImage ? JSON.parse(state.form.reportImage) : [];
    reportFile1.value = state.form.reportFile ? JSON.parse(state.form.reportFile) : [];
    state.form.workContents.forEach((e) => {
      state.projectsCheck.push(e.projectId);
    });
    var ccTo = state.form.ccTo.length > 0 ? state.form.ccTo.split(",").map((num) => Number(num)) : [];
    dUserList().then((res) => {
      state.userDate = res.data;
      state.userDate.forEach((e) => {
        if (ccTo.includes(e.userId)) {
          state.userList.push({
            address: e.address,
            avatar: e.avatar,
            deptId: e.deptId,
            email: e.email,
            id: e.userId,
            label: e.nickName,
            nickName: e.nickName,
            phonenumber: e.phonenumber,
            post: e.post,
            sex: e.sex,
            userId: e.userId,
            userName: e.userName,
          });
        }
      });
    });

    if (!state.form.id) {
      storageSystem.set("project", state);
    }
  }
);

onReady(() => {});

onShow(() => {
  init();

  //循环将缓存数据遍历

  if (!state.form.id) {
    var storages = storageSystem.get("project");
    Object.keys(storages).forEach((key) => {
      state[key] = storages[key];
    });
  }

  // 监听组件返回数据
  uni.$on("SontoFather__UserMall", function (value) {
    state.userList = value;
    if (!state.form.id) {
      realTimeSaving();
    }
  });
});

onLoad((options) => {
  if (options.id) {
    state.form.id = options.id;
  } else {
    state.form.id = "";
  }
});

onUnload(() => {
  uni.$off("SontoFather__UserMall"); //将值删除监听器
});
</script>
<style lang="scss">
:deep(.uni-file-picker__lists, .is-text-box) {
  display: none !important;
  opacity: 0 !important;
  height: 0 !important;
}
</style>
<style lang="scss" scoped>
.checkbox-group-title {
  display: block;
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  note-color: #909399;
  margin-bottom: 10px;
}
:deep() {
  .u-cell__body {
    color: #000000;
    font-size: 12px;
    padding: 10px 0px !important;
  }

  .u-collapse-item__content {
    overflow: auto;
  }

  .u-collapse-item__content__text {
    padding: 0;
  }

  .u-cell__left-icon-wrap {
    margin: 0;
  }
}

.content-area {
  &-title {
    text-align: right;
    color: #909399;
  }
}
</style>