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">工作内容</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 mt20 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 mt20 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 mt20 p10 bg-white">
      <view class="font14 weight mb10">抄送到人</view>
      <view class="flex flex-wrap">
        <view class="mr10 mb10" v-for="(user, index) in userList" :key="index" @click="deleteUsers(index)">
          <u-avatar
            class="content-area-item-avatar"
            :src="user.avatar ? user.avatar : '/static/images/404.png'"
            shape="square"
            size="40"
            fontSize="12"
            color="#ffffff"
            :bgColor="$settingStore.themeColor.color"
            v-if="user.avatar"
          ></u-avatar>
          <u-avatar
            class="content-area-item-avatar"
            :text="user.label.length > 2 ? user.label.slice(1, 3) : user.label"
            shape="square"
            size="40"
            fontSize="12"
            color="#ffffff"
            :bgColor="$settingStore.themeColor.color"
            v-else
          ></u-avatar>
          <view class="font12 text-center mt5">{{ user.label }}</view>
        </view>
      </view>

      <u-button class="mt20" type="primary" style="width: 100px; height: 25px" @click="insertUsers()" shape="circle" icon="plus" size="mini"> 选择人员 </u-button>
    </view>
  </view>

  <view class="content-area-item mt20 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"
        @change="(event) => switchChage(event, 'sendDingTalk')"
        asyncChange
      ></u-switch>
    </view>
    <view class="flex"> </view>
  </view>

  <view class="content-area-item mt20 p10 bg-white">
    <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 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">
      <u-checkbox-group v-model="projectsCheck" placement="row" :size="14" v-if="projectsList.length > 0">
        <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 } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { projectApi } from "@/api/business/project.js";
import { UserList } from "@/api/system/user.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
import { storageSystem } from "@/utils/storage"; // 公共方法引用
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const props = defineProps({
  projectList: {
    type: Object,
    default: {},
  },
});
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  timeShow: false,
  timeValue: Number(new Date()),
  modalShow: false,
  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, form, projectsCheck, projectsList, userList, userDate, saveTime } = toRefs(state);

/**
 * @初始化
 */
function init() {
  UserList({ pageNum: "1", pageSize: "10000" }).then((res) => {
    state.userDate = res.data.rows;
  });

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

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

/** 开关按钮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`);
}

/** 删除人员按钮事件 */
function deleteUsers(index) {
  state.userList.splice(index, 1);
  realTimeSaving();
}

/** 添加项目按钮事件 */
function insertProjects() {
  state.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;
      }
    });
  });

  state.modalShow = false;
  realTimeSaving();
}

/** 提交 */
function handleSubmit() {
  if (!state.form.tomorrowPlan) {
    proxy.$modal.showToast("请输入明日计划");
  }

  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 = parseInt(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);
    });
}

watchEffect(() => {
  if (JSON.stringify(props.projectList) != "{}") {
    state.userList = [];
    state.projectsCheck = [];

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

    var ccTo = state.form.ccTo.length > 0 ? state.form.ccTo.split(",").map((num) => Number(num)) : [];
    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,
        });
      }
    });

    state.form.workContents.forEach((e) => {
      state.projectsCheck.push(e.projectId);
    });

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

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

<style lang="scss" scoped>
:deep(.u-cell__body) {
  color: #000000;
  font-size: 12px;
  padding: 10px 0px !important;
}

:deep(.u-collapse-item__content) {
  overflow: auto;
}

:deep(.u-collapse-item__content__text) {
  padding: 0;
}

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

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

  &-item {
    &-avatar {
      position: relative;

      &::after {
        position: absolute;
        content: "✖";
        display: inline-block;
        padding: 2px 4px;
        border-radius: 100%;
        cursor: pointer;
        font-size: 8px;
        text-align: center;
        background-color: #ccc;
        color: #fff;
        top: -5px;
        right: -5px;
      }

      &::after:hover {
        background-color: #ccc;
      }
    }
  }
}
</style>