EmploymentSite/h5app/src/views/pages/work/log/edit.vue

<template>
  <ion-page class="list-page">
    <ion-header class="header-theme2">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-icon :icon="arrowBackOutline" @click="onCancel"></ion-icon>
        </ion-buttons>
        <ion-title>工作备忘编辑</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <!-- 编辑 -->
      <form>
        <div class="bw-vue-form">
          <div class="form-title">基本信息</div>
          <div class="form-input">
            <ion-label>
              工作备忘日期
              <span class="danger">*</span>
            </ion-label>
            <div class="dateTimeBox">
              <ion-datetime-button class="dateTimeBtn" datetime="workTime"></ion-datetime-button>
              <ion-modal :keep-contents-mounted="true">
                <ion-datetime id="workTime" placeholder="日期"
                              v-model="dataModel.workTime"  :prefer-wheel="true"
                              dataformatas="YYYY-MM-DD" presentation="date" cancel-text="取消" done-text="确定"
                              :show-default-buttons="true" @ion-change="workTimeChange">
                </ion-datetime>
              </ion-modal>
            </div>
          </div>
          <div class="form-select">
            <ion-label>
              备忘类型
              <span class="danger">*</span>
            </ion-label>
            <ion-select name="doTypeID" id="doTypeID" interface="action-sheet" okText="确定" cancelText="取消" v-model="dataModel.doTypeID" placeholder="请选择日志类型">
              <ion-select-option v-for="(it,key) in logTypeList" :key="key" :value="it.value">
                {{ it.name }}
              </ion-select-option>
            </ion-select>
          </div>
          <div class="form-input">
            <ion-label>
              工作备忘内容
              <span class="danger">*</span>
            </ion-label>
            <ion-textarea name="workContent" id="workContent" placeholder="请输入工作备忘内容" :rows="3" v-model="dataModel.workContent"></ion-textarea>
          </div>
          <div class="form-input">
            <ion-label>
              照片
            </ion-label>
            <b-image v-if="dataModel.doWorkID" :file-ref-id="dataModel.doWorkID" :readonly="false"
                     :is-single="false"></b-image>
          </div>
        </div>
      </form>
    </ion-content>
    <ion-footer>
      <ion-button shape="round" expand="block" @click="onSave">提交</ion-button>
    </ion-footer>
    <ion-loading
        :is-open="loading"
        message="加载中..."
        @didDismiss="setOpen(false)" >
    </ion-loading>
  </ion-page>
</template>
<script lang="ts">
import {computed, defineComponent, reactive, ref, toRefs} from "vue";
import {getSysDictionaryList} from '@/api/system/dictionary';
import {getWorkLogById, saveWorkLog} from '@/api/workLog';
import {useRoute, useRouter} from "vue-router";
import {alertController, onIonViewDidEnter} from "@ionic/vue";
import {arrowBackOutline} from 'ionicons/icons';
import {required} from "@vuelidate/validators";
import {useVuelidate} from "@vuelidate/core";
import dayjs from "dayjs";
import BImage from "@/components/bImage.vue";

interface workLogModel {
  dataModel:any
}
interface SelectProps {
  name: string,
  value: string
}

export default defineComponent({
  name: 'WorkLogEdit',
  components: {BImage},
  setup() {
    const router = useRouter();
    const route = useRoute();
    const loading = ref(false);
    const logTypeList=ref<SelectProps[]>([]);
    const workLogData = reactive<workLogModel>({
      dataModel:{
        doWorkID: null,
        workTime: null,
        doTypeID:null,
        workContent: null
    }});
    // 日志当天完成工作量数据
    const recordsCount = reactive<any>({
      RecordsCompanyNum: null,
      RecordsJobuserNum: null,
      RecordsPostNum: null,
      RecordsJobhuntNum: null,
    });
    const workLogRules = computed(()=>{
      return {dataModel:{
          workTime:{required},
          doTypeID:{required},
          workContent:{required},
        }}});
    const workLogValid = useVuelidate(workLogRules,workLogData);

    const presentAlert = async (message: string) => {
      const alert = await alertController.create({
        header: '错误！',
        message: message,
        buttons: [
          '确定'
        ],
      });

      await alert.present();
    }

    const onSave = async function (){
      const isFormCorrect = await workLogValid.value.$validate();
      if(!isFormCorrect){
        await presentAlert("请填写完整的信息！");
        return null;
      }
      saveWorkLog(workLogData.dataModel).then(result => {
        if (result) {
          router.push("./list");
        }
      });
    }

    const onCancel = () => {
      router.push("./list");
    }

    const getWorkTypeList = async function(){
      const data:any =await getSysDictionaryList("LogType");
      logTypeList.value = data;
    };

    const setOpen = (isOpen: boolean) => {
      loading.value = isOpen;
    };

    const loadData = async (doWorkID: any) => {
      loading.value = true;
      await getWorkTypeList();
      const reqData = await getWorkLogById(doWorkID);
      workLogData.dataModel = reqData;
      if (workLogData.dataModel.workTime == null) {
        workLogData.dataModel.workTime = dayjs(new Date().toLocaleDateString()).format("YYYY-MM-DD") + "T00:00:00.000+08:00";
      }
      loading.value = false;
    };

    // 日期选择器选择当天日期，值为null bug
    function workTimeChange(value: any) {
      if (value.detail.value == null) {
        workLogData.dataModel.workTime = dayjs(new Date().toLocaleDateString()).format("YYYY-MM-DD") + "T00:00:00.000+08:00";
      }
    }

    const reload = (doWorkID: any) => {
      workLogData.dataModel = {};
      loadData(doWorkID);
    }

    onIonViewDidEnter(() => {
      if (route.query.reload)
        reload(route.query.doWorkID);
    });


    return {
      ...toRefs(workLogData),
      arrowBackOutline,
      logTypeList,
      setOpen,
      onSave,
      onCancel,
      loadData,
      route,
      router,
      loading,
      workLogValid,
      recordsCount,
      workTimeChange
    }
  }
});
</script>

<style lang="less">

.custom{
  --placeholder-color: gray;
  --placeholder-opacity: 0.5;
}

.title-item{
  margin-left: 15px;
  color:#1c3d70 !important;
  font-size: 14px !important;
  font-weight: bold;
}

.dateTimeBox {
  width: 100%;
  display: flex;
  margin-top: 5px;
  justify-content: space-between;
  align-content: center;
}
</style>