|
@@ -0,0 +1,386 @@
|
|
|
+
|
|
|
+<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.applyTime"
|
|
|
+ :formatter="formatDate"
|
|
|
+ name="申请时间"
|
|
|
+ label="申请时间"
|
|
|
+ placeholder="申请时间"
|
|
|
+ readonly
|
|
|
+ :rules="[{ required: true, message: '请填写申请时间' }]"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ v-model="formData.travelCostNo"
|
|
|
+ name="报销单号"
|
|
|
+ label="报销单号"
|
|
|
+ placeholder="报销单号"
|
|
|
+ readonly
|
|
|
+ :rules="[{ required: true, message: '未获取报销单号' }]"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ v-model="formData.startTime"
|
|
|
+ name="起始时间"
|
|
|
+ label="起始时间"
|
|
|
+ placeholder="起始时间"
|
|
|
+ readonly
|
|
|
+ :rules="[{ required: true, message: '未获取起始时间' }]"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ v-model="formData.endTime"
|
|
|
+ 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="项目名称"
|
|
|
+ :rules="[{ required: true, message: '未获取项目' }]"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ v-model="formData.travelPlace"
|
|
|
+ name="付款单位"
|
|
|
+ label="付款单位"
|
|
|
+ placeholder="付款单位"
|
|
|
+ :rules="[{ required: true, message: '未获取付款单位' }]"
|
|
|
+ />
|
|
|
+ <van-field name="是否抵用借款" label="是否抵用借款">
|
|
|
+ <template #input>
|
|
|
+ <van-checkbox v-model="formData.dybyCheckBox" shape="square" />
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ v-model="formData.boatCarAmout"
|
|
|
+ name="车船费合计(元)"
|
|
|
+ label="车船费合计(元)"
|
|
|
+ placeholder="车船费合计(元)"
|
|
|
+ :rules="[{ required: true, message: '未获取车船费' }]"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ v-model="formData.subsidyAmount"
|
|
|
+ name="途中补贴合计(元)"
|
|
|
+ label="途中补贴合计(元)"
|
|
|
+ placeholder="途中补贴合计(元)"
|
|
|
+ :rules="[{ required: true, message: '为获取途中补贴' }]"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ v-model="formData.otherAmount"
|
|
|
+ name="其他费用合计(元)"
|
|
|
+ label="其他费用合计(元)"
|
|
|
+ placeholder="其他费用合计(元)"
|
|
|
+ :rules="[{ required: true, message: '未获取其他费用' }]"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ v-model="formData.carAmount"
|
|
|
+ name="其中市内车费(元)"
|
|
|
+ label="其中市内车费(元)"
|
|
|
+ placeholder="其中市内车费(元)"
|
|
|
+ :rules="[{ required: true, message: '未获取其中市内车费' }]"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ v-model="formData.totalAmount"
|
|
|
+ name="报销总金额"
|
|
|
+ label="报销总金额(元)"
|
|
|
+ placeholder="报销总金额"
|
|
|
+ :rules="[{ required: true, message: '未获取报销总金额' }]"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ v-model="formData.totalAmountCn"
|
|
|
+ name="大写单据总金额"
|
|
|
+ label="大写单据总金额"
|
|
|
+ placeholder="大写单据总金额"
|
|
|
+ :rules="[{ required: true, message: '未获取大写单据总金额' }]"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ v-model="formData.remark"
|
|
|
+ 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.boatCarList" :key="index">
|
|
|
+ <van-swipe-cell :disabled="formRead">
|
|
|
+ <card-cell>
|
|
|
+ <van-cell
|
|
|
+ title="出发日期"
|
|
|
+ :value="formatDate(item.departDate, 'YYYY-MM-DD')"
|
|
|
+ />
|
|
|
+ <van-cell title="出发地点" :value="item.departPlace" />
|
|
|
+ <van-cell
|
|
|
+ title="到达日期"
|
|
|
+ :value="formatDate(item.arriveDate, 'YYYY-MM-DD')"
|
|
|
+ />
|
|
|
+ <van-cell title="到达地点" :value="item.arrivePlace" />
|
|
|
+ <van-cell
|
|
|
+ title="交通工具"
|
|
|
+ :value="
|
|
|
+ getDictLabel(
|
|
|
+ DICT_TYPE.WF_TRAVEL_COST_VEHICLE_TYPE,
|
|
|
+ item.vehicle
|
|
|
+ )
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <van-cell title="单据张数" :value="item.invoiceNums" />
|
|
|
+ <van-cell title="车船费" :value="item.amount" />
|
|
|
+ <van-cell title="备注" :value="item.remark" />
|
|
|
+ </card-cell>
|
|
|
+ </van-swipe-cell>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </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.otherList" :key="index">
|
|
|
+ <van-swipe-cell :disabled="formRead">
|
|
|
+ <card-cell>
|
|
|
+ <van-cell
|
|
|
+ title="费用类型"
|
|
|
+ :value="
|
|
|
+ getDictLabel(
|
|
|
+ DICT_TYPE.WF_TRAVEL_COST_OTHER_TYPE,
|
|
|
+ item.costType
|
|
|
+ )
|
|
|
+ "
|
|
|
+ />
|
|
|
+ <van-cell
|
|
|
+ title="发生日期"
|
|
|
+ :value="formatDate(item.costDate, 'YYYY-MM-DD')"
|
|
|
+ />
|
|
|
+ <van-cell title="地点" :value="item.costPlace" />
|
|
|
+ <van-cell title="单据张数" :value="item.invoiceNums" />
|
|
|
+ <van-cell title="金额" :value="item.amount" />
|
|
|
+ <van-cell title="备注" :value="item.remark" />
|
|
|
+ </card-cell>
|
|
|
+ </van-swipe-cell>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </card>
|
|
|
+ </flow-form>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { useRoute } from "vue-router";
|
|
|
+import { FlowDTO, getNextActivity } from "@/service/flow";
|
|
|
+import reqest from "@/utils/request";
|
|
|
+import FlowForm from "@/components/flowForm.vue";
|
|
|
+import Card from "@/components/card.vue";
|
|
|
+import CardCell from "@/components/cardCell.vue";
|
|
|
+import { showSuccessToast, showFailToast } from "vant";
|
|
|
+import { formatDate } from "@/utils/formatTime";
|
|
|
+import { getDictOptions, getDictLabel, DICT_TYPE } from "@/utils/dict";
|
|
|
+
|
|
|
+const popupShow = ref<boolean>(false);
|
|
|
+const form = ref(null);
|
|
|
+const route = useRoute();
|
|
|
+interface FormDataType {
|
|
|
+ instanceId: string;
|
|
|
+ id: string;
|
|
|
+ userNickname: string;
|
|
|
+ deptName: string;
|
|
|
+ applyTime: any;
|
|
|
+ travelCostNo: string;
|
|
|
+ startTime: any;
|
|
|
+ endTime: any;
|
|
|
+ travelPlace: string;
|
|
|
+ projectName: string;
|
|
|
+ companyName: string;
|
|
|
+ dybx: any;
|
|
|
+ dybyCheckBox: boolean;
|
|
|
+ totalAmount: number | null;
|
|
|
+ totalAmountCn: string;
|
|
|
+ boatCarAmout: string;
|
|
|
+ otherAmount: string;
|
|
|
+ carAmount: string;
|
|
|
+ remark: string;
|
|
|
+ boatCarList: {
|
|
|
+ travelCostId: string;
|
|
|
+ departDate: any;
|
|
|
+ departPlace: string;
|
|
|
+ arriveDate: any;
|
|
|
+ arrivePlace: string;
|
|
|
+ invoiceNums: number;
|
|
|
+ vehicle: number;
|
|
|
+ amount: number;
|
|
|
+ remark: string;
|
|
|
+ }[];
|
|
|
+ otherList: {
|
|
|
+ travelCostId: string;
|
|
|
+ costDate: any;
|
|
|
+ costType: string;
|
|
|
+ costPlace: string;
|
|
|
+ invoiceNums: number;
|
|
|
+ vehicle: number;
|
|
|
+ amount: number;
|
|
|
+ remark: string;
|
|
|
+ }[];
|
|
|
+}
|
|
|
+const formData = ref<FormDataType>({
|
|
|
+ instanceId: "",
|
|
|
+ id: "",
|
|
|
+ userNickname: "",
|
|
|
+ deptName: "",
|
|
|
+ applyTime: null,
|
|
|
+ travelCostNo: "",
|
|
|
+ startTime: null,
|
|
|
+ endTime: null,
|
|
|
+ travelPlace: "",
|
|
|
+ projectName: "",
|
|
|
+ companyName: "",
|
|
|
+ dybx: null,
|
|
|
+ dybyCheckBox: false,
|
|
|
+ totalAmount: null,
|
|
|
+ totalAmountCn: "",
|
|
|
+ boatCarAmout: "",
|
|
|
+ otherAmount: "",
|
|
|
+ carAmount: "",
|
|
|
+ remark: "",
|
|
|
+ boatCarList: [],
|
|
|
+ otherList: []
|
|
|
+});
|
|
|
+
|
|
|
+const formRead = ref(false);
|
|
|
+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 () => {
|
|
|
+ //工作流转件
|
|
|
+ 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/TravelCost/mobileAdd?flowInstanceId=${flowInstanceId}`
|
|
|
+ );
|
|
|
+ formData.value = result.data;
|
|
|
+ formData.value.applyTime = formatDate(formData.value.applyTime);
|
|
|
+ formData.value.startTime = formatDate(formData.value.startTime, "YYYY-MM-DD");
|
|
|
+ formData.value.endTime = formatDate(formData.value.endTime, "YYYY-MM-DD");
|
|
|
+ if (formData.value.dybx === 1) {
|
|
|
+ formData.value.dybyCheckBox = true;
|
|
|
+ } else {
|
|
|
+ formData.value.dybyCheckBox = false;
|
|
|
+ }
|
|
|
+ totalBoatCarAmount()
|
|
|
+ totalOtherAmount()
|
|
|
+};
|
|
|
+/** 车船费合计计算 */
|
|
|
+const totalBoatCarAmount = () => {
|
|
|
+ let amonut = 0;
|
|
|
+ formData.value.boatCarList.forEach((obj: { amount: any }) => {
|
|
|
+ amonut += Number(obj.amount);
|
|
|
+ });
|
|
|
+ formData.value.boatCarAmout = amonut.toFixed(2);
|
|
|
+};
|
|
|
+
|
|
|
+/** 其他费用合计计算 */
|
|
|
+const totalOtherAmount = () => {
|
|
|
+ let amonut = 0;
|
|
|
+ let carAmount = 0;
|
|
|
+ formData.value.otherList.forEach(
|
|
|
+ (obj: { costType: string; amount: any }) => {
|
|
|
+ amonut += Number(obj.amount);
|
|
|
+ if (obj.costType == "1") {
|
|
|
+ carAmount += Number(obj.amount);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ formData.value.otherAmount = amonut.toFixed(2);
|
|
|
+ formData.value.carAmount = carAmount.toFixed(2);
|
|
|
+};
|
|
|
+/** 初始化 */
|
|
|
+onMounted(() => {
|
|
|
+ initFormData();
|
|
|
+ if (read === "1" || _o === "v") {
|
|
|
+ formRead.value = true;
|
|
|
+ }
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import "./index.scss";
|
|
|
+</style>
|