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"
            :height="'100%'"
            border="none"
            style="padding: 0px; margin: 10px 0"
            @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>
      <oaUpload :uploadCount="5" :uploadList="reportImage1" :uploadListSrc="'url'" @uploadSuccessChange="uploadSuccessChange" @uploadDeleteChange="uploadDeleteChange"></oaUpload>
    </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">
    <view class="slot-content" style="max-height: 45vh;overflow:auto">
     
    <view v-if="projectsList.length > 0">
    
      <u-checkbox-group v-model="projectsCheck" placement="row" :size="14" style="max-height: 100%; overflow: auto">
        <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>
 
      <!-- <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";
import oaUpload from "@/components/oa-upload/index"
/*----------------------------------store引入-----------------------------------*/
import { systemStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
import { storageSystem } from "@/utils/storage"; // 公共方法引用
import config from "@/config";
/*----------------------------------公共变量-----------------------------------*/
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);

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


}

/** 时间选择器确定按钮点击事件 */
function timeConfirm(e) {
  state.form.timingTime = proxy.$time.getFormatterDate(e.value);
  modal.timeShow = false;
}

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

/** 添加人员按钮事件 */
function insertUsers() {
  //将人员选中数据传入store中
  systemStore.mallList.activeUserList = state.userList;
 
  proxy.$tab.navigateTo(`/pages/business/common/projectMange/mall/index?number=200&type=3`);
}

/** 删除人员按钮事件 */
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() {
  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;
  // 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)) : [];
    // setTimeout(function () {
      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,
          });
        }
      });
    // }, 300);

    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("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("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>