366 lines
		
	
	
		
			12 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			366 lines
		
	
	
		
			12 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <section class="needsDetail">
 | |
|     <ai-detail>
 | |
|       <ai-title slot="title" title="融资详情" isShowBottomBorder isShowBack @onBackClick="back()">
 | |
|         <template #rightBtn>
 | |
|           <el-button v-if="isFinanceUser" type="primary" @click="handleGrab">抢单</el-button>
 | |
|           <el-button v-else type="danger" @click="handleCancel">取消发布</el-button>
 | |
|         </template>
 | |
|       </ai-title>
 | |
|       <template #content>
 | |
|         <el-form size="small" label-width="160px">
 | |
|           <ai-card title="融资需求">
 | |
|             <template #content>
 | |
|               <el-form-item label="融资方式">{{ dict.getLabel("financingDemandApplyType", detail.applyType) }}
 | |
|               </el-form-item>
 | |
|               <el-row type="flex" class="flexWrap">
 | |
|                 <el-form-item label="意向金额(万)">{{ detail.loanAmount }}</el-form-item>
 | |
|                 <el-form-item label="期望使用期限">{{
 | |
|                     dict.getLabel('productRepaymentTimeline', detail.hopeLifespan)
 | |
|                   }}
 | |
|                 </el-form-item>
 | |
|                 <el-form-item label="资金用途">{{
 | |
|                     dict.getLabel('financialFundPurpose', detail.fundPurpose)
 | |
|                   }}
 | |
|                 </el-form-item>
 | |
|                 <el-form-item label="企业主体" v-if="detail.applyType==1">
 | |
|                   <el-row type="flex">
 | |
|                     {{ detail.enterpriseName }}
 | |
|                     <el-link type="primary"
 | |
|                              @click="isShow=true">
 | |
|                       企业详情
 | |
|                     </el-link>
 | |
|                   </el-row>
 | |
|                 </el-form-item>
 | |
|                 <el-form-item v-else/>
 | |
|                 <el-form-item label="联系人">{{ detail.name }}</el-form-item>
 | |
|                 <el-form-item label="所在地区">{{ detail.areaName }}</el-form-item>
 | |
|                 <el-form-item label="联系方式">{{ detail.phone }}</el-form-item>
 | |
|                 <el-form-item label="身份证号">{{ detail.idNumber }}</el-form-item>
 | |
|                 <el-form-item label="发布时间">{{ detail.createTime }}</el-form-item>
 | |
|               </el-row>
 | |
|               <el-form-item label="备注">{{ detail.remark }}</el-form-item>
 | |
|             </template>
 | |
|           </ai-card>
 | |
|         </el-form>
 | |
|         <ai-dialog
 | |
|           class="dialog"
 | |
|           :title="info.enterpriseName"
 | |
|           :visible.sync="isShow"
 | |
|           @close="isShow = false"
 | |
|           @onConfirm="isShow = false"
 | |
|           width="1200px">
 | |
|           <div class="top">
 | |
|             <div class="top-left">{{ info.subEnterpriseName }}</div>
 | |
|             <div class="top-right">
 | |
|               <div class="top-right__top">
 | |
|                 <h2>{{ info.enterpriseName }}</h2>
 | |
|                 <!-- <div class="right">
 | |
|                   <span>下载报告</span>
 | |
|                 </div> -->
 | |
|               </div>
 | |
|               <div class="top-right__bottom">
 | |
|                 <ai-wrapper
 | |
|                   label-width="130px">
 | |
|                   <ai-info-item label="法人姓名:"><span style="color: #1890FF;">{{ info.legalPersonName }}</span></ai-info-item>
 | |
|                   <ai-info-item label="企业类型:" :value="$dict.getLabel('enterpriseType', info.enterpriseType)"></ai-info-item>
 | |
|                   <ai-info-item label="统一社会信用代码:" :value="info.unifiedCode"></ai-info-item>
 | |
|                   <ai-info-item label="地址:" isLine :value="info.areaName + info.address"></ai-info-item>
 | |
|                   <ai-info-item label="经营范围:" isLine :value="info.businessScope"></ai-info-item>
 | |
|                 </ai-wrapper>
 | |
|               </div>
 | |
|             </div>
 | |
|           </div>
 | |
|           <div class="bottom">
 | |
|             <div class="tab">
 | |
|               <span :class="[currIndex === 0 ? 'active' : '']" @click="currIndex = 0">行政许可</span>
 | |
|               <span :class="[currIndex === 1 ? 'active' : '']" @click="currIndex = 1">行政处罚</span>
 | |
|               <span :class="[currIndex === 2 ? 'active' : '']" @click="currIndex = 2">良好信息</span>
 | |
|               <span :class="[currIndex === 3 ? 'active' : '']" @click="currIndex = 3">失信信息</span>
 | |
|             </div>
 | |
|             <div class="table">
 | |
|               <ai-table
 | |
|                 v-show="currIndex === 0"
 | |
|                 :tableData="info.adminstrativeLicenseList"
 | |
|                 :col-configs="colConfigs1"
 | |
|                 :isShowPagination="false"
 | |
|                 border
 | |
|                 tableSize="small"
 | |
|                 @getList="() => {}">
 | |
|               </ai-table>
 | |
|               <ai-table
 | |
|                 v-show="currIndex === 1"
 | |
|                 :tableData="info.administrativeSanctionList"
 | |
|                 :col-configs="colConfigs2"
 | |
|                 :isShowPagination="false"
 | |
|                 border
 | |
|                 tableSize="small"
 | |
|                 @getList="() => {}">
 | |
|               </ai-table>
 | |
|               <ai-table
 | |
|                 v-show="currIndex === 2"
 | |
|                 :tableData="info.taxInfoList"
 | |
|                 :col-configs="colConfigs3"
 | |
|                 :isShowPagination="false"
 | |
|                 border
 | |
|                 tableSize="small"
 | |
|                 @getList="() => {}">
 | |
|               </ai-table>
 | |
|               <ai-table
 | |
|                 v-show="currIndex === 3"
 | |
|                 :tableData="info.dishonestPersonList"
 | |
|                 :col-configs="colConfigs4"
 | |
|                 :isShowPagination="false"
 | |
|                 border
 | |
|                 tableSize="small"
 | |
|                 @getList="() => {}">
 | |
|               </ai-table>
 | |
|             </div>
 | |
|           </div>
 | |
|         </ai-dialog>
 | |
|       </template>
 | |
|       
 | |
|     </ai-detail>
 | |
|   </section>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| import {mapState} from "vuex";
 | |
| 
 | |
| export default {
 | |
|   name: "needsDetail",
 | |
|   props: {
 | |
|     instance: Function,
 | |
|     dict: Object,
 | |
|     permissions: Function,
 | |
|     row: Object,
 | |
|   },
 | |
|   computed: {
 | |
|     ...mapState(['user']),
 | |
|     isFinanceUser() {
 | |
|       return !!this.user.financeUser?.id
 | |
|     }
 | |
|   },
 | |
|   data() {
 | |
|     return {
 | |
|       detail: {},
 | |
|       info: {},
 | |
|       currIndex: 0,
 | |
|       isShow: false,
 | |
|       colConfigs1: [
 | |
|         { prop: 'licenseCode', label: '行政许可决定文书号' },
 | |
|         { prop: 'decisionDate', align: 'center', label: '许可决定日期' },
 | |
|         { prop: 'endDate', align: 'center', label: '许可有效期至' },
 | |
|         { prop: 'licenseOrganization', align: 'center', label: '许可机关' }, 
 | |
|         { prop: 'licenseContent', align: 'center', label: '许可内容' }, 
 | |
|         { prop: 'createTime', align: 'center', label: '数据更新时间' }
 | |
|       ],
 | |
|       colConfigs2: [
 | |
|         { prop: 'sanctionCode', width: '190', label: '行政处罚决定文书号' },
 | |
|         { prop: 'sanctionDate', align: 'center', label: '处罚决定日期' },
 | |
|         { prop: 'sanctionType', align: 'center', label: '处罚类型', formart: v => this.$dict.getLabel('administrativeSanctionType', v)  },
 | |
|         { prop: 'sanctionContent', align: 'center', label: '处罚内容' }, 
 | |
|         { prop: 'sanctionBasis', align: 'center', label: '处罚依据' }, 
 | |
|         { prop: 'sanctionOrganization', align: 'center', label: '处罚机关' }, 
 | |
|         { prop: 'createTime', align: 'center', label: '数据更新时间' }
 | |
|       ],
 | |
|       colConfigs3: [
 | |
|         { prop: 'taxpayer', label: '纳税人名称' },
 | |
|         { prop: 'taxpayerNumber', align: 'center', label: '纳税人识别号' },
 | |
|         { prop: 'taxLevel', align: 'center', label: '纳税人等级' },
 | |
|         { prop: 'taxYear', align: 'center', label: '年份' }, 
 | |
|         { prop: 'evaluationUnit', align: 'center', label: '评价单位' }, 
 | |
|         { prop: 'createTime', align: 'center', label: '数据更新时间' }
 | |
|       ],
 | |
|       colConfigs4: [
 | |
|         { prop: 'executionCode', label: '执行案号' },
 | |
|         { prop: 'executionTime', align: 'center', label: '执行时间' },
 | |
|         { prop: 'dishonestFact', align: 'center', label: '失信事实' },
 | |
|         { prop: 'executionSituation', align: 'center', label: '履行情况',  formart: v => this.$dict.getLabel('dishonestPersonSituation', v) },
 | |
|         { prop: 'executionCourt', align: 'center', label: '执行法院' }, 
 | |
|         { prop: 'executionTime', align: 'center', label: '数据更新时间' }
 | |
|       ],
 | |
|     }
 | |
|   },
 | |
|   methods: {
 | |
|     getDetail() {
 | |
|       let {id} = this.row
 | |
|       this.instance.post("/appfinancingdemand/queryDetailById", null, {
 | |
|         params: {id}
 | |
|       }).then(res => {
 | |
|         if (res?.data) {
 | |
|           this.detail = res.data
 | |
|           if(this.detail.enterpriseId) {
 | |
|             this.getCompanyInfo()
 | |
|           }
 | |
|         }
 | |
|       })
 | |
|     },
 | |
|     getCompanyInfo() {
 | |
|       this.instance.post(`/appportaluserenterprise/queryCreditEnterpriseDetailById?id=${this.detail.enterpriseId}`, null, {
 | |
|         withoutToken: true
 | |
|       }).then(res => {
 | |
|         if (res.code === 0) {
 | |
|           this.info = res.data
 | |
|           this.info.subEnterpriseName = res.data.enterpriseName.substr(0, 4)
 | |
|         }
 | |
|       })
 | |
|     },
 | |
|     handleGrab() {
 | |
|       this.instance.post("/appfinancingdemand/obtain", null, {
 | |
|         params: {id: this.detail.id}
 | |
|       }).then(res => {
 | |
|         if (res.code == 0) {
 | |
|           this.$message.success("抢单成功!")
 | |
|           this.$router.push({name: "27338cb83e77461dbd44356a6760df86"})
 | |
|         }
 | |
|       })
 | |
|     },
 | |
|     handleCancel() {
 | |
|       this.$confirm("是否要取消本次融资需求发布?").then(() => {
 | |
|         this.instance.post("/appfinancingdemand/cancelObtain", null, {
 | |
|           params: {id: this.detail.id}
 | |
|         }).then(res => {
 | |
|           if (res.code == 0) {
 | |
|             this.$message.success("需求取消成功")
 | |
|             this.back()
 | |
|           }
 | |
|         })
 | |
|       }).catch(() => 0)
 | |
|     },
 | |
|     back() {
 | |
|       this.$emit('goBack')
 | |
|     }
 | |
|   },
 | |
|   created() {
 | |
|     this.dict.load("productRepaymentTimeline", "financialFundPurpose","financingDemandApplyType", "enterpriseType", "dishonestPersonSituation", "administrativeSanctionType").then(() => {
 | |
|       this.getDetail()
 | |
|     })
 | |
|   }
 | |
| }
 | |
| </script>
 | |
| 
 | |
| <style lang="scss" scoped>
 | |
| .needsDetail {
 | |
|   height: 100%;
 | |
| 
 | |
|   .flexWrap {
 | |
|     flex-wrap: wrap;
 | |
| 
 | |
|     .el-form-item {
 | |
|       width: 50%;
 | |
|     }
 | |
|   }
 | |
| 
 | |
|     .dialog {
 | |
|     .top {
 | |
|       display: flex;
 | |
|       margin-bottom: 20px;
 | |
|       padding: 34px 30px 16px; 
 | |
|       border: 1px solid #EEEEEE;
 | |
|       border-radius: 4px;
 | |
| 
 | |
|       .top-left {
 | |
|         display: flex;
 | |
|         align-items: center;
 | |
|         justify-content: center;
 | |
|         flex-shrink: 1;
 | |
|         width: 88px;
 | |
|         height: 87px;
 | |
|         line-height: 1.3;
 | |
|         margin-right: 31px;
 | |
|         padding: 0 16px;
 | |
|         text-align: justify;
 | |
|         background: #8CA3CD;
 | |
|         color: #FFFFFF;
 | |
|         font-size: 22px;
 | |
|         letter-spacing: 6px;
 | |
|         border-radius: 8px;
 | |
|       }
 | |
| 
 | |
|       .top-right {
 | |
|         flex: 1;
 | |
| 
 | |
|         .top-right__top {
 | |
|           display: flex;
 | |
|           align-items: center;
 | |
|           justify-content: space-between;
 | |
|           margin-bottom: 27px;
 | |
| 
 | |
|           h2 {
 | |
|             color: #333333;
 | |
|             font-size: 22px;
 | |
|           }
 | |
| 
 | |
|           .right {
 | |
|             display: flex;
 | |
|             align-items: center;
 | |
|             justify-content: center;
 | |
|             width: 97px;
 | |
|             height: 32px;
 | |
|             background: #E8F4FF;
 | |
|             border: 1px solid #A3D3FF;
 | |
|             border-radius: 3px;
 | |
|             color: #1890FF;
 | |
|             font-size: 13px;
 | |
|             cursor: pointer;
 | |
| 
 | |
|             &:hover {
 | |
|               opacity: 0.6;
 | |
|             }
 | |
|           }
 | |
|         }
 | |
| 
 | |
|         .top-right__bottom {
 | |
|           padding: 16px 10px 10px 0;
 | |
|           background: #F6FBFF;
 | |
|         }
 | |
|       }
 | |
|     }
 | |
| 
 | |
|     .bottom {
 | |
|       padding-bottom: 20px;
 | |
|       border: 1px solid #DCDFE6;
 | |
|       border-radius: 4px;
 | |
| 
 | |
|       .tab {
 | |
|         display: flex;
 | |
|         align-items: center;
 | |
|         height: 60px;
 | |
|         margin-bottom: 15px;
 | |
|         background: #FAFAFA;
 | |
|         border-radius: 4px;
 | |
| 
 | |
|         span {
 | |
|           flex: 1;
 | |
|           height: 100%;
 | |
|           line-height: 60px;
 | |
|           text-align: center;
 | |
|           color: #555555;
 | |
|           font-size: 16px;
 | |
|           cursor: pointer;
 | |
|           border-bottom: 1px solid #DCDFE6;
 | |
|           border-right: 1px solid #DCDFE6;
 | |
|           transition: all ease 0.3s;
 | |
|           user-select: none;
 | |
| 
 | |
|           &:last-child {
 | |
|             border-right: none;
 | |
|           }
 | |
| 
 | |
|           &.active {
 | |
|             border-bottom: 1px solid transparent;
 | |
|             background: #fff;
 | |
|             color: #1890FF;
 | |
|           }
 | |
|         }
 | |
|       }
 | |
| 
 | |
|       .table {
 | |
|         padding: 0 16px;
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| }
 | |
| </style>
 |