zjugis_OA/client_h5/src/pages/travelCost/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.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.paymentCompanyName"
            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;
  paymentCompanyName: 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: "",
  paymentCompanyName: "",
  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 (NextActivity: ()=>Promise<any>) => {
  form.value.validate().then(async () => {
    //工作流转件
    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/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>