zjugis_OA/client_h5/src/pages/outsource/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 
              />
              <van-field
                v-model="formData.deptName"
                name="所在部门"
                label="所在部门"
                placeholder="所在部门"
                readonly 
              />
              <van-field
                v-model="formData.applyTime"
                name="申请时间"
                label="申请时间"
                placeholder="申请时间"
                readonly 
              />
              <van-field
                v-model="formData.useMoneyNo"
                name="用款单号"
                label="用款单号"
                placeholder="用款单号"
                readonly 
              />
              <van-field
                v-model="formData.projectName"
                name="项目名称"
                label="项目名称"
                placeholder="项目名称"
                readonly 
              />
              <van-field
                v-model="formData.projectXmbh"
                name="项目编号"
                label="项目编号"
                placeholder="项目编号"
                readonly 
              />
              <van-field
                v-model="formData.projectZrbm"
                name="项目责任部门"
                label="项目责任部门"
                placeholder="项目责任部门"
                readonly 
              />
              <van-field
                v-model="formData.hth"
                name="合同号"
                label="合同号"
                placeholder="合同号"
                readonly 
              />
              <van-field
                v-model="formData.name"
                name="分包合同名称"
                label="分包合同名称"
                placeholder="分包合同名称"
                readonly 
                v-if="formData.contractId!=null&&formData.contractType==1"
              />
              <van-field
                v-model="formData.name"
                name="外包合同名称"
                label="外包合同名称"
                placeholder="外包合同名称"
                readonly 
                v-if="formData.contractId!=null&&formData.contractType==2"
              />
              <van-field
                v-model="formData.contractAmount"
                name="合同金额（元）"
                label="合同金额（元）"
                placeholder="合同金额（元）"
                readonly 
                v-if="formData.contractId!=null"
              />
              <van-field
                v-model="formData.payAmount"
                name="已支付金额"
                label="已支付金额"
                placeholder="已支付金额"
                readonly 
                v-if="formData.contractId!=null"
              />
              <van-field
                v-model="formData.paymentTerms"
                name="付款条件"
                label="付款条件"
                placeholder="付款条件"
                readonly 
                v-if="formData.contractId!=null"
              />
              <van-field
                v-model="formData.paymentCompanyName"
                name="付款单位"
                label="付款单位"
                placeholder="付款单位"
                readonly
              />
               <van-field
                v-model="formData.paymentMethod"
                name="付款方式"
                label="付款方式"
                placeholder="付款方式"
                readonly
              />
               <van-field
                v-model="formData.agreedPayTime"
                name="约定付款期限"
                label="约定付款期限"
                placeholder="约定付款期限"
                readonly
              />
               <van-field
                v-model="formData.collectionCompany"
                name="收款单位"
                label="收款单位"
                placeholder="收款单位"
                readonly
              />
               <van-field
                v-model="formData.collectionCompanyBank"
                name="收款单位开户行"
                label="收款单位开户行"
                placeholder="收款单位开户行"
                readonly
              />
               <van-field
                v-model="formData.collectionCompanyAccount"
                name="收款单位账号"
                label="收款单位账号"
                placeholder="收款单位账号"
                readonly
              />
               <van-field
                v-model="formData.totalAmount"
                name="用款总金额（元）"
                label="用款总金额（元）"
                placeholder="用款总金额（元）"
                readonly
              />
               <van-field
                v-model="formData.totalAmountCn"
                name="大写用款总金额"
                label="大写用款总金额"
                placeholder="大写用款总金额"
                readonly
              />
              <van-field
                v-model="formData.remark"
                name="用款说明"
                label="用款说明"
                placeholder="用款说明"
                type="textarea"
                rows="3"
                autosize
                readonly
              />
            </van-cell-group>
          </van-form>
        </card>
        <card title="用款详情">
            <template #default>
              <div v-for="(item,index) in formData.detailList" :key="index">
                <van-swipe-cell :disabled="formRead">
                  <card-cell>
                    <van-cell title="金额（元）" :value="item.amount" />
                    <van-cell title="实际所属类型" :value="item.costTypeName" />
                    <van-cell title="用途" :value="item.costContent" />
                    <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 moment from 'moment'
const route = useRoute();
interface FormDataType {
  instanceId: string
  id: string
  leaveHours: number | null
  userNickname: string
  deptName: string
  applyTime: string
  leaveNo: string
  leaveType: number | null
  leaveTypeText: string
  leaveDays: string
  leaveReason: string
  detailList: {
    amount: string,
    costTypeName: string,
    costContent: string,
    remark: string
  }[]
}
const formData = ref<FormDataType>({
  instanceId: '',
  id: '',
  leaveHours: null,
  userNickname: '',
  deptName: '',
  applyTime: '',
  leaveNo: '',
  leaveType: null,
  leaveTypeText: '',
  leaveDays: '',
  leaveReason: '',
  detailList: []
})
const formRead = ref(false)
const { activityInstanceId, participant,flowInstanceId,read } = route.query as {
  activityInstanceId: string;
  participant: string;
  flowInstanceId: string;
  read: string;
};
const activityData: FlowDTO = {
  activityInstanceId,
  participantId: participant,
  flowOpinion: ''
}
const submitNextActivity = async (activeOpinion: any) => {
  //工作流转件
  activityData.activityInstanceId=activityInstanceId
  activityData.participantId=participant
  activityData.flowOpinion=JSON.stringify(activeOpinion)
  const result = await getNextActivity(jsonToFormData(activityData))
}
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/UseMoney/mobileAdd?flowInstanceId=${flowInstanceId}`)
  formData.value = result.data
  formData.value.applyTime=moment(formData.value.applyTime).format('YYYY-MM-DD')
  formData.value.agreedPayTime=moment(formData.value.agreedPayTime).format('YYYY-MM-DD')
}

/** 初始化 */
onMounted(() => {
  initFormData()
  if(read==='1'){
    formRead.value=true
  }
})
</script>

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