|
|
@@ -0,0 +1,254 @@
|
|
|
+<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>
|
