byte-sailing-mobile/src/views/fund/account-payment/add.vue

<template>
  <div class="form">
    <van-nav-bar :title="$t('accountPayment.name')" :left-text="$t('common.back')" left-arrow @click-left="onClickLeft"> </van-nav-bar>
    <testForm v-model="formData.data" :formOption="formOption" :formConfig="formConfig" :rules="rules" @onSubmit="onSubmit" ref="formDom">
      <template #date>
        <div style="width: 100%">
          <van-cell-group inset>
            <van-field
              v-model="formData.data.expensesTime"
              is-link
              readonly
              :label="$t('accountPayment.expensesTime')"
              :placeholder="$t('common.pleaseSelect')"
              style="padding: 0 !important"
              :required="true"
              @click="clickDate" />
            <van-popup v-model:show="showPicker" round position="bottom">
              <van-picker-group
                :title="$t('accountPayment.expensesTime')"
                :tabs="[$t('common.selectDate'), $t('common.selectTime')]"
                @confirm="onConfirm"
                @cancel="onCancel">
                <van-date-picker v-model="currentDate" />
                <van-time-picker v-model="currentTime" :columns-type="columnsType" />
              </van-picker-group>
            </van-popup>
          </van-cell-group>
        </div>
      </template>
    </testForm>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted, reactive } from "vue";
import { showSuccessToast } from "vant";
import { useRoute } from "vue-router";
import { getUserInfo, formatDate } from "@/utils/auth";
import testForm from "@/components/testForm/index.vue";

const proxy = getCurrentInstance().proxy;
const onClickLeft = () => history.back();
const route = useRoute();
const showPicker = ref(false);
const currentDate = ref([]);
const currentTime = ref([]);
const columnsType = ["hour", "minute", "second"];
const onConfirm = () => {
  formData.data.expensesTime = currentDate.value.join("-") + " " + currentTime.value.join(":");
  showPicker.value = false;
};
const onCancel = () => {
  showPicker.value = false;
};
const clickDate = () => {
  currentDate.value = formatDate(new Date(formData.data.expensesTime), "yyyy-MM-dd").split("-");
  currentTime.value = formatDate(new Date(formData.data.expensesTime), "hh:mm:ss").split(":");
  showPicker.value = true;
};
const formData = reactive({
  data: {
    expensesTime: "",
  },
});
const formDom = ref(null);
const formOption = reactive({
  readonly: false, //用于控制整个表单是否只读
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  hiddenSubmitBtn: false,
});
const formConfig = reactive([
  {
    type: "title",
    title: proxy.t("accountPayment.requestInformation"),
  },
  {
    type: "input",
    label: proxy.t("accountPayment.businessManagementName"),
    prop: "businessManagementName",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: proxy.t("accountPayment.currencyAmount"),
    prop: "currencyAmount",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: proxy.t("accountPayment.paymentMethodText"),
    prop: "paymentMethodText",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: proxy.t("accountPayment.collectionName"),
    prop: "name",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: proxy.t("accountPayment.accountOpening"),
    prop: "accountOpening",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: proxy.t("accountPayment.openingBank"),
    prop: "openingBank",
    itemType: "text",
    readonly: true,
  },
  {
    type: "input",
    label: proxy.t("accountPayment.interbankNumber"),
    prop: "interbankNumber",
    itemType: "text",
    readonly: true,
  },
  {
    type: "title",
    title: proxy.t("accountPayment.paymentInformation"),
  },
  {
    type: "picker",
    label: proxy.t("accountPayment.accountManagementId"),
    prop: "accountManagementId",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
  },
  {
    type: "picker",
    label: proxy.t("accountPayment.currency"),
    prop: "currency",
    itemType: "onePicker",
    showPicker: false,
    readonly: true,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
  },
  {
    type: "input",
    label: proxy.t("accountPayment.amount"),
    prop: "amount",
    itemType: "number",
    readonly: true,
  },
  {
    type: "slot",
    slotName: "date",
  },
  {
    type: "input",
    label: proxy.t("accountPayment.remark"),
    prop: "remark",
    itemType: "textarea",
  },
]);
const rules = {
  accountManagementId: [{ required: true, message: proxy.t("accountPayment.accountManagementIdMsg") }],
  currency: [{ required: true, message: proxy.t("accountPayment.currencyMsg") }],
  amount: [{ required: true, message: proxy.t("accountPayment.amountMsg") }],
  expensesTime: [{ required: true, message: proxy.t("accountPayment.expensesTimeMsg") }],
};
const onSubmit = () => {
  proxy.post("/accountPayment/add", formData.data).then(() => {
    showSuccessToast(proxy.t("common.addSuccess"));
    setTimeout(() => {
      history.back();
    }, 500);
  });
};
const fundsPayment = ref([]);
const gerFundsPayment = () => {
  return proxy
    .post("/dictTenantData/page", {
      pageNum: 1,
      pageSize: 999,
      tenantId: getUserInfo().tenantId,
      dictCode: "funds_payment_method",
    })
    .then((res) => {
      fundsPayment.value = res.data.rows;
    });
};
const accountList = ref([]);
const gerAccountList = () => {
  return proxy.post("/accountManagement/page", { pageNum: 1, pageSize: 9999 }).then((res) => {
    if (res.data.rows && res.data.rows.length > 0) {
      accountList.value = res.data.rows.map((item) => {
        return {
          label: item.alias + " (" + item.name + ")",
          value: item.id,
        };
      });
      formConfig[9].data = accountList.value;
    }
  });
};
const gerCurrency = () => {
  return proxy
    .post("/dictTenantData/page", {
      pageNum: 1,
      pageSize: 999,
      tenantId: getUserInfo().tenantId,
      dictCode: "account_currency",
    })
    .then((res) => {
      if (res.data.rows && res.data.rows.length > 0) {
        formConfig[10].data = res.data.rows.map((item) => {
          return {
            label: item.dictValue,
            value: item.dictKey,
          };
        });
      }
    });
};
onMounted(() => {
  Promise.all([gerFundsPayment(), gerAccountList(), gerCurrency()]).then(() => {
    if (route.query.id) {
      proxy.post("/accountPayment/detail", { id: route.query.id }).then((res) => {
        formData.data = res.data;
        formData.data.expensesTime = formatDate(new Date(), "yyyy-MM-dd hh:mm:ss");
        formData.data.currencyAmount = formData.data.currency + " " + formData.data.amount;
        let paymentMethodText = "";
        if (formData.data.paymentMethod && fundsPayment.value && fundsPayment.value.length > 0) {
          let list = fundsPayment.value.filter((item) => item.dictKey == formData.data.paymentMethod);
          if (list && list.length > 0) {
            paymentMethodText = list[0].dictValue;
          }
        }
        formData.data.paymentMethodText = paymentMethodText;
      });
    }
  });
});
</script>