zjugis_OA/client_h5/src/pages/leave/index.vue

<template>
  <flow-form :data="formData" @submit="submitNextActivity">
        <card title="基础信息">
          <van-form required="auto" :readonly="formRead">
            <van-cell-group inset>
              <van-field
                v-model="formData.userNickname"
                name="请假人"
                label="请假人"
                placeholder="请假人"
                readonly 
                :rules="[{ required: true, message: '未获取请假人' }]"
              />
              <van-field
                v-model="formData.deptName"
                name="所在部门"
                label="所在部门"
                placeholder="所在部门"
                readonly 
                :rules="[{ required: true, message: '未获取所在部门' }]"
              />
              <van-field
                v-model="formData.createTime"
                name="申请时间"
                label="申请时间"
                placeholder="申请时间"
                readonly 
                :rules="[{ required: true, message: '请填写申请时间' }]"
              />
              <van-field
                v-model="formData.leaveNo"
                name="请假单号"
                label="请假单号"
                placeholder="请假单号"
                readonly 
              />
              <van-field
                v-model="formData.leaveTypeText"
                is-link
                readonly
                name="休假类型"
                label="休假类型"
                placeholder="点击选择休假类型"
                :rules="[{ required: true, message: '请选择休假类型' }]"
                @click="pickerClick"
              />
              <van-popup v-model:show="showPicker" position="bottom">
                <van-picker
                  v-model="leaveTypePiker"
                  :columns="columns"
                  @confirm="onConfirm"
                  @change="onConfirm"
                  @cancel="showPicker = false"
                />
              </van-popup>
              <van-field
                v-model="formData.leaveDays"
                name="休假天数"
                label="休假天数"
                placeholder="休假天数"
                readonly
                :rules="[{ required: true, message: '请填写休假天数' }]"
              />
              <van-field
                v-model="formData.leaveReason"
                name="请假原因"
                label="请假原因"
                placeholder="请假原因"
                type="textarea"
                rows="3"
                autosize
                :rules="[{ required: true, message: '请填写休假原因' }]"
              />
            </van-cell-group>
          </van-form>
        </card>
        <card title="请假时间信息">
            <template #right>
              <button class="add_btn" @click="popupShow = true" v-if="!formRead">新增</button>
            </template>
            <template #default>
              <div v-for="(item,index) in formData.leaveTimeCreateList" :key="index">
                <van-swipe-cell :disabled="formRead">
                  <card-cell>
                    <van-cell title="起始时间" :value="item.startTime" />
                    <van-cell title="截止时间" :value="item.endTime" />
                    <van-cell title="备注" :value="item.bz1" />
                  </card-cell>
                  <template #right>
                    <van-button square type="primary" text="编辑" @click="detailView(index,item)" />
                    <van-button square type="danger" text="删除" @click="detailDelte(index)" />
                  </template>
                </van-swipe-cell> 
              </div>
            </template>
        </card>
  </flow-form>
  <van-popup class="detail-popup" v-model:show="popupShow" position="bottom">
    <h4 class="title">新增请假时间</h4>
    <van-cell-group inset>
      <date-time-range 
        label="起始时间"
        v-model="detailData.startTime"
        placeholder="请选择起始时间"
        @change="startTimeChange"
        />
      <date-time-range 
        label="截止时间"
        v-model="detailData.endTime"
        placeholder="请选择截止时间"
        @change="endTimeChange"
        />
      <van-field
        v-model="detailData.bz1"
        name="备注"
        label="备注"
        placeholder="备注"
        type="textarea"
        rows="3"
        autosize
      />  
    </van-cell-group>
    <div class="fixed-btn">
      <van-button round block type="primary" @click="saveHandle">
          保存
       </van-button>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { FlowDTO, getNextActivity } from '@/service/flow';
import reqest from "@/utils/request";
import DateTimeRange from '@/components/dateTimeRange.vue';
import FlowForm from '@/components/flowForm.vue';
import Card from '@/components/card.vue';
import CardCell from '@/components/cardCell.vue';
import { showSuccessToast, showFailToast } from 'vant';
import { getDictOptions, getDictLabel, DICT_TYPE } from '@/utils/dict';

const popupShow = ref<boolean>(false)
const route = useRoute();
interface FormDataType {
  instanceId: string
  id: string
  leaveHours: number | null
  userNickname: string
  deptName: string
  createTime: string
  leaveNo: string
  leaveType: number | null
  leaveTypeText: string
  leaveDays: string
  leaveReason: string
  leaveTimeCreateList: {
    leaveId: string,
    startTime: string,
    endTime: string,
    bz1: string
  }[]
}
const formData = ref<FormDataType>({
  instanceId: '',
  id: '',
  leaveHours: null,
  userNickname: '',
  deptName: '',
  createTime: '',
  leaveNo: '',
  leaveType: null,
  leaveTypeText: '',
  leaveDays: '',
  leaveReason: '',
  leaveTimeCreateList: []
})
const detailData = ref({
  leaveId: '',
  startTime: '',
  endTime: '',
  bz1: ''
})
const detailEdit = ref(false)
const formRead = ref(false)
const detailIndex = ref<any>(null)
const leaveTypePiker = ref(['11']);
const showPicker = ref(false);
const columns = getDictOptions(DICT_TYPE.WF_LEAVE_TYPE, {
  label: 'text'
})
const { activityInstanceId, participant,flowInstanceId,read,_o } = route.query as {
  activityInstanceId: string;
  participant: string;
  flowInstanceId: string;
  read: string;
  _o: string;
};
const activityData: FlowDTO = {
  activityInstanceId,
  participantId: participant,
  flowOpinion: ''
}
const onConfirm = ({ selectedOptions }) => {
  formData.value.leaveTypeText = selectedOptions[0]?.text;
  formData.value.leaveType = selectedOptions[0]?.value;
  showPicker.value = false;
};
const submitNextActivity = async (activeOpinion: any) => {
  formData.value.leaveTimeCreateList.forEach((x:any) => {
    x.startTime = Date.parse(x.startTime)
    x.endTime = Date.parse(x.endTime)
  })
  //更新表单业务数据
  const result = await reqest.post("/business/Leave/update",formData.value)
  if(result.code ===200||result.code ===0){
    //工作流转件
    activityData.activityInstanceId=activityInstanceId
    activityData.participantId=participant
    activityData.flowOpinion=JSON.stringify(activeOpinion)
    const result = await getNextActivity(jsonToFormData(activityData))
    // getNextActivity(activityData).then(result => {
    //   console.log(result)
    // }).catch((err) => {
    //   console.error(err)
    // })
  }
}
const jsonToFormData = (json: any): FormData | null => {
  const keys: string[] = Object.keys(json)
  if (keys.length > 0) { 
    const formData = new FormData();
    keys.forEach((key) => { 
      formData.append(key, (json[key] instanceof Object) ? JSON.stringify(json[key]) : json[key]);
    });
    return formData;
  }
  return null;
}

/** 初始化表单数据 */
const initFormData= async () => {
  const result = await reqest.get(`/business/Leave/mobileAdd?flowInstanceId=${flowInstanceId}`)
  formData.value = result.data
  formData.value.leaveTypeText = getDictLabel(DICT_TYPE.WF_LEAVE_TYPE,result.data.leaveType)
}

/** 细节数据保存 */
const saveHandle = async () => {
  detailData.value.leaveId = formData.value.id
  if(detailEdit.value){
    formData.value.leaveTimeCreateList[detailIndex.value] = detailData.value
  } else {
    formData.value.leaveTimeCreateList.push(detailData.value)
  }
  detailData.value = {
    leaveId: '',
    startTime: '',
    endTime: '',
    bz1: ''
  }
  const prarms: Object[] = []
  formData.value.leaveTimeCreateList.forEach((x:any)=>{
    const startTime = Date.parse(x.startTime)
    const endTime = Date.parse(x.endTime)
    const obj = new Object({
      startTime: startTime,
      endTime: endTime
    })
    prarms.push(obj)
  })
  const result = await reqest.post(`/business/Leave/getLeaveDays`,prarms)
  if(result.data){
    const totalMin = result.data;
    const totalHours = totalMin / 60;
    const totalDays = Math.floor(totalHours/7.5);
    const subHours = totalHours%7.5;
    let leaveDaysText = '';
    if(totalDays>0){
        leaveDaysText += totalDays + '天'
    }
    if(subHours>0){
        leaveDaysText += subHours + '小时'
    }
    formData.value.leaveDays = leaveDaysText
    formData.value.leaveHours = totalHours
  }
  popupShow.value=false
  detailEdit.value=false
  detailIndex.value=null
}

/** 细节编辑 */
const detailView = (index:number,item:any) =>{
  popupShow.value=true
  detailEdit.value=true
  detailIndex.value = index
  detailData.value = item
}

/** 选择框事件 */
const pickerClick = () =>{
  if(!formRead.value){
    showPicker.value=true
  }
}

/** 细节删除 */
const detailDelte = (index:number) =>{
  formData.value.leaveTimeCreateList.splice(index,1)
}
/** 起始时间变化事件 */
const startTimeChange = (value:string) =>{
  if(Date.parse(value)>Date.parse(detailData.value.endTime)){
    showFailToast('起始时间不能大于开始时间!')
    detailData.value.startTime=''
  }
}
/** 截止时间变化事件 */
const endTimeChange = (value:string) =>{
  if(Date.parse(value)<Date.parse(detailData.value.startTime)){
    showFailToast('截止时间不能小于开始时间!')
    detailData.value.endTime=''
  }
}
/** 初始化 */
onMounted(() => {
  initFormData()
  if(read==='1' || _o==='v'){
    formRead.value=true
  }
})
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>