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

<template>
  <flow-form :data="formData" @submit="submitNextActivity">
    <card title="基础信息">
      <van-form required="auto" ref="form" :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.travelNo"
            name="出差单号"
            label="出差单号"
            placeholder="出差单号"
            readonly
            :rules="[{ required: true, message: '未获取出差单号' }]"
          />
          <van-field
            v-model="formData.travelPlace"
            name="出差的地点"
            label="出差的地点"
            placeholder="出差的地点"
            :rules="[{ required: true, message: '请填写出差的地点' }]"
          />
          <van-field
            v-model="formData.projectName"
            name="项目名称"
            label="项目名称"
            readonly
            placeholder="点击选择项目"
            @click="showPicker = true"
            :rules="[{ required: true, message: '请选择项目' }]"
          />
          <van-popup v-model:show="showPicker" position="bottom">
            <van-picker
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
              :columns-field-names="customFieldName"
            />
          </van-popup>
          <van-field
            v-model="formData.travelReason"
            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.travelTimeCreateList"
          :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";

const popupShow = ref<boolean>(false);
const form = ref(null);
const route = useRoute();
interface FormDataType {
  instanceId: string;
  id: string;
  userNickname: string;
  deptName: string;
  createTime: string;
  travelNo: string;
  travelPlace: string;
  travelReason: string;
  projectId: string;
  projectName: string;
  travelTimeCreateList: {
    businessTravelId: string;
    startTime: string;
    endTime: string;
    bz1: string;
  }[];
}
const formData = ref<FormDataType>({
  instanceId: "",
  id: "",
  userNickname: "",
  deptName: "",
  createTime: "",
  travelNo: "",
  travelPlace: "",
  travelReason: "",
  projectId: "",
  projectName: "",
  travelTimeCreateList: [],
});
const detailData = ref({
  businessTravelId: "",
  startTime: "",
  endTime: "",
  bz1: "",
});
const detailEdit = ref(false);
const formRead = ref(false);
const detailIndex = ref<any>(null);
const showPicker = ref(false);
let columns = [];
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 submitNextActivity = async (NextActivity: () => Promise<any>) => {
  form.value.validate().then(async () => {
    formData.value.travelTimeCreateList.forEach((x: any) => {
      x.startTime = Date.parse(x.startTime);
      x.endTime = Date.parse(x.endTime);
    });
    //更新表单业务数据
    if (!formRead.value) {
      const result = await reqest.post(
        "/business/BusinessTravel/update",
        formData.value
      );
      if (result.code === 200 || result.code === 0) {
        //工作流转件
        NextActivity();
      }
    } else {
      //工作流转件
      NextActivity();
    }
  });
};
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/BusinessTravel/mobileAdd?flowInstanceId=${flowInstanceId}`
  );
  formData.value = result.data;
};

/** 细节数据保存 */
const saveHandle = async () => {
  detailData.value.businessTravelId = formData.value.id;
  if (detailEdit.value) {
    formData.value.travelTimeCreateList[detailIndex.value] = detailData.value;
  } else {
    formData.value.travelTimeCreateList.push(detailData.value);
  }
  detailData.value = {
    businessTravelId: "",
    startTime: "",
    endTime: "",
    bz1: "",
  };
  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 detailDelte = (index: number) => {
  formData.value.travelTimeCreateList.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 = "";
  }
};
/** 获取项目列表 */
const getProjectList = async () => {
  const result = await reqest.get(`/business/project/getListByUser`);
  columns = result.data;
};
const customFieldName = {
  text: "xmmc",
  value: "id",
};
/** 项目选址事件 */
const onConfirm = (value: any) => {
  formData.value.projectId = value.selectedValues[0];
  formData.value.projectName = value.selectedOptions[0].xmmc;
  showPicker.value = false;
};
/** 初始化 */
onMounted(() => {
  initFormData();
  getProjectList();
  if (read === "1" || _o === "v") {
    formRead.value = true;
  }
});
</script>

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