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">实时保存，保存时间 {{ 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>
      <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">
      <u-button class="app-buttom" type="primary" @click="handleSubmit('提交')" shape="circle"> 提交 </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: 80vh">
      <u-checkbox-group v-model="projectsCheck" placement="row" :size="14" v-if="projectsList.length > 0" 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 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"; // 公共方法引用
/*----------------------------------公共变量-----------------------------------*/
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,
    // reportStatus: null,
  },
  projectsCheck: [],
  projectsList: [],
  userList: [],
  userDate: [],
  saveTime: "",
});
const { timeShow, timeValue, modalShow } = toRefs(modal);
const { form, projectsCheck, projectsList, userList, userDate, saveTime } = toRefs(state);

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

  projectApi()
    .ProjectsSelect()
    .then((requset) => {
      state.projectsList = requset.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`);
}

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

/** 添加项目按钮事件 */
function insertProjects() {
  modal.modalShow = true;
}

/** 实时保存填写数据 */
function realTimeSaving() {
  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 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);
  });
  projectApi()
    .ReportInsert(state.form)
    .then((requset) => {
      proxy.$tab.redirectTo("/pages/business/common/projectMange/record/index"); //返回到需要执行方法的页面
      state.form.workContents = [];
      state.form.tomorrowPlan = "";
      state.form.coordinateWork = null;
      state.form.isRegularlySend = 0;
      state.form.timingTime = null;
      storageSystem.set("project", state);
    });
}

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

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

    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);

    projectApi()
      .ProjectsSelect()
      .then((requset) => {
        state.projectsList = requset.data;
      });

    storageSystem.set("project", state);
  }
);

onReady(() => {});

onShow(() => {
  //循环将缓存数据遍历
  // var storages = storageSystem.get("project");
  // Object.keys(storages).forEach((key) => {
  //   state[key] = storages[key];
  // });

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

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

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

<style lang="scss" scoped>
: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>