feat(资方管理):资方管理列表页面构建

src/components/Input/InputNumber/index.vue

@@ -7,7 +7,10 @@
     :disabled="disabled"
     :maxlength="maxLen"
     @change="handleChange"
-  />
+  >
+    <template v-if="forntUnitName" slot="prepend">{{ forntUnitName }}</template>
+    <template v-if="isUnit" slot="append">{{ unitName }}</template>
+  </el-input>
   <el-input
     v-else
     v-model="inputVal"
@@ -16,7 +19,10 @@
     :controls="false"
     :maxlength="maxLen"
     @change="handleInput"
-  />
+  >
+    <template v-if="forntUnitName" slot="prepend">{{ forntUnitName }}</template>
+    <template v-if="isUnit" slot="append">{{ unitName }}</template>
+  </el-input>
 </template>
 
 <script>
@@ -43,6 +49,19 @@ export default {
       type: Boolean,
       default: false
     },
+    unitName: {
+      type: String,
+      default: '元'
+    },
+    isUnit: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    forntUnitName: {
+      type: String,
+      default: ''
+    },
     decimalOptions: {
       type: Object,
       default: () => {

src/router/index.js

@@ -4,6 +4,7 @@ import Router from 'vue-router'
 import userManagement from './moudules/userManage'
 import systemManage from './moudules/systemManage'
 import enterpriseManage from './moudules/enterpriseManage'
+import capitalManage from './moudules/capitalManage'
 
 Vue.use(Router)
 
@@ -46,6 +47,7 @@ export const constantRoutes = [
     }]
   },
   enterpriseManage,
+  capitalManage,
   userManagement,
   systemManage,
 

src/router/moudules/capitalManage.js

@@ -0,0 +1,33 @@
+
+/* Layout */
+import Layout from '@/layout'
+
+export default {
+  path: '/capitalManagement',
+  component: Layout,
+  redirect: '/capitalManage',
+  name: 'CapitalManagement',
+  // alwaysShow: true,
+  meta: {
+    title: '资方管理',
+    icon: 'system'
+  },
+  children: [
+    {
+      path: '/capitalManage',
+      name: 'CapitalManage',
+      component: () => import('@/views/capitalManage/index.vue'),
+      meta: { title: '资方管理' },
+      hidden: false,
+      children: [
+        {
+          path: '/capitalManage/details/:id',
+          name: 'CapitalManageDetails',
+          component: () => import('@/views/capitalManage/details.vue'),
+          meta: { title: '资方信息' },
+          hidden: true
+        }
+      ]
+    }
+  ]
+}

src/views/capitalManage/components/BasicInfo.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="basic-info">
+    <cy-info-title>基础信息</cy-info-title>
+    <el-form
+      :model="ruleForm"
+      label-position="top"
+      label-width="150px"
+      class="rule-form-orange"
+    >
+      <el-form-item label="资方授信编号">
+        <el-input v-model="ruleForm.desc" disabled placeholder="请输入资方授信编号" />
+      </el-form-item>
+      <el-form-item label="机构类型">
+        <el-input v-model="ruleForm.desc" disabled placeholder="请输入机构类型" />
+      </el-form-item>
+      <el-form-item label="资方名称">
+        <el-input v-model="ruleForm.desc" disabled placeholder="请输入资方名称" />
+      </el-form-item>
+      <el-form-item label="客户经理">
+        <el-input v-model="ruleForm.desc" disabled placeholder="请输入客户经理" />
+      </el-form-item>
+      <el-form-item label="部门">
+        <el-input v-model="ruleForm.desc" disabled placeholder="请输入机构类型" />
+      </el-form-item>
+      <el-form-item label="授信状态">
+        <el-input v-model="ruleForm.desc" disabled placeholder="请输入机构类型" />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      ruleForm: {
+        desc: ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.basic-info {
+
+}
+
+</style>

src/views/capitalManage/components/CreditBasicInfo.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="basic-info">
+    <cy-info-title style="margin-top: 10px;">授信基本信息</cy-info-title>
+    <el-form
+      :model="ruleForm"
+      label-position="top"
+      label-width="150px"
+      class="rule-form-orange"
+    >
+      <el-form-item label="授信金额">
+        <cy-amount-input v-model="ruleForm.desc" disabled placeholder="请输入授信金额" />
+      </el-form-item>
+      <el-form-item label="币种">
+        <el-input v-model="ruleForm.desc" disabled placeholder="请输入币种" />
+      </el-form-item>
+      <el-form-item label="业务类型">
+        <el-input v-model="ruleForm.desc" disabled placeholder="请输入业务类型" />
+      </el-form-item>
+      <el-form-item label="业务类型编号">
+        <el-input v-model="ruleForm.desc" disabled placeholder="请输入业务类型编号" />
+      </el-form-item>
+      <el-form-item label="授信主体">
+        <el-input v-model="ruleForm.desc" disabled placeholder="请输入授信主体" />
+      </el-form-item>
+      <el-form-item label="授信类型">
+        <el-input v-model="ruleForm.desc" disabled placeholder="请输入授信类型" />
+      </el-form-item>
+      <el-form-item label="授信生效日">
+        <el-input v-model="ruleForm.desc" disabled placeholder="请输入授信生效日" />
+      </el-form-item>
+      <el-form-item label="授信到期日">
+        <el-input v-model="ruleForm.desc" disabled placeholder="请输入授信到期日" />
+      </el-form-item>
+      <el-form-item label="银行利率/年">
+        <cy-amount-input v-model="ruleForm.desc" :is-unit="true" unit-name="%" disabled placeholder="请输入银行利率/年" />
+      </el-form-item>
+      <el-form-item label="逾期利率/年">
+        <cy-amount-input v-model="ruleForm.desc" :is-unit="true" unit-name="%" disabled placeholder="请输入逾期利率/年" />
+      </el-form-item>
+      <el-form-item label="适用产品">
+        <el-input v-model="ruleForm.desc" disabled placeholder="请输入适用产品" />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      ruleForm: {
+        desc: ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.basic-info {
+
+}
+
+</style>

src/views/capitalManage/components/CreditInfo.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="credit-info">
+    <cy-info-title style="margin-top: 10px;">授信信息</cy-info-title>
+    <el-form
+      :model="ruleForm"
+      label-position="top"
+      label-width="150px"
+      class="rule-form-orange"
+    >
+      <el-form-item label="资方状态">
+        <el-radio-group v-model="ruleForm.enabled" :disabled="disabled">
+          <el-radio :label="true">启用</el-radio>
+          <el-radio :label="false">禁用</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="是否长银资方">
+        <el-radio-group v-model="ruleForm.enabled" :disabled="disabled">
+          <el-radio :label="true">是</el-radio>
+          <el-radio :label="false">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="资方融资期限">
+        <cy-number-input v-model="ruleForm.desc" :disabled="disabled" placeholder="请输入业务类型" :is-unit="true" unit-name="天" />
+      </el-form-item>
+      <el-form-item label=" 是否支持多店铺">
+        <el-radio-group v-model="ruleForm.enabled" :disabled="disabled">
+          <el-radio :label="true">是</el-radio>
+          <el-radio :label="false">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      ruleForm: {
+        desc: ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.basic-info {
+
+}
+
+</style>

src/views/capitalManage/components/LettersInfo.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="letters-info">
+    <cy-info-title style="margin-top: 10px;">用信信息</cy-info-title>
+    <el-form
+      :model="ruleForm"
+      label-position="top"
+      label-width="150px"
+      class="rule-form-orange"
+    >
+      <el-form-item label="是否绑定账户">
+        <el-radio-group v-model="ruleForm.enabled" :disabled="disabled">
+          <el-radio :label="true">启用</el-radio>
+          <el-radio :label="false">禁用</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="是否占用公司资金">
+        <el-radio-group v-model="ruleForm.enabled" :disabled="disabled">
+          <el-radio :label="true">是</el-radio>
+          <el-radio :label="false">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="是否公司承险">
+        <el-radio-group v-model="ruleForm.enabled" :disabled="disabled">
+          <el-radio :label="true">是</el-radio>
+          <el-radio :label="false">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="征信上报方式">
+        <el-radio-group v-model="ruleForm.enabled" :disabled="disabled">
+          <el-radio :label="true">A类</el-radio>
+          <el-radio :label="false">B类</el-radio>
+          <el-radio :label="false">不上报</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="融资利率">
+        <cy-number-input
+          v-model="ruleForm.desc"
+          :decimal-options="{
+            needy: true,
+            digitsNo: 2
+          }"
+          :disabled="disabled"
+          placeholder="请输入融资利率"
+          :is-unit="true"
+          unit-name="%"
+        />
+      </el-form-item>
+      <el-form-item label="长银逾期利率 ">
+        <cy-number-input
+          v-model="ruleForm.desc"
+          :decimal-options="{
+            needy: true,
+            digitsNo: 2
+          }"
+          :disabled="disabled"
+          placeholder="请输入长银逾期利率"
+          :is-unit="true"
+          unit-name="%"
+        />
+      </el-form-item>
+      <el-form-item label="长银其它费用金额 ">
+        <cy-amount-input
+          v-model="ruleForm.desc"
+          :disabled="disabled"
+          placeholder="请输入长银其它费用金额"
+          :is-unit="true"
+          unit-name="天"
+        />
+      </el-form-item>
+      <el-form-item label="融资期限 ">
+        <cy-number-input
+          v-model="ruleForm.desc"
+          :disabled="disabled"
+          placeholder="请输入融资期限"
+          :is-unit="true"
+          unit-name="天"
+        />
+      </el-form-item>
+      <el-form-item label="融资期限 ">
+        <cy-number-input
+          v-model="ruleForm.desc"
+          :disabled="disabled"
+          placeholder="请输入融资期限"
+          :is-unit="true"
+          unit-name="天"
+        />
+      </el-form-item>
+      <el-form-item label="清分期限 ">
+        <cy-number-input
+          v-model="ruleForm.desc"
+          :disabled="disabled"
+          placeholder="请输入清分期限"
+          fornt-unit-name="第"
+          :is-unit="true"
+          unit-name="天"
+        />
+      </el-form-item>
+      <el-form-item label="长银代偿利率">
+        <cy-number-input
+          v-model="ruleForm.desc"
+          :decimal-options="{
+            needy: true,
+            digitsNo: 2
+          }"
+          :disabled="disabled"
+          placeholder="请输入长银代偿利率"
+          :is-unit="true"
+          unit-name="%"
+        />
+      </el-form-item>
+      <el-form-item label="出资方账户名称 ">
+        <el-input v-model="ruleForm.desc" disabled placeholder="请输入出资方账户名称 " />
+      </el-form-item>
+      <el-form-item label="利息是否计算投放日">
+        <el-radio-group v-model="ruleForm.enabled" :disabled="disabled">
+          <el-radio :label="true">是</el-radio>
+          <el-radio :label="false">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="还款方式 ">
+        <el-input v-model="ruleForm.desc" disabled placeholder="请输入还款方式 " />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      ruleForm: {
+        desc: ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.basic-info {
+
+}
+
+</style>

src/views/capitalManage/details.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="capital-manage-details">
+    <basic-info />
+    <credit-basic-info></credit-basic-info>
+    <credit-info></credit-info>
+    <letters-info></letters-info>
+    <div class="submit-btn">
+      <el-button>关闭</el-button>
+      <el-button type="primary">确定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+    BasicInfo: () => import('./components/BasicInfo'),
+    CreditBasicInfo: () => import('./components/CreditBasicInfo.vue'),
+    CreditInfo: () => import('./components/CreditInfo.vue'),
+    LettersInfo: () => import('./components/LettersInfo.vue')
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/capitalManage/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="capital-manage">
+    <router-view />
+    <template v-if="!$route.params.id">
+      <main-content></main-content>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SupplierManage',
+  components: {
+    MainContent: () => import('./mainContent')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.supplier-manage {
+
+}
+</style>

src/views/capitalManage/mainContent.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="capital-main-content">
+    <el-tabs v-model="activeName" type="border-card" @tab-click="handleTabClick">
+      <el-tab-pane label="待处理" name="pending"> </el-tab-pane>
+      <el-tab-pane label="全部" name="all"></el-tab-pane>
+      <cy-comm-table
+        ref="commTable"
+        v-loading="loading"
+        parent-component="CapitalManage"
+        :columns="columns"
+        :data="tableData"
+        :count="total"
+        :table-options="tableOptions"
+      />
+    </el-tabs>
+  </div>
+
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  name: 'CapitalManage',
+  data() {
+    return {
+      total: 0,
+      loading: false,
+      activeName: 'pending',
+      tableData: [{ supplierName: '13123123123123' }],
+      tableOptions: {
+        maxHeight: 'calc(100vh - 310px)',
+        height: 'calc(100vh - 310px)'
+      },
+      columns: [
+        {
+          label: '序号',
+          index: true
+        },
+        {
+          label: '授信编号',
+          prop: 'supplierName',
+          showTooltip: true
+        },
+        {
+          label: '资方名称',
+          prop: 'supplierName',
+          showTooltip: true
+        },
+        {
+          label: '机构类型',
+          prop: 'supplierName',
+          showTooltip: true
+        },
+        {
+          label: '业务类型',
+          prop: 'supplierName',
+          showTooltip: true
+        },
+        {
+          label: '业务类型编号',
+          prop: 'supplierName',
+          showTooltip: true,
+          width: '120'
+        },
+        {
+          label: '客户经理',
+          prop: 'supplierName',
+          showTooltip: true
+        },
+        {
+          label: '授信编号',
+          prop: 'supplierName',
+          showTooltip: true
+        },
+        {
+          label: '部门',
+          prop: 'supplierName',
+          showTooltip: true
+        },
+        {
+          label: '授信金额（元）',
+          prop: 'supplierName',
+          showTooltip: true,
+          width: '120'
+        },
+        {
+          label: '用信金额（元）',
+          prop: 'supplierName',
+          showTooltip: true,
+          width: '120'
+        },
+        {
+          label: '可用余额（元）',
+          prop: 'supplierName',
+          showTooltip: true,
+          width: '120'
+        },
+        {
+          label: '授信生效日',
+          prop: 'supplierName',
+          showTooltip: true,
+          width: '120'
+        },
+        {
+          label: '授信到期日',
+          prop: 'supplierName',
+          showTooltip: true,
+          width: '120'
+        },
+        {
+          label: '授信状态',
+          prop: 'supplierName',
+          showTooltip: true
+        },
+
+        {
+          label: '资方状态',
+          prop: 'supplierName',
+          showTooltip: true
+        },
+        {
+          label: '操作',
+          render: (h, row) => {
+            const btnList = [
+              {
+                msg: '修改',
+                icon: 'iconfont icon-xiugai',
+                power: '',
+                tabPower: ['pending'],
+                category: 'edit'
+              },
+              {
+                msg: '查看',
+                icon: 'iconfont icon-Magnifier',
+                power: '',
+                tabPower: ['all', 'pending'],
+                // rowPower: [],
+                category: 'see'
+              }
+            ]
+            const options = btnList.map(item => {
+              //  this.tablePower({ item, tab: this.activeName, row }) &&
+              return (
+                <el-tooltip class='item' effect='dark' content={item.msg} placement='top'>
+                  <span class='table-icon-box' v-power={item.power}>
+                    <i class={item.icon} onClick={() => { this.handlerOperate(item.category, row) }}></i>
+                  </span>
+                </el-tooltip>
+              )
+            })
+            return <div>{ options }</div>
+          },
+          width: 100
+        }
+      ]
+    }
+  },
+  computed: {
+    ...mapGetters(['constant']),
+    tablePower() {
+      return ({ item, tab, row }) => {
+        const { tabPower, rowPower } = item
+        if (rowPower) {
+          if (tabPower.includes(tab) && rowPower.includes(row.statusName)) {
+            return true
+          }
+        } else {
+          if (tabPower.includes(tab)) {
+            return true
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    fetchData() {
+
+    },
+    handleTabClick(tab) {
+      this.activeName = tab.name
+      this.page = 1
+      this.size = 10
+      this.fetchData(tab.name)
+    },
+    handlerOperate(type) {
+      this.$router.push({
+        name: 'CapitalManageDetails',
+        params: { id: '1231231' },
+        query: {
+          type
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>