贷款发放确认页面开发

.vf/sources/4001.vf

+vform@1.3.2 jiangweijia@csii.com.cn 2023-08-29 11:32:05
+{"widgetList":[{"key":91928,"type":"card","category":"container","icon":"card","sizeList":[{"label":"default","value":""},{"label":"small","value":"small"}],"widgetList":[{"key":85213,"type":"form-block","category":"container","icon":"form-block","widgetList":[{"key":93329,"type":"grid","category":"container","icon":"grid","widgetList":[{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"key":93791,"type":"select","icon":"select-field","formItemFlag":true,"sizeList":[{"label":"default","value":""},{"label":"large","value":"large"},{"label":"small","value":"small"}],"options":{"name":"select19089","placeholder":"","size":"default","label":"启动机构","isAloneWidthSetting":false,"labelWidth":0,"wrapperWidth":0,"labelAlign":"left","disabled":false,"hidden":false,"readonly":false,"required":false,"formItemField":"activateBrn","verify":[],"verifyTrigger":"blur","allowClear":true,"selectListName":"","selectMode":"default","beforeSlot":"","maxLength":12,"optionItems":[{"label":"select 1","value":1},{"label":"select 2","value":2},{"label":"select 3","value":3}],"onChange":"","onPressEnter":"","onFocus":"","onBlur":"","defaultValue":"","columnWidth":"200px","customClass":[]},"id":"select19089"}],"options":{"name":"gridCol52478","offset":0,"pull":0,"push":0,"span":8,"xs":12,"sm":12,"md":12,"lg":12,"xl":12,"xxl":12,"customClass":[]},"id":"grid-col-52478"},{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"key":61754,"type":"input","icon":"text-field","formItemFlag":true,"sizeList":[{"label":"default","value":"default"},{"label":"large","value":"large"},{"label":"small","value":"small"}],"options":{"name":"input117403","label":"业务编号","isAloneWidthSetting":false,"labelWidth":0,"wrapperWidth":0,"labelAlign":"left","disabled":false,"hidden":false,"readonly":false,"required":false,"formItemField":"bizNo","verify":[],"verifyTrigger":"blur","allowClear":true,"maxLength":12,"placeholder":"","size":"default","customClass":[],"beforeSlot":"","afterSlot":"","onChange":"","onPressEnter":""},"id":"input117403"}],"options":{"name":"gridCol25192","offset":0,"pull":0,"push":0,"span":8,"xs":12,"sm":12,"md":12,"lg":12,"xl":12,"xxl":12,"customClass":[]},"id":"grid-col-25192"}],"typeList":[{"label":"标准","value":"normal"},{"label":"flex","value":"flex"}],"options":{"name":"grid29899","gutter":0,"rowGutter":12,"columnGutter":0,"customClass":[],"componentType":"normal","justify":"start","align":"middle"},"id":"grid29899"}],"options":{"blockName":"form","name":"formblock85142"},"id":"formblock85142"},{"key":53395,"type":"flex-box","category":"container","icon":"flex-box","widgetList":[{"key":58989,"type":"button","icon":"button","formItemFlag":false,"typeList":[{"label":"主要","value":"primary"},{"label":"默认","value":""},{"label":"虚线","value":"dashed"},{"label":"危险","value":"danger"},{"label":"链接","value":"link"}],"sizeList":[{"label":"large","value":"large"},{"label":"默认","value":""},{"label":"small","value":"small"}],"functionList":[{"label":"普通按钮","value":"default"},{"label":"提交按钮","value":"submit"},{"label":"重置按钮","value":"cancel"}],"displayStyle":"block","options":{"name":"button27913","label":"查询","size":"","ghost":false,"componentType":"primary","shape":"","icon":"","customClass":[],"functionType":"submit","beforeSlot":"","afterSlot":"","onClick":"this.$submit(params => {\n    this.$remote({\n        url:\"trade/1001.do\",\n        params:{ \n            ...params,\n        },\n        successFn:(response)=> {\n            /*成功回调函数 (数据存储在response)*/\n        },\n        failedFn:(error)=> {\n            console.log(error);\n        },\n        conf:{\n            timeout:1000\n        }\n    });\n});"},"id":"button27913"},{"key":58989,"type":"button","icon":"button","formItemFlag":false,"typeList":[{"label":"主要","value":"primary"},{"label":"默认","value":""},{"label":"虚线","value":"dashed"},{"label":"危险","value":"danger"},{"label":"链接","value":"link"}],"sizeList":[{"label":"large","value":"large"},{"label":"默认","value":""},{"label":"small","value":"small"}],"functionList":[{"label":"普通按钮","value":"default"},{"label":"提交按钮","value":"submit"},{"label":"重置按钮","value":"cancel"}],"displayStyle":"block","options":{"name":"button70657","label":"重置","size":"","ghost":false,"componentType":"","shape":"","icon":"","customClass":[],"functionType":"cancel","beforeSlot":"","afterSlot":"","onClick":"this.$reset();"},"id":"button70657"}],"options":{"name":"flexbox114954","customClass":[],"justify":"center","align":"middle","space":8},"id":"flexbox114954"}],"options":{"extraSlot":[],"name":"card93308","size":"default","title":"客户查询条件","bordered":true,"isConcise":false,"isInner":false,"hoverable":false,"buttonMargin":5,"customClass":[]},"id":"card93308"},{"key":91928,"type":"card","category":"container","icon":"card","sizeList":[{"label":"default","value":""},{"label":"small","value":"small"}],"widgetList":[{"key":56677,"type":"table","category":"container","icon":"table","rows":[{"cols":[{"type":"table-cell","category":"container","icon":"table-cell","internal":true,"widgetList":[{"key":95527,"type":"static-text","icon":"static-text","formItemFlag":false,"options":{"name":"statictext59329","columnWidth":"200px","textContent":"${text}","customClass":[],"label":"static-text","fromTable":true},"id":"statictext59329"}],"merged":false,"options":{"name":"table-cell-85812","cellWidth":"","colspan":1,"rowspan":1,"cellTittle":"客户编号","vModel":"creditsCustNo","cellAlign":"left","cellFixed":"","customClass":[]},"id":"table-cell-85812"},{"type":"table-cell","category":"container","icon":"table-cell","internal":true,"widgetList":[{"key":45056,"type":"static-text","icon":"static-text","formItemFlag":false,"options":{"name":"statictext32377","columnWidth":"200px","textContent":"${text}","customClass":[],"label":"static-text","fromTable":true},"id":"statictext32377"}],"merged":false,"options":{"name":"table-cell-29754","cellWidth":"","colspan":1,"rowspan":1,"cellTittle":"客户名称","vModel":"custNm","cellAlign":"left","cellFixed":"","customClass":[]},"id":"table-cell-29754"},{"type":"table-cell","category":"container","icon":"table-cell","internal":true,"widgetList":[{"key":45056,"type":"static-text","icon":"static-text","formItemFlag":false,"options":{"name":"statictext81916","columnWidth":"200px","textContent":"${text}","customClass":"","label":"static-text","fromTable":true},"id":"statictext81916"}],"merged":false,"options":{"name":"table-cell-25407","cellWidth":"","colspan":1,"rowspan":1,"cellTittle":"组织机构代码","vModel":"orgBrnCd","cellAlign":"left","cellFixed":"","customClass":""},"id":"table-cell-25407"},{"type":"table-cell","category":"container","icon":"table-cell","internal":true,"widgetList":[{"key":45056,"type":"static-text","icon":"static-text","formItemFlag":false,"options":{"name":"statictext55541","columnWidth":"200px","textContent":"${text}","customClass":"","label":"static-text","fromTable":true},"id":"statictext55541"}],"merged":false,"options":{"name":"table-cell-80528","cellWidth":"","colspan":1,"rowspan":1,"cellTittle":"贷款卡号","vModel":"lnCardNo","cellAlign":"left","cellFixed":"","customClass":""},"id":"table-cell-80528"},{"type":"table-cell","category":"container","icon":"table-cell","internal":true,"widgetList":[{"key":45056,"type":"static-text","icon":"static-text","formItemFlag":false,"options":{"name":"statictext22012","columnWidth":"200px","textContent":"${text}","customClass":"","label":"static-text","fromTable":true},"id":"statictext22012"}],"merged":false,"options":{"name":"table-cell-31542","cellWidth":"","colspan":1,"rowspan":1,"cellTittle":"客户性质","vModel":"custProperty","cellAlign":"left","cellFixed":"","customClass":[]},"id":"table-cell-31542"},{"type":"table-cell","category":"container","icon":"table-cell","internal":true,"widgetList":[{"key":45056,"type":"static-text","icon":"static-text","formItemFlag":false,"options":{"name":"statictext61354","columnWidth":"200px","textContent":"${text}","customClass":"","label":"static-text","fromTable":true},"id":"statictext61354"}],"merged":false,"options":{"name":"table-cell-76396","cellWidth":"","colspan":1,"rowspan":1,"cellTittle":"客户经理名称","vModel":"custMgrNm","cellAlign":"left","cellFixed":"","customClass":""},"id":"table-cell-76396"},{"type":"table-cell","category":"container","icon":"table-cell","internal":true,"widgetList":[{"key":45056,"type":"static-text","icon":"static-text","formItemFlag":false,"options":{"name":"statictext29409","columnWidth":"200px","textContent":"${text}","customClass":"","label":"static-text","fromTable":true},"id":"statictext29409"}],"merged":false,"options":{"name":"table-cell-22088","cellWidth":"","colspan":1,"rowspan":1,"cellTittle":"上一处理人","vModel":"lastOneProcPsn","cellAlign":"left","cellFixed":"","customClass":[]},"id":"table-cell-22088"},{"type":"table-cell","category":"container","icon":"table-cell","internal":true,"widgetList":[{"key":45056,"type":"static-text","icon":"static-text","formItemFlag":false,"options":{"name":"statictext41652","columnWidth":"200px","textContent":"${text}","customClass":[],"label":"static-text","fromTable":true},"id":"statictext41652"}],"merged":false,"options":{"name":"table-cell-80764","cellWidth":"","colspan":1,"rowspan":1,"cellTittle":"流程启动者","vModel":"flowNoFldNm","cellAlign":"left","cellFixed":"","customClass":""},"id":"table-cell-80764"},{"type":"table-cell","category":"container","icon":"table-cell","internal":true,"widgetList":[{"key":100738,"type":"static-text","icon":"static-text","formItemFlag":false,"options":{"name":"statictext58733","columnWidth":"200px","textContent":"${text}","customClass":[],"label":"static-text"},"id":"statictext58733"}],"merged":false,"options":{"name":"table-cell-53215","cellWidth":"","colspan":1,"rowspan":1,"cellTittle":"处理步骤","vModel":"procStepNo","cellAlign":"left","cellFixed":"","customClass":[]},"id":"table-cell-53215"},{"type":"table-cell","category":"container","icon":"table-cell","internal":true,"widgetList":[{"key":100738,"type":"static-text","icon":"static-text","formItemFlag":false,"options":{"name":"statictext75804","columnWidth":"200px","textContent":"${text}","customClass":[],"label":"static-text"},"id":"statictext75804"}],"merged":false,"options":{"name":"table-cell-99179","cellWidth":"","colspan":1,"rowspan":1,"cellTittle":"发起时间","vModel":"initiateTm","cellAlign":"left","cellFixed":"","customClass":[]},"id":"table-cell-99179"},{"type":"table-cell","category":"container","icon":"table-cell","internal":true,"widgetList":[{"key":100738,"type":"static-text","icon":"static-text","formItemFlag":false,"options":{"name":"statictext59020","columnWidth":"200px","textContent":"${text}","customClass":[],"label":"static-text"},"id":"statictext59020"}],"merged":false,"options":{"name":"table-cell-97439","cellWidth":"","colspan":1,"rowspan":1,"cellTittle":"最后处理时间","vModel":"lastProcTm","cellAlign":"left","cellFixed":"","customClass":""},"id":"table-cell-97439"}],"id":"table-row-95770","merged":false}],"options":{"name":"table67369","hidden":false,"customClass":[],"operationWidth":"","needPaging":true,"vModel":"flist1","tableSelectType":"","totalNumber":"","pagingCurrent":"","pagingPageSize":"","tablePostUrl":"1001.do","operationBtns":[{"btnName":"确认信息","showType":"text","svgName":"","customClass":"","code":"alert(1)","id":"table_btn_43474","type":"custom"}],"headerBtns":[],"tableTittle":""},"id":"table67369"}],"options":{"extraSlot":[],"name":"card96595","size":"default","title":"","bordered":true,"isConcise":true,"isInner":false,"hoverable":false,"buttonMargin":5,"customClass":[]},"id":"card96595"}],"formConfig":{"cName":"对公客户","cCode":"4001","modelName":"formData","labelAlign":"left","labelCol":6,"wrapperCol":18,"globalVariable":[],"refName":"vForm","rulesName":"rules","size":"","cssCode":"","customClass":[],"functions":[],"layoutType":"PC","jsonVersion":3,"enum":[],"filters":[],"onFormMounted":"this.$submit(params => {\n    this.$remote({\n        url:\"1001.do\",\n        params:{ \n            ...params,\n        },\n        successFn:(response)=> {\n            /*成功回调函数 (数据存储在response)*/\n           this.params.flist1 = response.data || []\n        },\n        failedFn:(error)=> {\n            console.log(error);\n        },\n        conf:{\n            timeout:1000\n        }\n    });\n});","onFormDataChange":"","onFormCreated":"","labelWidth":150,"labelPosition":"left","onFormValidate":"","wapperCol":14}}
\ No newline at end of file

src/views/trades/4001/index.js

+import './index.less'
+import { Icon } from '@iconify/vue2'
+let _that
+export default {
+  cName: '对公客户',
+  cCode: '4001',
+  beforeRouteLeave(to, from, next) {
+    next()
+  },
+  beforeRouteEnter(to, from, next) {
+    const _autorun = to.params._autorun
+    next((vm) => {
+      _autorun && _autorun(vm)
+      from && (vm.$from = from.name)
+    })
+  },
+  components: {
+    Icon
+  },
+  filters: {},
+  props: {},
+  data() {
+    return {
+      params: { flist1: [], form: { activateBrn: '', bizNo: '' } },
+      options: {},
+      table: {
+        flist1: {
+          options: {
+            rowKey: (record, index) => {
+              return index
+            }
+          },
+
+          pagination: {
+            current: 1,
+            pageSize: 10,
+            total: 0,
+            showSizeChanger: true,
+            showQuickJumper: true,
+            pageSizeOptions: ['10', '20', '50', '100'],
+            showTotal: (total) => `共 ${total} 条`,
+            onChange: this.handlePageChange_table67369,
+            onShowSizeChange: this.handlePageChange_table67369
+          }
+        }
+      },
+      enums: [],
+      result: {},
+      customData: {},
+      stepField: []
+    }
+  },
+  computed: {},
+  watch: {},
+  methods: {
+    // ----------------- 系统自带方法，严禁修改 -----------------
+    // 获取枚举
+    async $getOptions() {
+      const options = await this.$queryEnum(this.enums.join(';'))
+      Object.keys(options).forEach((key) => {
+        if (options[key] !== null && typeof options[key] === 'object') {
+          this.options[key] = Object.entries(options[key]).map(([value, label]) => ({
+            value,
+            label
+          }))
+        }
+      })
+    },
+    // 提交表单
+    $submit(callback) {
+      this.$refs.form.validate((state, data) => state && callback && callback(this.params))
+    },
+    // 重置表单
+    $reset() {
+      this.$refs.form.resetFields()
+    },
+    // 清除表单验证
+    $clearValidate(props) {
+      this.$refs.form.clearValidate(props)
+    },
+    // 跳转页面
+    $go(code, callback, replace = false) {
+      this.$router.push({
+        name: code,
+        params: {
+          _autorun: callback,
+          _replace: replace
+        }
+      })
+    },
+    // 返回上一页
+    $back(callback) {
+      if (!this.$from) return
+      this.$go(this.$from, callback, true)
+    },
+    // ----------------- 表格数据请求、分页、按钮方法 -----------------------------
+
+    async handlePageChange_table67369(current, pageSize) {
+      this.table.flist1.pagination.current = current
+      this.table.flist1.pagination.pageSize = pageSize
+      this.$submit((values) => {
+        this.updateTable_table67369(values)
+      })
+    },
+    async updateTable_table67369(values) {
+      let pagination = this.table.flist1.pagination
+      let params = {
+        ...values,
+        current: String(pagination.current),
+        pageSize: String(pagination.pageSize)
+      }
+      this.$remote({
+        url: '1001.do',
+        params,
+        successFn: (response) => {
+          this.table.flist1.pagination.total = response.total
+          this.params.flist1 = response.flist1
+        },
+        failedFn: (error) => {
+          console.log(error)
+        },
+        conf: {
+          timeout: 1000
+        }
+      })
+    },
+
+    // render table row buttn
+
+    async table_btn_43474(value) {
+      alert(1)
+    },
+
+    // ----------------- 用户自定义方法 -----------------------------
+    async button27913_onClick() {
+      this.$submit((params) => {
+        this.$remote({
+          url: 'trade/1001.do',
+          params: {
+            ...params
+          },
+          successFn: (response) => {
+            /*成功回调函数 (数据存储在response)*/
+          },
+          failedFn: (error) => {
+            console.log(error)
+          },
+          conf: {
+            timeout: 1000
+          }
+        })
+      })
+    },
+    async button70657_onClick() {
+      this.$reset()
+    }
+  },
+  created() {
+    _that = this
+  },
+  mounted() {
+    this.$getOptions()
+    this.$submit((params) => {
+      this.$remote({
+        url: '1001.do',
+        params: {
+          ...params
+        },
+        successFn: (response) => {
+          /*成功回调函数 (数据存储在response)*/
+          this.params.flist1 = response.data || []
+        },
+        failedFn: (error) => {
+          console.log(error)
+        },
+        conf: {
+          timeout: 1000
+        }
+      })
+    })
+  },
+  updated() {}
+}

src/views/trades/4001/index.less

+.ant-form-item {
+  width: 100%;
+}

src/views/trades/4001/index.vue

+<template>
+  <div id="4001">
+    <a-form-model
+      ref="form"
+      :model="params"
+      labelAlign="left"
+      layout="horizontal"
+      :labelCol="{
+        span: 6,
+        offset: 0
+      }"
+      :wrapperCol="{
+        span: 18,
+        offset: 0
+      }"
+      :colon="true"
+    >
+      <a-card id="card93308" :bordered="true" :hoverable="false" size="default">
+        <template #title> 客户查询条件 </template>
+
+        <div id="formblock85142" class="form-blockform">
+          <a-row id="grid29899" align="middle" :gutter="[12, 0]" justify="start">
+            <a-col id="grid-col-52478" :offset="0" :span="8">
+              <a-form-model-item
+                v-if="true"
+                prop="form.activateBrn"
+                :rules="[
+                  {
+                    required: false,
+                    message: '该项是必填项',
+                    trigger: 'blur'
+                  }
+                ]"
+                :labelCol="{
+                  span: 6,
+                  offset: 0
+                }"
+                labelAlign="left"
+                :wrapperCol="{
+                  span: 18,
+                  offset: 0
+                }"
+              >
+                <template #label> 启动机构 </template>
+
+                <a-select
+                  v-model="params.form.activateBrn"
+                  id="select19089"
+                  :allowClear="true"
+                  :disabled="false"
+                  mode="default"
+                  size="default"
+                  :options="[
+                    { label: 'select 1', value: 1 },
+                    { label: 'select 2', value: 2 },
+                    { label: 'select 3', value: 3 }
+                  ]"
+                >
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+            <a-col id="grid-col-25192" :offset="0" :span="8">
+              <a-form-model-item
+                v-if="true"
+                prop="form.bizNo"
+                :rules="[
+                  {
+                    required: false,
+                    message: '该项是必填项',
+                    trigger: 'blur'
+                  }
+                ]"
+                :labelCol="{
+                  span: 6,
+                  offset: 0
+                }"
+                labelAlign="left"
+                :wrapperCol="{
+                  span: 18,
+                  offset: 0
+                }"
+              >
+                <template #label> 业务编号 </template>
+
+                <a-input
+                  v-model="params.form.bizNo"
+                  id="input117403"
+                  :read-only="false"
+                  :disabled="false"
+                  :maxLength="12"
+                  size="default"
+                  :allowClear="true"
+                >
+                </a-input>
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+        </div>
+        <div
+          style="width: 100%; display: flex; justify-content: center; align-items: middle; gap: 8px"
+          id="flexbox114954"
+        >
+          <a-button id="button27913" :ghost="false" type="primary" @click="button27913_onClick">
+            查询
+          </a-button>
+          <a-button id="button70657" :ghost="false" @click="button70657_onClick"> 重置 </a-button>
+        </div>
+      </a-card>
+      <a-card id="card96595" :bordered="true" :hoverable="false" size="default">
+        <a-card :bordered="false">
+          <a-table
+            id="table67369"
+            :data-source="params.flist1"
+            :pagination="table.flist1.pagination"
+            :rowKey="table.flist1.options.rowKey"
+          >
+            <a-table-column data-index="creditsCustNo" key="" title="客户编号">
+              <template slot-scope="text, value, index">
+                <div id="statictext59329">
+                  {{ `${text}` }}
+                </div>
+              </template>
+            </a-table-column>
+            <a-table-column data-index="custNm" key="" title="客户名称">
+              <template slot-scope="text, value, index">
+                <div id="statictext32377">
+                  {{ `${text}` }}
+                </div>
+              </template>
+            </a-table-column>
+            <a-table-column data-index="orgBrnCd" key="" title="组织机构代码">
+              <template slot-scope="text, value, index">
+                <div id="statictext81916">
+                  {{ `${text}` }}
+                </div>
+              </template>
+            </a-table-column>
+            <a-table-column data-index="lnCardNo" key="" title="贷款卡号">
+              <template slot-scope="text, value, index">
+                <div id="statictext55541">
+                  {{ `${text}` }}
+                </div>
+              </template>
+            </a-table-column>
+            <a-table-column data-index="custProperty" key="" title="客户性质">
+              <template slot-scope="text, value, index">
+                <div id="statictext22012">
+                  {{ `${text}` }}
+                </div>
+              </template>
+            </a-table-column>
+            <a-table-column data-index="custMgrNm" key="" title="客户经理名称">
+              <template slot-scope="text, value, index">
+                <div id="statictext61354">
+                  {{ `${text}` }}
+                </div>
+              </template>
+            </a-table-column>
+            <a-table-column data-index="lastOneProcPsn" key="" title="上一处理人">
+              <template slot-scope="text, value, index">
+                <div id="statictext29409">
+                  {{ `${text}` }}
+                </div>
+              </template>
+            </a-table-column>
+            <a-table-column data-index="flowNoFldNm" key="" title="流程启动者">
+              <template slot-scope="text, value, index">
+                <div id="statictext41652">
+                  {{ `${text}` }}
+                </div>
+              </template>
+            </a-table-column>
+            <a-table-column data-index="procStepNo" key="" title="处理步骤">
+              <template slot-scope="text, value, index">
+                <div id="statictext58733">
+                  {{ `${text}` }}
+                </div>
+              </template>
+            </a-table-column>
+            <a-table-column data-index="initiateTm" key="" title="发起时间">
+              <template slot-scope="text, value, index">
+                <div id="statictext75804">
+                  {{ `${text}` }}
+                </div>
+              </template>
+            </a-table-column>
+            <a-table-column data-index="lastProcTm" key="" title="最后处理时间">
+              <template slot-scope="text, value, index">
+                <div id="statictext59020">
+                  {{ `${text}` }}
+                </div>
+              </template>
+            </a-table-column>
+
+            <a-table-column title="操作" fixed="right">
+              <template slot-scope="text, value, index">
+                <a @click="table_btn_43474(value)"> 确认信息 </a>
+              </template>
+            </a-table-column>
+          </a-table>
+        </a-card>
+      </a-card>
+    </a-form-model>
+  </div>
+</template>
+
+<script src="./index.js"></script>