|
@@ -0,0 +1,330 @@
|
|
|
+
|
|
|
+<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 (activeOpinion: any) => {
|
|
|
+ form.value.validate().then(async () => {
|
|
|
+ formData.value.travelTimeCreateList.forEach((x: any) => {
|
|
|
+ x.startTime = Date.parse(x.startTime);
|
|
|
+ x.endTime = Date.parse(x.endTime);
|
|
|
+ });
|
|
|
+ //更新表单业务数据
|
|
|
+ const result = await reqest.post("/business/BusinessTravel/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/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>
|