kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

金融产品页面完成

Browse Source
This commit is contained in:
aixianling
2022-02-22 18:40:57 +08:00
parent 6b873efacf
commit b3cd8f7a88
4 changed files with 437 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
project/xiushan/apps/finance/AppFinanceProduct/AppFinanceProduct.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<section class="AppFinanceProduct">
<component :is="currentComponent" :instance="instance" :dict="dict" :permissions="permissions"/>
</section>
</template>
<script>
import ProductDetail from "./productDetail";
import ProductList from "./productList";
import ProductAdd from "./productAdd";
export default {
name: "AppFinanceProduct",
components: {ProductAdd, ProductList, ProductDetail},
label: "产品发布",
props: {
instance: Function,
dict: Object,
permissions: Function
},
computed: {
currentComponent() {
return this.$route.hash == "#add" ? ProductAdd :
!!this.$route.query.id ? ProductDetail : ProductList
}
}
}
</script>
<style lang="scss" scoped>
.AppFinanceProduct {
}
</style>

157
project/xiushan/apps/finance/AppFinanceProduct/productAdd.vue Normal file
View File

@@ -0,0 +1,157 @@
<template>
<section class="productAdd">
<ai-detail>
<ai-title slot="title" :title="addTitle" isShowBottomBorder isShowBack @onBackClick="back"/>
<template #content>
<el-form size="small" label-width="120px" :model="form" ref="ProductForm" :rules="rules">
<ai-card title="基本信息">
<template #content>
<el-form-item label="产品名称" prop="name">
<el-input v-model="form.name" placeholder="请输入" clearable show-word-limit maxlength="30"/>
</el-form-item>
<el-row type="flex" class="flexWrap">
<el-form-item label="贷款额度(万)">
<el-input v-model="form.name" placeholder="最低额度" clearable/>
</el-form-item>
<el-form-item label="">
<el-input v-model="form.name" placeholder="最高额度" clearable/>
</el-form-item>
<el-form-item label="参考利率(%)">
<el-input v-model="form.name" placeholder="最低利率" clearable/>
</el-form-item>
<el-form-item label="">
<el-input v-model="form.name" placeholder="最高利率" clearable/>
</el-form-item>
<el-form-item class="half" label="还款期限(月)">
<ai-select v-model="form.name" placeholder="请选择" :selectList="dict.getDict('')"/>
</el-form-item>
<el-form-item class="half" label="还款方式">
<ai-select v-model="form.name" placeholder="请选择" :selectList="dict.getDict('')"/>
</el-form-item>
</el-row>
<el-form-item label="担保方式">
<el-checkbox-group v-model="form.way">
<el-checkbox v-for="op in dict.getDict('yesOrNo')" :key="op.dictValue" :label="op.dictValue">
{{ op.dictName }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
</template>
</ai-card>
<ai-card title="适用范围">
<template #content>
<el-form-item label="适用范围">
<ai-area-get :instance="instance" v-model="form.areaId"/>
</el-form-item>
<el-form-item label="面向对象">
<el-checkbox-group v-model="form.way">
<el-checkbox v-for="op in dict.getDict('yesOrNo')" :key="op.dictValue" :label="op.dictValue">
{{ op.dictName }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
</template>
</ai-card>
<ai-card title="产品信息">
<template #content>
<el-form-item label="申请条件">
<el-input type="textarea" rows="5" v-model="form.name" placeholder="请输入" clearable maxlength="500"
show-word-limit/>
</el-form-item>
<el-form-item label="所需材料">
<el-input type="textarea" rows="5" v-model="form.name" placeholder="请输入" clearable maxlength="500"
show-word-limit/>
</el-form-item>
<el-form-item label="产品特色">
<el-input type="textarea" rows="5" v-model="form.name" placeholder="请输入" clearable maxlength="500"
show-word-limit/>
</el-form-item>
</template>
</ai-card>
</el-form>
</template>
<template #footer>
<el-button @click="back">取消</el-button>
<el-button type="primary" @click="submit">申请发布</el-button>
</template>
</ai-detail>
</section>
</template>
<script>
export default {
name: "productAdd",
props: {
instance: Function,
dict: Object,
permissions: Function
},
computed: {
addTitle() {
return !!this.$route.query.id ? "编辑金融产品" : "添加金融产品"
}
},
data() {
return {
dialog: false,
form: {way: []},
rules: {
auditStatus: [{required: true, message: "请选择审批结果"}]
}
}
},
methods: {
getDetail() {
let {id} = this.$route.query
id && this.instance.post("/appportaluserenterprise/queryDetailById", null, {
params: {id}
}).then(res => {
if (res?.data) {
this.form = res.data
}
})
},
submit() {
this.$refs.ProductForm.validate(v => {
if (v) {
let {id} = this.form
this.instance.post("/appportaluserenterprise/addOrUpdate", null, {
params: {id, ...this.form}
}).then(res => {
if (res?.code == 0) {
this.dialog = false
this.$message.success("提交成功!")
this.getDetail()
}
})
}
})
},
back() {
this.$router.push({})
}
},
created() {
this.dict.load("auditStatus", "yesOrNo")
this.getDetail()
}
}
</script>
<style lang="scss" scoped>
.productAdd {
height: 100%;
.flexWrap {
flex-wrap: wrap;
.el-form-item {
width: 50%;
}
}
::v-deep.half {
width: 50%;
}
}
</style>

134
project/xiushan/apps/finance/AppFinanceProduct/productDetail.vue Normal file
View File

@@ -0,0 +1,134 @@
<template>
<section class="productDetail">
<ai-detail>
<ai-title slot="title" title="金融产品详情" isShowBottomBorder isShowBack @onBackClick="$router.push({query:{}})">
<template #rightBtn>
<el-button v-if="isAuthing" type="primary" @click="dialog=true">审核</el-button>
</template>
</ai-title>
<template #content>
<el-form size="small" label-width="120px">
<ai-card title="基本信息">
<template #content>
<el-row type="flex" class="flexWrap">
<el-form-item class="half" label="产品名称">{{ detail.enterpriseName }}</el-form-item>
<el-form-item class="half" label="状态">{{ detail.status }}</el-form-item>
<el-form-item class="half" label="贷款额度(万)">
{{ dict.getLabel('enterpriseType', detail.enterpriseType) }}
</el-form-item>
<el-form-item class="half" label="参考利率(%)">{{ detail.areaName }}</el-form-item>
<el-form-item class="half" label="还款期限(月)">{{ detail.address }}</el-form-item>
<el-form-item class="half" label="还款方式">{{ detail.businessScope }}</el-form-item>
</el-row>
<el-form-item label="担保方式">{{ detail.operationPeriod }}</el-form-item>
</template>
</ai-card>
<ai-card title="适用范围">
<template #content>
<el-form-item label="适用范围">{{ detail.legalPersonName }}</el-form-item>
<el-form-item label="面向对象">{{ detail.idNumber }}</el-form-item>
</template>
</ai-card>
<ai-card title="产品信息">
<template #content>
<el-form-item label="申请条件">{{ detail.auditUserName }}</el-form-item>
<el-form-item label="所需材料">{{ detail.auditPhone }}</el-form-item>
<el-form-item label="产品特色">{{ detail.auditDescription }}</el-form-item>
</template>
</ai-card>
<ai-card title="审核结果" v-if="!isAuthing">
<template #content>
<el-row type="flex" class="flexWrap">
<el-form-item class="half" label="审核人">{{ detail.auditUserName }}</el-form-item>
<el-form-item class="half" label="审核时间">{{ detail.auditTime }}</el-form-item>
</el-row>
<el-form-item label="备注">{{ detail.auditDescription }}</el-form-item>
</template>
</ai-card>
</el-form>
</template>
</ai-detail>
<ai-dialog :visible.sync="dialog" title="审批" @closed="form={}" @onConfirm="submitAudit" width="560px">
<el-form :model="form" :rules="rules" ref="AuditForm" size="small" label-width="120px">
<el-form-item label="审批结果" prop="auditStatus">
<ai-select v-model="form.auditStatus" :selectList="dict.getDict('auditStatus')"/>
</el-form-item>
<el-form-item label="审批意见" prop="auditDescription">
<el-input type="textarea" v-model="form.auditDescription" placeholder="请输入"/>
</el-form-item>
</el-form>
</ai-dialog>
</section>
</template>
<script>
export default {
name: "productDetail",
props: {
instance: Function,
dict: Object,
permissions: Function
},
computed: {
isAuthing() {
return this.detail.status == "0"
}
},
data() {
return {
dialog: false,
detail: {},
form: {},
rules: {
auditStatus: [{required: true, message: "请选择审批结果"}]
}
}
},
methods: {
getDetail() {
let {id} = this.$route.query
this.instance.post("/appportaluserenterprise/queryDetailById", null, {
params: {id}
}).then(res => {
if (res?.data) {
this.detail = res.data
}
})
},
submitAudit() {
this.$refs.AuditForm.validate(v => {
if (v) {
let {id} = this.detail
this.instance.post("/appportaluserenterprise/auditEnterprise", null, {
params: {id, ...this.form}
}).then(res => {
if (res?.code == 0) {
this.dialog = false
this.$message.success("提交成功!")
this.getDetail()
}
})
}
})
}
},
created() {
this.dict.load("auditStatus")
this.getDetail()
}
}
</script>
<style lang="scss" scoped>
.productDetail {
height: 100%;
.flexWrap {
flex-wrap: wrap;
}
::v-deep.half {
width: 50%;
}
}
</style>

112
project/xiushan/apps/finance/AppFinanceProduct/productList.vue Normal file
View File

@@ -0,0 +1,112 @@
<template>
<section class="productList">
<ai-list>
<ai-title slot="title" title="产品发布管理" isShowBottomBorder/>
<template #content>
<ai-search-bar>
<template #left>
<ai-select v-model="search.status" :selectList="dict.getDict('status')" placeholder="还款期限"
@change="page.current=1,getTableData()"/>
<ai-select v-model="search.status" :selectList="dict.getDict('status')" placeholder="担保方式"
@change="page.current=1,getTableData()"/>
<ai-select v-model="search.status" :selectList="dict.getDict('status')" placeholder="贷款额度"
@change="page.current=1,getTableData()"/>
</template>
<template #right>
<el-input size="small" placeholder="搜索产品名称" v-model="search.name" clearable
@change="page.current=1,getTableData()"/>
</template>
</ai-search-bar>
<ai-search-bar>
<template #left>
<el-button type="primary" icon="iconfont iconAdd" @click="handleEdit()">添加产品</el-button>
</template>
</ai-search-bar>
<ai-table :tableData="tableData" :total="page.total" :current.sync="page.current" :size.sync="page.size"
@getList="getTableData" :col-configs="colConfigs" :dict="dict">
<el-table-column slot="options" label="操作" fixed="right" align="center">
<template slot-scope="{row}">
<el-button type="text" @click="showDetail(row.id)">详情</el-button>
<el-button type="text" @click="handleEdit(row.id)">编辑</el-button>
<el-button type="text" @click="handleDelete(row.id)">详情</el-button>
</template>
</el-table-column>
</ai-table>
</template>
</ai-list>
</section>
</template>
<script>
import {mapState} from "vuex";
export default {
name: "productList",
props: {
instance: Function,
dict: Object,
permissions: Function
},
computed: {
...mapState(['user'])
},
data() {
return {
search: {name: ""},
page: {current: 1, size: 10, total: 0},
tableData: [],
colConfigs: [
{label: "产品名称", prop: "enterpriseName"},
{label: "贷款额度(万)", prop: "enterpriseType"},
{label: "参考利率", prop: "areaName"},
{label: "还款期限(月)", prop: "legalPersonName"},
{label: "担保方式", prop: "phone"},
{label: "还款方式", prop: "createTime"},
{label: "操作人", prop: "loginAccount"},
{label: "联系方式", prop: "loginAccount"},
{label: "状态", prop: "loginAccount"},
{slot: "options"}
]
}
},
methods: {
getTableData() {
this.instance.post("/appportaluserenterprise/list", null, {
params: {...this.page, ...this.search}
}).then(res => {
if (res?.data) {
this.tableData = res.data?.records
this.page.total = res.data.total
}
})
},
showDetail(id) {
this.$router.push({query: {id}})
},
handleEdit(id) {
this.$router.push({query: {id}, hash: "#add"})
},
handleDelete(ids) {
this.$confirm("是否要删除该产品?").then(() => {
this.instance.post("/appportaluserenterprise/delete", null, {
params: {ids}
}).then(res => {
if (res?.code == 0) {
this.$message.success("删除成功!")
this.getTableData()
}
})
}).catch(() => 0)
}
},
created() {
this.dict.load("enterpriseName")
this.getTableData()
}
}
</script>
<style lang="scss" scoped>
.productList {
}
</style>