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

<template>
  <div class="form">
    <van-nav-bar :title="$t('account.' + route.query.type)" :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"> </testForm>
  </div>
</template>

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

const proxy = getCurrentInstance().proxy;
const onClickLeft = () => history.back();
const route = useRoute();
const getDict = () => {
  proxy
    .post("/dictTenantData/page", {
      pageNum: 1,
      pageSize: 999,
      dictCode: "account_currency",
      tenantId: getUserInfo().tenantId,
    })
    .then((res) => {
      if (res.data.rows && res.data.rows.length > 0) {
        formOption.btnConfig.listConfig[0].data = res.data.rows.map((item) => {
          return {
            text: item.dictValue,
            value: item.dictKey,
          };
        });
      }
    });
  proxy.post("/corporation/page", { pageNum: 1, pageSize: 9999 }).then((res) => {
    if (res.data.rows && res.data.rows.length > 0) {
      formConfig[0].data = res.data.rows.map((item) => {
        return {
          ...item,
          label: item.name,
          value: item.id,
        };
      });
    }
  });
};
getDict();
const formData = reactive({
  data: {
    corporationId: null,
    alias: null,
    name: null,
    openingBank: null,
    accountOpening: null,
    interbankNumber: null,
    beneficiaryName: null,
    beneficiaryBank: null,
    beneficiaryBankAddress: null,
    beneficiaryAccountNumber: null,
    swiftCode: null,
    beneficiaryAddress: null,
    accountRemainderList: [],
  },
});
const formDom = ref(null);
const formOption = reactive({
  readonly: false, //用于控制整个表单是否只读
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  hiddenSubmitBtn: false,
  btnConfig: {
    isNeed: true,
    prop: "accountRemainderList",
    plain: true,
    listTitle: proxy.t("account.accountBalance"),
    listConfig: [
      {
        type: "picker",
        label: proxy.t("account.currency"),
        prop: "currency",
        itemType: "onePicker",
        showPicker: false,
        readonly: false,
        fieldNames: {
          text: "text",
          value: "value",
        },
        data: [],
      },
      {
        type: "input",
        label: proxy.t("account.remainder"),
        prop: "remainder",
        itemType: "number",
      },
    ],
    clickFn: () => {
      if (formData.data.accountRemainderList && formData.data.accountRemainderList.length > 0) {
        formData.data.accountRemainderList.push({
          currency: null,
          remainder: null,
        });
      } else {
        formData.data.accountRemainderList = [
          {
            currency: null,
            remainder: null,
          },
        ];
      }
    },
  },
});
const formConfig = reactive([
  {
    type: "picker",
    label: proxy.t("account.company"),
    prop: "corporationId",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "value",
    },
    data: [],
  },
  {
    type: "input",
    label: proxy.t("account.alias"),
    prop: "alias",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("account.openingBank"),
    prop: "openingBank",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("account.accountName"),
    prop: "name",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("account.accountOpening"),
    prop: "accountOpening",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("account.interbankNumber"),
    prop: "interbankNumber",
    itemType: "text",
  },
  {
    type: "title",
    title: proxy.t("account.foreignExchange"),
  },
  {
    type: "input",
    label: proxy.t("account.beneficiaryName"),
    prop: "beneficiaryName",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("account.beneficiaryBank"),
    prop: "beneficiaryBank",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("account.beneficiaryBankAddress"),
    prop: "beneficiaryBankAddress",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("account.beneficiaryAccountNumber"),
    prop: "beneficiaryAccountNumber",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("account.swiftCode"),
    prop: "swiftCode",
    itemType: "text",
  },
  {
    type: "input",
    label: proxy.t("account.beneficiaryAddress"),
    prop: "beneficiaryAddress",
    itemType: "text",
  },
]);
const rules = {
  corporationId: [{ required: true, message: proxy.t("account.companyMsg") }],
  alias: [{ required: true, message: proxy.t("account.aliasMsg") }],
  openingBank: [{ required: true, message: proxy.t("account.openingBankMsg") }],
  name: [{ required: true, message: proxy.t("account.accountNameMsg") }],
  accountOpening: [{ required: true, message: proxy.t("account.accountOpeningMsg") }],
  currency: [{ required: true, message: proxy.t("account.currencyMsg") }],
  remainder: [{ required: true, message: proxy.t("account.remainderMsg") }],
};
const isRepeat = (arr) => {
  var hash = {};
  for (var i in arr) {
    if (hash[arr[i].currency]) return true;
    hash[arr[i].currency] = true;
  }
  return false;
};
const onSubmit = () => {
  if (formData.data.accountRemainderList && formData.data.accountRemainderList.length > 0) {
    if (isRepeat(formData.data.accountRemainderList)) {
      showFailToast(proxy.t("account.submitMsgTwo"));
    } else {
      proxy.post("/accountManagement/" + route.query.type, formData.data).then(() => {
        showSuccessToast(proxy.t("common.addSuccess"));
        setTimeout(() => {
          history.back();
        }, 500);
      });
    }
  } else {
    showFailToast(proxy.t("account.submitMsgOne"));
  }
};
onMounted(() => {
  if (route.query.id) {
    proxy.post("/accountManagement/detail", { id: route.query.id }).then((res) => {
      formData.data = res.data;
      if (formData.data.accountRemainderList && formData.data.accountRemainderList.length > 0) {
        for (let i = 0; i < formData.data.accountRemainderList.length; i++) {
          let data = formOption.btnConfig.listConfig[0].data.filter((item) => item.value === formData.data.accountRemainderList[i].currency);
          if (data && data.length > 0) {
            formData.data.accountRemainderList[i].currencyName = data[0].text;
          }
        }
      }
    });
  }
});
</script>