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

<template>
  <ion-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>
      <div class="bw-vue-form">
        <div class="form-title">工作任务详细信息</div>
        <div class="form-detail">
          <ion-label>任务名称</ion-label>
          <ion-text>{{ dataModel.doTaskName }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>要求完成时间</ion-label>
          <ion-text>{{ dataModel.finishTime ? dayjs(dataModel.finishTime).format("YYYY-MM-DD") : '' }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>任务类型</ion-label>
          <ion-text>{{ dataModel.workTypeName }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>任务内容</ion-label>
          <ion-text>{{ dataModel.content }}</ion-text>
        </div>
      </div>
      <!-- 任务完成情况选择 -->
      <div class="bw-vue-form">
        <div class="form-select">
          <ion-label>
            任务完成情况
          </ion-label>
          <ion-select name="doTypeID" id="doTypeID" interface="action-sheet" okText="确定" cancelText="取消"
                      v-model="dataModel.taskStatus" placeholder="请选择任务完成情况">
            <ion-select-option v-for="(it,key) in taskStatusCodeList" :key="key" :value="it.value">
              {{ it.name }}
            </ion-select-option>
          </ion-select>
        </div>
        <div class="form-input">
          <ion-label>
            任务完成日期
          </ion-label>
          <div class="dateTimeBox">
            <ion-datetime-button datetime="completeTime"></ion-datetime-button>
            <ion-modal :keep-contents-mounted="true">
              <ion-datetime id="completeTime" placeholder="日期"
                            v-model="dataModel.completeTime" :prefer-wheel="true"
                            dataformatas="YYYY-MM-DD" presentation="date" cancel-text="取消" done-text="确定"
                            :show-default-buttons="true">
              </ion-datetime>
            </ion-modal>
          </div>
        </div>
      </div>
    </ion-content>
    <ion-footer>
      <ion-button shape="round" expand="block" @click="onSave">提交</ion-button>
    </ion-footer>
    <ion-loading
        :is-open="bodyLoading"
        message="加载中..."
        @didDismiss="setBodyLoadingOpen(false)">
    </ion-loading>
  </ion-page>
</template>
<script lang="ts">
import {computed, defineComponent, onMounted, reactive, ref, toRefs} from "vue";
import {getSysDictionaryList} from '@/api/system/dictionary';
import {getMyWorkTasks, getWorkUserList, saveWorkTask, taskFinish} from '@/api/workTask';
import {useRoute, useRouter} from "vue-router";
import {alertController, onIonViewDidEnter} from "@ionic/vue";
import {arrowBackOutline} from 'ionicons/icons';
import dayjs from "dayjs";
import {useVuelidate} from "@vuelidate/core";
import {required} from "@vuelidate/validators";

interface SiteUserModel{
  siteUserID:string,
  siteUserName:string
}

interface workTaskModel {
  dataModel: {
    doTaskID:any,
    doTaskName: string,
    workTypeID: any,
    content:string,
    finishTime:any,
    workTypeName: string,
    taskStatus: any,
    taskStatusName: string,
    completeTime: any
  }
}

interface SelectProps {
  name: string,
  value: string
}

export default defineComponent({
  name: 'WorkTaskEdit',
  setup() {
    const router = useRouter();
    const route = useRoute();
    const editForm = ref();
    const taskTypeList=ref<SelectProps[]>([]);
    const curTaskUserList = ref<SiteUserModel[]>([]);
    const curTaskUserStr = ref("");
    const searchParamsState = reactive({
      pageIndex: 1,
      pageSize: 10,
      total:0,
      doTaskID:'',
      taskName: ''
    });
    const workTaskData = reactive<workTaskModel>({
      dataModel:{
        doTaskID:null,
        doTaskName: '',
        workTypeID: null,
        content:'',
        finishTime:null,
        workTypeName: '',
        taskStatus: null,
        taskStatusName: '',
        completeTime: null
    }});
    // 任务完成状态字典
    const taskStatusCodeList = ref<Array<any>>([]);
    // 页面加载动画开关
    const bodyLoading = ref(false);
    const workTaskRules = computed(() => {
      return {dataModel:{
          doTaskName:{required},
          workTypeID:{required},
          content:{required},
          finishTime:{required},
        }}});
    const workTaskValid = useVuelidate(workTaskRules, workTaskData);

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

      await alert.present();
    }

    const selectTaskUser = (item:any)=>{
      item.checked = !item.checked;
      console.log("itemData",item);
    }

    function onSave() {
      taskFinish(workTaskData.dataModel.doTaskID, workTaskData.dataModel.completeTime).then(result => {
        if (result) {
          router.go(-1);
        }
      })
    }

    const onCancel = () => {
      router.go(-1);
    }

    const getWorkTypeList = async function(){
      const data:any = await getSysDictionaryList("TaskType");
      taskTypeList.value = data;
      console.log("taskTypeList",taskTypeList.value);
    }

    const loadCurTaskUserList = async (taskID: any) => {
      const data:any = await getWorkUserList(taskID);
      curTaskUserList.value = data;
      console.log("curTaskUserList",curTaskUserList.value);
      if(curTaskUserList.value.length>0){
        curTaskUserList.value.map(x=>{
          curTaskUserStr.value += x.siteUserName + " ";
        })
      }
      console.log("curTaskUserStr",curTaskUserStr.value);
    }

    const loadData = async (doTaskID: any) => {
      bodyLoading.value = true;

      curTaskUserStr.value ="";
      await getWorkTypeList();
      await loadCurTaskUserList(doTaskID);
      searchParamsState.doTaskID = doTaskID;
      const reqData = await getMyWorkTasks(searchParamsState);
      workTaskData.dataModel = reqData.list[0];
      console.log("初始化dataModel",workTaskData.dataModel);

      bodyLoading.value = false;
    };

    const reload = (doTaskID: any) => {
      curTaskUserList.value = [];
      loadData(doTaskID);
    }

    // 设置加载动画状态
    function setBodyLoadingOpen(value: boolean) {
      bodyLoading.value = value;
    }

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

    onMounted(() => {
      // 获取任务完成状态字典数据
      getSysDictionaryList("TaskStatusType").then((result: any) => {
        taskStatusCodeList.value = result;
      })
    })


    return {
      ...toRefs(workTaskData),
      arrowBackOutline,
      route,
      router,
      editForm,
      taskTypeList,
      curTaskUserList,
      curTaskUserStr,
      selectTaskUser,
      loadData,
      onSave,
      onCancel,
      dayjs,
      workTaskValid,
      taskStatusCodeList,
      bodyLoading,
      setBodyLoadingOpen
    }
  }
});
</script>

<style lang="less">

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

.title-item{
  margin-left: 15px;
  color:#3a7be0;
  font-size: 16px;
}

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