n20-common-lib 1.2.43 → 1.3.0

package/src/components/NstcG6Components/DialogForm/src/demo/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="">
+    <el-button @click="visible = true">
+      点我
+    </el-button>
+    <DialogFormCustom
+      :visible="visible"
+      :form-config="formConfig"
+      :rules="rules"
+      @confirm="handleConfirm"
+    />
+  </div>
+</template>
+
+<script>
+import DialogFormCustom from '../main'
+
+export default {
+  components: {
+    DialogFormCustom
+  },
+
+  data() {
+    return {
+      visible: false,
+      formConfig: [[
+        {
+          mold: 'input',
+          name: '姓名',
+          prop: 'prop1'
+        },
+        {
+          mold: 'datepicker',
+          name: '日期',
+          prop: 'prop2'
+        }
+      ]],
+      rules: {
+        prop1: [
+          { required: true, message: '姓名不能为空', trigger: 'blur' }
+        ],
+        prop2: [
+          { required: true, message: '日期不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+
+  methods: {
+    handleConfirm() {
+      this.visible = false
+      return Promise.resolve()
+    }
+  }
+}
+</script>

package/src/components/NstcG6Components/DialogForm/src/main.vue

@@ -0,0 +1,189 @@
+<!--
+  功能：    表单里面的弹框查询
+  作者：    nstc
+  创建时间： 2021-02-04
+-->
+
+<template>
+  <div>
+    <DialogCustom
+        v-model="dialogVisible"
+        v-bind="$attrs"
+        @confirm="handleConfirm"
+        @cancel="handleCancel"
+    >
+      <slot name="before" />
+      <NstcForm
+          ref="dialogForm"
+          v-model="formModel"
+          :reset.sync="reset"
+          :mount-and-query="false"
+          :config="formConfig"
+          :rules="rules"
+          :pureable="pureable"
+          :label-position="labelPosition"
+          :label-width="labelWidth"
+          :show-message="showMessage"
+          :validate-on-rule-change="validateOnRuleChange"
+          :mode="mode"
+      />
+      <slot name="after" />
+    </DialogCustom>
+  </div>
+</template>
+
+<script>
+import DialogCustom from '../../Dialog/src/main'
+import NstcForm from '../../Form/Component'
+
+export default {
+  name: 'DialogFormCustom',
+  components: {
+    DialogCustom,
+    NstcForm
+  },
+
+  inheritAttrs: false,
+
+  model: {
+    prop: 'formModel'
+  },
+
+  props: {
+    formModel: {
+      default: () => ({}),
+      type: Object
+    },
+
+    visible: {
+      type: Boolean,
+      default: false
+    },
+
+    showMessage: {
+      type: Boolean,
+      default: true
+    },
+
+    formConfig: {
+      type: Array,
+      default: () => []
+    },
+
+    rules: {
+      type: Object,
+      default: null
+    },
+
+    labelPosition: {
+      type: String,
+      default: 'right'
+    },
+
+    labelWidth: {
+      type: [String, Number],
+      default: 80
+    },
+
+    resetAfterClose: {
+      type: Boolean,
+      default: true
+    },
+
+    // 是否是纯净模式 (删除 renderable === false 的item.prop对应model的值)
+    pureable: {
+      default: false,
+      type: Boolean
+    },
+
+    validateOnRuleChange: {
+      default: false,
+      type: Boolean
+    },
+
+    mode: {
+      default: 'horizontal',
+      validator: function(val) {
+        return ['horizontal', 'vertical'].includes(val)
+      }
+    }
+  },
+
+  data() {
+    return {
+      reset: false
+    }
+  },
+
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+
+  watch: {
+    formModel: {
+      deep: true,
+      handler(val) {
+        this.$emit('input', val)
+        this.$emit('change', val)
+      }
+    }
+  },
+
+  methods: {
+    async handleConfirm() {
+      try {
+        if (this.rules) {
+          await this.$refs.dialogForm.validate()
+        }
+
+        if (this.$listeners.confirm) {
+          await this.$listeners.confirm(this.formModel) // $listeners.confirm 须返回Promise
+        }
+
+        await this.$nextTick()
+
+        this.handleReset()
+
+        return Promise.resolve()
+      } catch (err) {
+        return Promise.reject(err)
+      }
+    },
+
+    async handleCancel() {
+      try {
+        const model = JSON.parse(JSON.stringify(this.formModel))
+
+        this.$listeners.cancel && await this.$listeners.cancel(model) // $listeners.confirm 须返回Promise
+
+        this.handleReset()
+
+        return Promise.resolve()
+      } catch (err) {
+        return Promise.reject(err)
+      }
+    },
+
+    clearFormValidate() {
+      this.$refs.dialogForm.clearValidate()
+    },
+
+    handleReset() {
+      if (this.resetAfterClose) {
+        this.reset = true
+        this.$nextTick(() => {
+          this.$refs.dialogForm && this.$refs.dialogForm.clearValidate()
+        })
+      }
+    }
+  }
+}
+</script>
+

package/src/components/NstcG6Components/Form/A_DEMO/component/originalForm.vue

@@ -0,0 +1,281 @@
+<template>
+  <div>
+    <el-form
+        ref="registerForm"
+        :model="registerForm"
+        class="nstc-original-element-form"
+    >
+      <a id="account_1" />
+      <nstc-expand-collapse v-model="isCollapseArr[0]">
+        <template v-slot:title>
+          <span>账户基础信息</span>
+        </template>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="开户日期" prop="openAccountDate">
+              <el-date-picker
+                  v-model="registerForm.openAccountDate"
+                  type="date"
+                  placeholder="请选择"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="账号" prop="accountNo">
+              <el-input v-model="registerForm.accountNo" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="币种" prop="currencyNo">
+              <el-select v-model="registerForm.currencyNo" filterable>
+                <el-option
+                    v-for="(item,index) in currencyDropDown"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="户名" prop="accountName">
+              <el-input v-model="registerForm.accountName" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="助记名">
+              <el-input v-model="registerForm.memoryName" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="英文户名">
+              <el-input v-model="registerForm.accountNameInEnglish" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="联网方式">
+              <el-radio-group v-model="registerForm.associateFlag">
+                <el-radio :label="1">银企直联</el-radio>
+                <el-radio :label="2">SWIFT方式</el-radio>
+                <el-radio :label="0">非直连</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="外汇业务类型">
+              <el-radio-group v-model="registerForm.foreignType">
+                <el-radio :label="1">经常项目</el-radio>
+                <el-radio :label="2">资本项目</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="ClableNo">
+              <el-input v-model="registerForm.clableNo" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="IBAN">
+              <el-input v-model="registerForm.iban" placeholder="请输入" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <!-- <el-row>
+                        <el-col :span="12" align="center">
+                            <el-form-item label="联系人">
+                                <el-input v-model="registerForm.clableNo" placeholder="请输入" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12" align="center">
+                            <el-form-item label="联系人电话">
+                                <el-input v-model="registerForm.iban" placeholder="请输入" />
+                            </el-form-item>
+                        </el-col>
+                    </el-row> -->
+      </nstc-expand-collapse>
+
+      <a id="account_2" />
+      <nstc-expand-collapse v-model="isCollapseArr[1]">
+        <template v-slot:title>
+          <span>账户业务信息</span>
+        </template>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="银行账户性质" prop="ctId">
+              <el-select v-model="registerForm.ctId" filterable>
+                <el-option
+                    v-for="(item,index) in AccountTypeToBP"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="现金管理类型" prop="cashManageType">
+              <el-select v-model="registerForm.cashManageType" filterable>
+                <el-option
+                    v-for="(item,index) in AccountNatureToBP"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="关联实体账户" prop="eAccount">
+              <el-select v-model="registerForm.eAccount" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="账户有效期" prop="validDate">
+              <el-date-picker
+                  v-model="registerForm.validDate"
+                  type="daterange"
+                  placeholder="请选择"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="票据账户" prop="isDraftAccount">
+              <el-radio-group v-model="registerForm.isDraftAccount">
+                <el-radio :label="1">是</el-radio>
+                <el-radio :label="0">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="票据账户类型" prop="draftAccountType">
+              <el-select v-model="registerForm.draftAccountType">
+                <el-option label="全部" :value="0" />
+                <el-option label="电票账户" :value="1" />
+                <el-option label="纸票出票账户" :value="2" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="账户性质">
+              <el-select v-model="registerForm.accountType" filterable>
+                <el-option
+                    v-for="(item,index) in accountTypeDb"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="账户类别">
+              <el-select v-model="registerForm.natureId" filterable>
+                <el-option
+                    v-for="(item,index) in accountNatureDb"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="区域">
+              <el-select v-model="registerForm.areaId" filterable>
+                <el-option
+                    v-for="(item,index) in accountAreaDb"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="是否监管账户">
+              <el-radio-group v-model="registerForm.isEscrowAccount">
+                <el-radio :label="1">是</el-radio>
+                <el-radio :label="0">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="账户用途">
+              <el-select v-model="registerForm.usageId" filterable>
+                <el-option
+                    v-for="(item,index) in accountUsageDb"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </nstc-expand-collapse>
+
+    </el-form>
+
+    <!-- 表单提交 -->
+    <div class="account-submit-box">
+      <el-button type="primary" class=" nstc-g6-common-btn-1 nstc-g6-common-btn-size-b">提交</el-button>
+      <el-button class=" nstc-g6-common-btn-1 nstc-g6-common-btn-size-b">保存</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import NstcExpandCollapse from '^/ExpandCollapse/src/main'
+export default {
+  name: "originalForm",
+  components: {
+    NstcExpandCollapse
+  },
+  data() {
+    return {
+      registerForm: {},
+      isCollapseArr: [false, false],
+      AccountConnectType: [],
+      AssociateFlagEnum: [],
+      AccountState: [],
+      FixedCostType: [],
+      ForeignTypeEnum: [],
+      FreezeTypeEnum: [],
+      FundFreezeState: [],
+      currencyDropDown: [],
+      unitDropDown: [],
+      bankDropDown: [],
+      branchBankDropDown: [],
+      accountNatureDb: [],
+      accountTypeDb: [],
+      accountAreaDb: [],
+      accountUsageDb: [],
+      AccountTypeToBP: [],
+      AccountNatureToBP: [],
+      DraftAccountTypeEnum: []
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>