zjugis_OA/client_h5/src/pages/loan/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.worker"
            name="借款人"
            label="借款人"
            placeholder="借款人"
            readonly
            :rules="[{ required: true, message: '未获取借款人' }]"
          />
          <van-field
            v-model="formData.workerDept"
            name="所在部门"
            label="所在部门"
            placeholder="所在部门"
            readonly
            :rules="[{ required: true, message: '未获取所在部门' }]"
          />
          <van-field
            v-model="formData.applyDate"
            name="申请时间"
            label="申请时间"
            placeholder="申请时间"
            readonly
            :rules="[{ required: true, message: '未获取申请时间' }]"
          />
          <van-field
            v-model="formData.loanNumber"
            name="借款单号"
            label="借款单号"
            placeholder="借款单号"
            readonly
            :rules="[{ required: true, message: '未获取借款单号' }]"
          />
          <van-field
            v-model="formData.projectName"
            is-link
            readonly
            name="项目"
            label="项目"
            placeholder="点击选择项目"
            @click="showPickerClick"
            :rules="[{ required: true, message: '请选择项目' }]"
          />
          <van-field
            v-model="formData.payCompany"
            is-link
            readonly
            name="付款单位"
            label="付款单位"
            placeholder="请选择付款单位"
            @click="showPickerClick1"
            :rules="[{ required: false, message: '请选择付款单位' }]"
          />
          <van-field
            v-model="formData.agreedPayTime"
            is-link
            readonly
            name="约定付款期限"
            label="约定付款期限"
            placeholder="请选择约定付款期限"
            @click="showPickerClick2"
          />
          <van-field
            v-model="formData.loanAmount"
            name="借款总金额（元）"
            label="借款总金额（元）"
            placeholder="借款总金额（元）"
            :rules="[{ required: true, message: '请填写借款总金额（元）' }]"
          />
          <van-field
            v-model="formData.loadAmountUpper"
            name="大写借款总金额"
            label="大写借款总金额"
            placeholder="大写借款总金额"
            readonly
          />
          <van-field
            v-model="formData.description"
            name="借款事由"
            label="借款事由"
            placeholder="借款事由"
            type="textarea"
            rows="3"
            autosize
            :rules="[{ required: true, message: '请填写借款事由' }]"
          />
          <van-field
            v-model="formData.bz1"
            name="借款备注"
            label="借款备注"
            placeholder="借款备注"
            type="textarea"
            rows="3"
            autosize
          />
        </van-cell-group>
      </van-form>
    </card>
  </flow-form>
  <van-popup v-model:show="showPicker" position="bottom">
    <van-field v-model="searchXmmc" placeholder="请搜索项目" @update:model-value="searchHandle()"/>
    <van-picker
      :columns="columns"
      @confirm="onConfirm"
      @cancel="showPicker = false"
      :columns-field-names="customFieldName"
    />
  </van-popup>
  <van-popup v-model:show="showPicker1" position="bottom">
    <van-picker
      :columns="columns1"
      @confirm="onConfirm1"
      @cancel="showPicker1 = false"
      :columns-field-names="customFieldName1"
    />
  </van-popup>
  <van-popup v-model:show="showPicker2" position="bottom">
    <van-date-picker
      v-model="currentDate"
      type="year-month-day"
      @confirm="onConfirm2"
      @cancel="showPicker2 = false"
    />
  </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";
const route = useRoute();
interface FormDataType {
  instanceId: string;
  id: string;
  worker: string;
  workerDept: string;
  applyDate: string;
  loanNumber: string;
  loanAmount: string;
  description: string;
  projectName: string;
  projecId: string;
  bz1: string;
  payCompanyId: string;
  payCompany: string;
  agreedPayTime: string;
}
const formData = ref<FormDataType>({
  instanceId: "",
  id: "",
  worker: "",
  workerDept: "",
  applyDate: "",
  loanNumber: "",
  loanAmount: null,
  description: "",
  bz1: "",
  projectName: "",
  projecId: "",
  payCompanyId: "",
  payCompany: "",
  agreedPayTime: null,
});
let columns = [];
let columns1 = [];
let showPicker = ref(false);
let showPicker1 = ref(false);
let showPicker2 = ref(false);
const customFieldName = {
  text: "xmmc",
  value: "id",
};
const customFieldName1 = {
  text: "name",
  value: "id",
};
const onConfirm = (value) => {
  formData.value.projectId = value.selectedValues[0];
  formData.value.projectName = value.selectedOptions[0].xmmc;
  showPicker.value = false;
};
const onConfirm1 = (value) => {
  formData.value.payCompanyId = value.selectedValues[0];
  formData.value.payCompany = value.selectedOptions[0].name;
  showPicker1.value = false;
};
const date = new Date();
const currentDate = ref<string[]>([date.getFullYear().toString(), (date.getMonth() + 1).toString(), date.getDate().toString()])
const onConfirm2 = (value) => {
  formData.value.agreedPayTime = value.selectedValues[0]+"-"+value.selectedValues[1]+"-"+value.selectedValues[2]
  showPicker2.value = false;
};
const showPickerClick = (value) => {
  if (read != "1") {
    showPicker.value = true;
  }
};
const showPickerClick1 = (value) => {
  if (read != "1") {
    showPicker1.value = true;
  }
};
const showPickerClick2 = (value) => {
  if (read != "1") {
    showPicker2.value = true;
  }
};
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 (NextActivity: () => Promise<any>) => {
  const result = await reqest.post("/business/Loan/update", formData.value);
  if (result.code === 200 || result.code === 0) {
    //工作流转件
    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/Loan/mobileAdd?flowInstanceId=${flowInstanceId}`
  );
  formData.value = result.data;
};
const searchXmmc = ref<string>('')
const getProjectList = async () => {
  const result = await reqest.post(`/business/project/getListByUser`, {
    xmmc: searchXmmc.value
  });
  columns = result.data;
};
const searchHandle = () => {
  getProjectList()
}
const getCompanyList = async () => {
  const result = await reqest.get(`/business/common/company-tree`);
  columns1 = result.data;
};
/** 初始化 */
onMounted(() => {
  initFormData();
  getProjectList();
  getCompanyList();
  if (read === "1") {
    formRead.value = true;
  }
});
</script>

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