EmploymentSite/h5app/src/views/pages/work/task/myTask.vue

<template>
  <ion-page class="work-log-page">
    <ion-header class="header-theme2">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-icon :icon="arrowBackOutline" @click="onCancel"></ion-icon>
        </ion-buttons>
        <ion-title>{{dayjs(dataModel.finishTime).format("YYYY年MM月DD日")}}工作任务</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <form autocomplete="off">
        <ion-item>
          <div class="panel-title2">
            <div class="item-flag"></div>
            {{dataModel.doTaskName}}
          </div>
        </ion-item>
        <ion-list>
          <ion-item>
            <ion-textarea id="content" name="content" v-model:value="dataModel.content" placeholder="任务内容"   :rows="4" disabled>
            </ion-textarea>
          </ion-item>
        </ion-list>
      </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 {defineComponent, reactive, ref, toRefs} from "vue";
import {getWorkTaskByID} from '@/api/workTask';
import {useRoute, useRouter} from "vue-router";
import {alertController, onIonViewDidEnter} from "@ionic/vue";
import {arrowBackOutline} from 'ionicons/icons';
import dayjs from "dayjs";

interface CurDataProps{
  siteUserID:string,
  userName:string
}

interface myTaskModel{
  dataModel: {
    doTaskUser: CurDataProps[],
    doTaskName: any,
    workTypeID: any,
    content:string,
    finishTime:any,
  }
}

export default defineComponent({
  name: 'MyTaskEdit',
  setup() {
    const router = useRouter();
    const route = useRoute();
    const loading = ref(false);
    const myTaskData = reactive<myTaskModel>({
      dataModel:{
        doTaskUser: [],
        doTaskName: '',
        workTypeID: null,
        content:'',
        finishTime:null,
      }});

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

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

    const onSave = async function (){
      await presentAlert("干得漂亮");
      router.back();
    }

    const onCancel = () => {
      router.back();
    }

    const loadData = async (doTaskID: any) => {
      loading.value = true;
      const reqData = await getWorkTaskByID(doTaskID);
      myTaskData.dataModel = reqData;
      loading.value = false;
      console.log(myTaskData.dataModel);
    };

    const reload = (doTaskID: any) => {
      loadData(doTaskID);
    }

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


    return {
      ...toRefs(myTaskData),
      route,
      router,
      loading,
      arrowBackOutline,
      setOpen,
      onSave,
      onCancel,
      loadData,
      dayjs,
    }
  }
});
</script>

<style lang="less">
.work-log-page {
  .save-btn {
    width: 100%;
    --border-radius: 0px;
    --background: #f2f2f5;
    margin: 20px 0 0 0;
    color: #363432;
    font-size: 14px;
  }

  /*input[type="date"]:before {
    content: attr(placeholder);
    color: #00d9ff;
  }*/
}


</style>