gcs-ui-lib 1.1.433

package/packages/DynamicForm/src/demo/index.vue

@@ -0,0 +1,486 @@
+<template>
+  <div>
+    <h2> DynamicForm demo</h2>
+    <NstcDynamicForm
+        ref="NstcDynamicForm"
+        v-if="dynamicData.pageId"
+        :key="dynamicData.pageId"
+        :get-dynamic-forms-data="dynamicData"
+        :dynamicData.sync="setDynamicData"
+        :formItemKey.sync="formItemKey"
+        :formGroupKey.sync="formGroupKey"
+        :detailData="detailData"
+        :uploadParam="uploadParam"
+        :formAttrs="{
+          size: 'small',
+          class: 'label-width-16em',
+          labelWidth: '16em',
+        }"
+        v-model="formData"
+        :showButtons="showBottomBtns"
+        :localConfig="localConfigT"
+        :isShowObject.sync="isShowObject"
+        :isEditableObject.sync="isEditableObject"
+        :initPageDone="initPageDone"
+        :needDIY="true"
+        :showButton="true"
+        @changeFormData="changeFormData"
+    >
+      <!-- 付款账号 -->
+      <template slot="payAccountNo" slot-scope="scope">
+        <el-input disabled class="input-w"/>
+      </template>
+
+      <!-- 收款单位 -->
+      <template slot="recCltName" slot-scope="scope">
+      </template>
+      <!-- 收款账号 -->
+      <template slot="recAccountNo" slot-scope="scope">
+        <el-input disabled class="input-w"/>
+      </template>
+      <!-- 附件地址 -->
+      <template slot="attachmentAddress" slot-scope="scope">
+        <UrlLinkInput v-model="formData[scope.groupProp][scope.prop]"/>
+      </template>
+      <!-- 开户行地区-->
+      <template slot="recRegNo" slot-scope="scope">
+        <CascaderArea
+            :props="{ emitPath: false }"
+            v-model="formData.receiverInfo.recRegNo"
+            :is-urban="true"
+            :disabled="storeUnEditFields.includes('recRegNo')"
+            ref="recRegNo"
+            class="input-w"
+            @change="(val) => changerRecRegNo(val, scope)"
+        />
+      </template>
+      <!-- 付款金额 -->
+      <template slot="amount" slot-scope="scope">
+        <InputNumber
+            :max="9999999999999.99"
+            :min="0.0"
+            :is-clearable="true"
+            v-model="formData[scope.groupProp][scope.prop]"
+            @change="changeAmount"
+            :placeholder="'请输入' | $l"
+            :disabled="unEditFields.includes('amount')"
+        />
+        <div
+            style="position: absolute; line-height: 24px; color: red"
+            v-show="!isNaN(parseFloat(formData.transInfo.amount))"
+        >
+          {{ formData.transInfo.amount | amountFormat }}
+        </div>
+      </template>
+    </NstcDynamicForm>
+  </div>
+</template>
+<script>
+import {axios, InputNumber, CascaderArea} from "n20-common-lib";
+import NstcDynamicForm from "../main.vue";
+import {changeFormDataDoc, localConfig} from "../formConfig";
+import UrlLinkInput from "../components/urlLinkInput.vue";
+
+export default {
+  name: "index",
+  components: {
+    UrlLinkInput,
+    NstcDynamicForm,
+    InputNumber,
+    CascaderArea
+  },
+  data(vm) {
+    return {
+      pageType: 'BANK',
+      unEditFields: [],
+      storeUnEditFields: [], // 查询详情接口返回的不可编辑字段
+      isEditableObject: {},
+      isShowObject: {},
+      formItemKey: {},
+      formGroupKey: {},
+      localConfigT: localConfig,
+      dynamicData: {
+        businessClassNo: "",
+        moduleNo: "",
+        pageNo: ``,
+        pageId: false,
+      },
+      setDynamicData: {
+        units: [],
+      },
+      excludeCountries: [], // 排除的国家
+      formData: {
+        basicInfo: {
+          singleFlag: "1",
+        },
+        transInfo: {},
+        isNewOrder: 0,
+      },
+      showBottomBtns: [
+        true,
+        false,
+        true,
+      ],
+      uploadParam: {
+        syscode: "060000000",
+        appno: "061400000",
+        bussValue: "070101001",
+        bussId: "", // 业务id
+      },
+      detailData: {
+        basicInfo: null,
+        payerInfo: null,
+        receiverInfo: null,
+        otherInfo: null,
+        transInfo: null,
+        businessInfo: null,
+      },
+    }
+  },
+  computed: {
+    variable() {
+      let obj = {
+        gdtLedgerTypeTypeCode: "", // 当“关联业务”选择“融资业务”: contexecTypeDown;当‘关联业务’选择‘内部借款’时: lms.ledgerType
+        payCountry: "",
+        bankNo: "",
+        recBankNo: "",
+        currencyNo: "",
+        recCountry: "CHN",
+        countryNo: "",
+        payGateWayType: "",
+        legalRequiremnt: "", // 香港：ptms.HK.legalRequirement；越南：ptms.VN.legalRequirement
+      };
+      obj.payCountry = this.formData?.payerInfo?.payCountry || "";
+      obj.bankNo = this.formData?.payerInfo?.payBankNo || "";
+      obj.recBankNo = this.formData?.receiverInfo?.recBankNo || "";
+      obj.currencyNo = this.formData?.transInfo?.currencyNo || "";
+      obj.recCountry = this.formData?.basicInfo?.recCountry || "";
+      obj.countryNo = this.formData?.payerInfo?.payCountry || "";
+      obj.gdtLedgerTypeTypeCode = this.formData?.businessInfo?.relateBusinessType === "GDT_BUSINESS"
+          ? "contexecTypeDown"
+          : "lms.ledgerType";
+      obj.legalRequiremnt =
+          this.formData?.payerInfo?.payCountry === "HK"
+              ? "ptms.HK.legalRequirement"
+              : "ptms.VN.legalRequirement";
+      if (this.formData?.basicInfo?.gdtLedgerType) {
+        this.formItemKey.businessInfo.gdtLedgerType = obj.gdtLedgerTypeTypeCode;
+        this.formItemKey.otherInfo.usage =
+            obj.bankNo + obj.recCountry + obj.countryNo;
+        this.formItemKey.otherInfo.legalRequiremnt = obj.legalRequiremnt;
+      }
+      // --bug=1445076 --user=岳红 【A01-mysql】【付款】【中行香港付款】：本机构付款，失败重发页面，“付款目的”下拉无值，不正确。 https://www.tapd.cn/58791002/s/9452579
+      if (this.formData?.payerInfo?.payBankNo && this.formItemKey?.otherInfo?.usage) {
+        this.formItemKey.otherInfo.usage++;
+      }
+      return obj;
+    },
+  },
+  mounted() {
+    this.getDynamicFormConfig()
+  },
+
+  methods: {
+
+    async initPageDone() {
+      this.isShowObject.basicInfo.attachmentAddress = false;
+      if (this.$route.query.orderId) {
+        this.isShowObject.payerInfo.cltNo = !!this.basicsFormData.isNewOrder;
+      } else {
+        this.isShowObject.payerInfo.cltNo = this.$route.query.type === "requestFormAdd";
+      }
+      if (!this.showBusinessGroup) {
+        this.$nextTick(() => {
+          this.$set(this.$refs["NstcDynamicForm"].isShowGroupObjectT, "businessInfo", 0);
+        });
+      }
+      this.deleteOtherData();
+      if (this.$route.query.refundAmount) {
+        this.$set(
+            this.formData.transInfo,
+            "amount",
+            parseFloat(this.$route.query.refundAmount)
+        );
+      }
+      if (this.$route.query.type === "mergePayment") {
+        this.setOriginalData();
+        this.$set(
+            this.formData.transInfo,
+            "currencyName",
+            this._originalData.transInfo.currencyName
+        );
+        let amount = this.mergeInfo.reduce((pre, cur) => {
+          return floatAdd(parseFloat(pre), parseFloat(cur.amount));
+        }, 0);
+        this.$set(
+            this.formData.transInfo,
+            "amount",
+            parseFloat(amount.toFixed(2))
+        );
+        if (
+            this.$route.query.type === "mergePayment" &&
+            (this.paymentTemplate == "THIRD_PARTY" ||
+                this._originalData.paymentTemplate == "PLATFORM")
+        ) {
+          this.$set(
+              this.formData.payerInfo,
+              "payCurrencyName",
+              this._originalData.payerInfo.payCurrencyName
+          );
+          this.$set(
+              this.formData.payerInfo,
+              "payCurrencyNo",
+              this._originalData.payerInfo.payCurrencyNo
+          );
+          this.$set(
+              this.formData.payerInfo,
+              "associateFlag",
+              this._originalData.payerInfo.associateFlag
+          );
+        }
+
+        if (this.mergeInfo?.orderBusinessInfoCommonDTOs) {
+          this.$set(
+              this.formData.businessInfo,
+              "orderBusinessInfoCommonDTOs",
+              this.mergeInfo.orderBusinessInfoCommonDTOs
+          );
+        }
+      }
+
+      this.getPamentWay();
+      if (this.formData?.otherInfo?.usage) {
+        this.formItemKey.otherInfo.usage++;
+      }
+      await this.$nextTick();
+      // 收款单位国家的值，自动取‘汇入国家’，可修改
+      if (this.isShowObject?.receiverInfo?.receiverCountry) {
+        this.formData.receiverInfo.receiverCountry =
+            this.formData.basicInfo.recCountry;
+        this.formData.receiverInfo.receiverCountryName =
+            this.formData.basicInfo.recCountryName;
+      }
+      // 招商银行境内外币、跨境支付：当费用承担方的值为‘付款人、共同’时，校验手续费支出户必填。默认手续费支出户为付款账户，并可修改。
+      if (
+          this.isShowObject?.otherInfo?.costBear &&
+          this.formData.payerInfo.payBankNo == "06"
+      ) {
+        const costBear = this.formData.otherInfo.costBear;
+        const payAccountNo = this.formData.payerInfo.payAccountNo;
+        if ((costBear == "1" || costBear == "3") && payAccountNo) {
+          this.formData.otherInfo.feePayAccountNo = payAccountNo.includes("/")
+              ? payAccountNo.split("/")[0]
+              : payAccountNo;
+        }
+      }
+      if (this.storeUnEditFields && this.storeUnEditFields.length > 0) {
+        this.storeUnEditFields.forEach((prop) => {
+          Object.keys(this.isEditableObject).forEach((key) => {
+            if (this.isEditableObject[key].hasOwnProperty(prop)) {
+              this.isEditableObject[key][prop] = 0;
+            }
+          });
+        });
+      }
+      this.$refs["NstcDynamicForm"]?.$refs["dynamicForms"].clearValidate();
+      if (this.applyId || this.isEditableObject.declareInfo) {
+        this.isEditableObject.basicInfo.singleFlag = 0;
+        if (this.isEditableObject.declareInfo) {
+          this.isEditableObject.declareInfo.transCurrencyNoOne = 0;
+          this.isEditableObject.declareInfo.transCurrencyNoTwo = 0;
+        }
+      }
+      if (
+          !["G6", "PTMS", "", undefined, null].includes(
+              this.$route.query.payChannel
+          ) ||
+          (!["G6", "PTMS", "", undefined, null].includes(
+                  this.formData.basicInfo.payChannel
+              ) &&
+              this.$route.query.paymentTemplate != "MIXED")
+      ) {
+        this.isShowObject.basicInfo.isAllowChangeSettlementTool = true;
+        this.isEditableObject.basicInfo.isAllowChangeSettlementTool = false;
+        this.isShowObject.basicInfo.specialPayment = true;
+      }
+      if (["mergePayment"].includes(this.type)) {
+        this.isShowObject.basicInfo.isAllowChangeSettlementTool = true;
+        this.isEditableObject.basicInfo.isAllowChangeSettlementTool = false;
+        this.isShowObject.basicInfo.specialPayment = true;
+      }
+      if (
+          this.$route.query.paymentTemplate == "MIXED" ||
+          this.basicsFormData.baseForm?.isAllowChangeSettlementTool
+      ) {
+        this.formData.basicInfo.isAllowChangeSettlementTool = 1;
+        this.isEditableObject.basicInfo.settlementTools = 1;
+        this.isEditableObject.basicInfo.payGateWayType = 1;
+      }
+      if (
+          this.isShowObject.basicInfo.isAllowChangeSettlementTool &&
+          this.formData.basicInfo?.isAllowChangeSettlementTool &&
+          !this.$route.query.typeCode //待处理不可变更支付工具。
+      ) {
+        this.isEditableObject.basicInfo.settlementTools = 1;
+        !this.showBusinessGroup &&
+        (this.isEditableObject.basicInfo.payGateWayType = 0);
+      } else {
+        this.isEditableObject.basicInfo.settlementTools = 0;
+      }
+      if (this.formItemKey.otherInfo) {
+        if ("reserved1" in this.formItemKey.otherInfo) {
+          this.formItemKey.otherInfo.reserved1++;
+        } else {
+          this.formItemKey.otherInfo.reserved1 = 1;
+        }
+        if ("bpPaymentType" in this.formItemKey.otherInfo) {
+          this.formItemKey.otherInfo.bpPaymentType++;
+        } else {
+          this.formItemKey.otherInfo.bpPaymentType = 1;
+        }
+      }
+      //付款不需要展示‘变更支付工具’；
+      this.isShowObject.basicInfo.isAllowChangeSettlementTool = false;
+      this.formItemKey.receiverInfo.recBranchBankNo++;
+      this.getPageOrigin = "";
+      // await this.$refs["NstcDynamicForm"].getFormData();
+      this.setIsConnectBankDis();
+      if (this.pageType != "FUND") {
+        this.isMultipleBusiness = null;
+        this.getPublicParamsFn();
+      }
+      if (this.formData?.basicInfo?.singleFlag == 2) {
+        this.isEditableObject.transInfo.currencyNo = false;
+        this.formItemKey.transInfo.currencyNo++;
+      }
+      if (this.formData?.payerInfo?.paySwiftCode) return;
+      if (this.setDynamicData.units.length > 0) {
+        let index = this.setDynamicData.units[1].elements.findIndex(
+            (item) => item.prop == "payerInfoExt"
+        );
+        if (index == -1) return;
+        let psfc = this.setDynamicData.units[1].elements[index]?.elements?.find(
+            (item) => item.prop == "paySwiftCode"
+        );
+
+        if (psfc?.defaultValue) {
+          this.formData.payerInfo.paySwiftCode = psfc.defaultValue;
+        } else {
+          this.formData.payerInfo.paySwiftCode = "";
+        }
+        this.formItemKey.payerInfo.paySwiftCode++;
+      }
+      //【【流程测试】【融资】【付款】【还款申请】还款申请发送到付款，单笔/批量，应该默认置灰】https://www.tapd.cn/58791002/bugtrace/bugs/view?bug_id=1158791002001418175
+      if (this.formData.basicInfo.payChannel == "GDT") {
+        this.isEditableObject.basicInfo.singleFlag = 0;
+        this.formItemKey.basicInfo.singleFlag++;
+      }
+      if (!this.$showManageFramework) {
+        this.isShowObject.businessInfo.manageUnitNo = false;
+      }
+
+    },
+    //更新付款方式下拉值
+    getPamentWay() {
+      let payCountry =
+          this.formData?.payerInfo?.payCountry ||
+          this.detailData?.payerInfo?.payCountry ||
+          "";
+      let payBankNo =
+          this.formData?.payerInfo?.payBankNo ||
+          this.detailData?.payerInfo?.payBankNo ||
+          "";
+      let recCountry =
+          this.formData?.basicInfo?.recCountry ||
+          this.detailData?.basicInfo?.recCountry ||
+          "";
+      let currencyNo =
+          this.formData?.transInfo?.currencyNo ||
+          this.detailData?.transInfo?.currencyNo ||
+          "";
+      if (!payBankNo || !recCountry || !currencyNo || !payCountry) {
+        return;
+      }
+      this.formItemKey.payerInfo.paymentWay++;
+      // 判断对应的新付款方式中是否包含上一次已选的付款方式，若包含，付款方式不变；若不包含，付款方式清空
+      if (!this.formData.payerInfo.paymentWay) return;
+      if (
+          !(
+              this.applicableCountries.length == 0 ||
+              this.applicableCountries.includes("ALL")
+          )
+      ) {
+        if (
+            !this.applicableCountries.includes(this.formData.basicInfo.recCountry)
+        ) {
+          this.formData.payerInfo.paymentWay = "";
+          this.formData.payerInfo.paymentWayName = "";
+        }
+      }
+      if (
+          !(
+              this.applicableCurrencyNos.length == 0 ||
+              this.applicableCurrencyNos.includes("ALL")
+          )
+      ) {
+        if (
+            !this.applicableCurrencyNos.includes(
+                this.formData.transInfo.currencyNo
+            )
+        ) {
+          this.formData.payerInfo.paymentWay = "";
+          this.formData.payerInfo.paymentWayName = "";
+        }
+      }
+      if (
+          this.excludeCountries.includes(this.formData.basicInfo.recCountry) ||
+          this.excludeCurrencyNos.includes(this.formData.transInfo.currencyNo)
+      ) {
+        this.formData.payerInfo.paymentWay = "";
+        this.formData.payerInfo.paymentWayName = "";
+      }
+    },
+    deleteOtherData() {
+      console.log(this.setDynamicData, "this.setDynamicData");
+      let temp = this.setDynamicData.units.map((item) => item.prop);
+      for (let i in this.formData) {
+        if (!temp.includes(i)) {
+          delete this.formData[i];
+        }
+      }
+    },
+    async changeFormData({val, prop, type, item, group}) {
+      changeFormDataDoc(this, val, prop, item);
+    },
+    async changerRecRegNo(value, scope) {
+      await this.$nextTick();
+      if (!this.$refs["recRegNo"]) return;
+      let res = await this.$refs["recRegNo"].$refs["el-cascader"].getCheckedNodes();
+      this.$set(this.formData.receiverInfo, "recRegName", res[0]?.pathLabels.join("") || "");
+      this.formData.receiverInfo.recRegNo &&
+      this.$refs["NstcDynamicForm"]?.$refs["dynamicForms"].clearValidate();
+    },
+    changeAmount() {
+      if (this.isShowObject.declareInfo && this.formData.declareInfo) {
+        this.formData.declareInfo.transAmountOne = this.formData.transInfo.amount;
+      }
+    },
+    getDynamicFormConfig() {
+      const params = {
+        currencyNo: "USD", //币种
+        payBankNo: "", // 付方开户行
+        payCountry: "CHN", //付款国家
+        payWay: "DEPOSIT", //付款类型
+        recCountry: "CHN", //收款国家
+      }
+      axios.get('/api/nstc-ptms/1.0/payment/bank/route/page', params).then(res => {
+        this.dynamicData = {...this.dynamicData, ...res.data};
+
+        this.setDynamicData = res.data;
+        this.dynamicData.pageId = true;
+      })
+    }
+  }
+}
+</script>
+