@@ -1,7 +1,7 @@ | |||
/** | |||
* api接口统一管理 | |||
*/ | |||
import {get } from "../utils/http"; | |||
import {get, post } from "../utils/http"; | |||
// 获取园区企业列表 | |||
export const getCompanyList = p => get("/areaCompany/getCompanyList", p); | |||
@@ -12,6 +12,12 @@ export const getCompanyById = p => get("/areaCompany/getCompanyById", p); | |||
// 获取所属行业 | |||
export const getOwnerIntermediaryList = p => get("/areaCompany/getOwnerIntermediaryList", p); | |||
// 企业认领 | |||
export const addCompanyClaim = p => post("/areaCompany/addCompanyClaim", p); | |||
// 编辑企业信息 | |||
export const updateCompany = p => post("/areaCompany/updateCompany", p); | |||
// 获取园区资讯列表 | |||
export const getCompanyNewsList = p => get("/areaCompany/getCompanyNewsList", p); | |||
@@ -1,12 +1,12 @@ | |||
<!-- 园区企业详情 --> | |||
<template> | |||
<div class=""> | |||
<div class="" v-loading="pageLoading"> | |||
<section class="nav_box"> | |||
<Nav></Nav> | |||
<div class="second_nv"> | |||
<div> | |||
<div class="position"> | |||
<img src="" alt="" /> | |||
<img src="@assets/image/company/icon_address.png" alt="地址" /> | |||
<span> | |||
当前位置: | |||
<span class="pointer" @click="$router.push('/company-list')"> | |||
@@ -18,29 +18,55 @@ | |||
</div> | |||
</div> | |||
</div> | |||
<div class="detail_box"> | |||
<div class="detail_box" v-if="companyInfo"> | |||
<section class="top_box"> | |||
<div class="company_img_box"> | |||
<img class="company_img" src="" alt="" /> | |||
<div class="tip_img"></div> | |||
<div class="tip_img"> | |||
<span | |||
:class="[ | |||
'claim_state', | |||
companyInfo.claimState.text === '已认领' | |||
? 'claimed' | |||
: 'not_claim', | |||
]" | |||
> | |||
{{ companyInfo.claimState.text }} | |||
</span> | |||
</div> | |||
</div> | |||
<div class="right_box"> | |||
<div class="top_row"> | |||
<span>{{ companyInfo.companyName }}</span> | |||
<div> | |||
<span class="pointer"> | |||
<img src="@assets/image/company/icon_save.png" alt="保存" /> | |||
保存 | |||
</span> | |||
<span class="pointer"> | |||
<img src="@assets/image/company/icon_cancel.png" alt="取消" /> | |||
取消 | |||
</span> | |||
<span class="pointer"> | |||
<img src="@assets/image/company/icon_edit.png" alt="编辑" /> | |||
编辑 | |||
</span> | |||
<span class="pointer"> | |||
<template v-if="canEdit == 1"> | |||
<template v-if="isEditing"> | |||
<span class="pointer" @click="updateCompany"> | |||
<img | |||
src="@assets/image/company/icon_save.png" | |||
alt="保存" | |||
/> | |||
保存 | |||
</span> | |||
<span class="pointer" @click="cancelEdit"> | |||
<img | |||
src="@assets/image/company/icon_cancel.png" | |||
alt="取消" | |||
/> | |||
取消 | |||
</span> | |||
</template> | |||
<span v-else class="pointer" @click="isEditing = true"> | |||
<img src="@assets/image/company/icon_edit.png" alt="编辑" /> | |||
编辑 | |||
</span> | |||
</template> | |||
<span | |||
class="pointer" | |||
v-if="canEdit == 0 && companyInfo.claimState.text !== '已认领'" | |||
@click="setClaimDialog" | |||
> | |||
<img src="@assets/image/company/icon_claim.png" alt="认领" /> | |||
认领 | |||
</span> | |||
@@ -48,13 +74,14 @@ | |||
</div> | |||
<div class="middle_row"> | |||
<div class="company_type"> | |||
<span>{{ companyInfo.enterpriseLabel }}</span> | |||
<span>科技型中小企业</span> | |||
<span>科技型中小企业</span> | |||
<span>科技型中小企业</span> | |||
<template v-if="enterpriseLabel.length > 0"> | |||
<span v-for="item in enterpriseLabel" :key="item"> | |||
{{ item }} | |||
</span> | |||
</template> | |||
</div> | |||
<div class="time"> | |||
<img src="" alt="" /> | |||
<img src="@assets/image/company/icon_update.png" alt="保存" /> | |||
<span> | |||
更新时间:{{ | |||
companyInfo.modifiedOn | formatDate("YYYY-MM-DD") | |||
@@ -87,32 +114,45 @@ | |||
</div> | |||
<div> | |||
邮箱: | |||
<span>{{ companyInfo.email }}</span> | |||
<span>{{ companyInfo.email || "--" }}</span> | |||
</div> | |||
</div> | |||
</div> | |||
</section> | |||
<div class="tab_box"> | |||
<div class="tab_box" ref="boxFixed"> | |||
<span | |||
:class="['pointer', activeTab === item.value ? 'active' : '']" | |||
v-for="item in tabs" | |||
v-for="(item, index) in tabs" | |||
:key="item.value" | |||
@click="changeTab(item)" | |||
@click="changeTab(item, index)" | |||
> | |||
{{ item.name }} | |||
</span> | |||
</div> | |||
</div> | |||
</section> | |||
<section class="content_box"> | |||
<basic-info :companyInfo="companyInfo"></basic-info> | |||
<company-dev :companyInfo="companyInfo"></company-dev> | |||
<section class="content_box" v-if="companyInfo"> | |||
<basic-info | |||
class="content_item" | |||
refs="content1" | |||
:companyInfo="companyInfo" | |||
></basic-info> | |||
<company-dev | |||
class="content_item" | |||
refs="content2" | |||
:companyInfo="companyInfo" | |||
></company-dev> | |||
<!-- <intellectual-property :companyInfo="companyInfo"></intellectual-property> --> | |||
<other-info :companyInfo="companyInfo"></other-info> | |||
<other-info | |||
class="content_item" | |||
refs="content4" | |||
:companyInfo="companyInfo" | |||
:isEditing="isEditing" | |||
></other-info> | |||
</section> | |||
<Footer></Footer> | |||
<claim-dialog></claim-dialog> | |||
<claim-dialog v-if="showClaimDialog" :claimDialog="claimDialog"></claim-dialog> | |||
</div> | |||
</template> | |||
@@ -126,7 +166,7 @@ import CompanyDev from "./components/CompanyDev.vue"; | |||
// import IntellectualProperty from "./components/IntellectualProperty.vue"; | |||
import OtherInfo from "./components/OtherInfo.vue"; | |||
import ClaimDialog from "./components/ClaimDialog.vue"; | |||
import { getCompanyById } from "@api/company"; | |||
import { getCompanyById, updateCompany } from "@api/company"; | |||
export default { | |||
//import引入的组件需要注入到对象中才能使用 | |||
@@ -163,21 +203,40 @@ export default { | |||
], | |||
activeTab: 1, | |||
companyInfo: null, | |||
showClaimDialog: false, | |||
claimDialog: false, | |||
canEdit: 0, | |||
isEditing: false, | |||
}; | |||
}, | |||
//监听属性 类似于data概念 | |||
computed: {}, | |||
computed: { | |||
enterpriseLabel() { | |||
return this.companyInfo?.enterpriseLabel?.text ?? []; | |||
}, | |||
}, | |||
//监控data中的数据变化 | |||
watch: {}, | |||
//方法集合 | |||
methods: { | |||
changeTab(item) { | |||
// 锚点点击事件 | |||
changeTab(item, index) { | |||
this.activeTab = item.value; | |||
let jumpDom = document.querySelectorAll(".content_item")[index]; | |||
let scrollTop = jumpDom.offsetTop; // 获取需要滚动的距离 | |||
window.scrollTo({ | |||
top: scrollTop, | |||
behavior: "smooth", // 平滑滚动 | |||
}); | |||
location.href = `#content${this.activeTab}`; | |||
}, | |||
getData() { | |||
let params = { | |||
companyId: this.companyId, | |||
}; | |||
this.pageLoading = true; | |||
getCompanyById(params) | |||
.then(res => { | |||
console.log(res.data); | |||
@@ -192,9 +251,32 @@ export default { | |||
this.$message.error(`获取数据失败,失败原因${err},请刷新重试!`); | |||
}); | |||
}, | |||
setClaimDialog() { | |||
this.showClaimDialog = true; | |||
this.claimDialog = true; | |||
}, | |||
cancelEdit() { | |||
this.isEditing = false; | |||
}, | |||
updateCompany() { | |||
updateCompany(this.companyInfo) | |||
.then(res => { | |||
console.log(res.data); | |||
if (res.data.status == 0) { | |||
this.isEditing = false; | |||
this.$message.success(`保存成功!`); | |||
} else { | |||
this.$message.error(`保存失败,请刷新重试!`); | |||
} | |||
}) | |||
.catch(err => { | |||
this.$message.error(`保存失败,失败原因${err},请刷新重试!`); | |||
}); | |||
}, | |||
}, | |||
//生命周期 - 创建完成(可以访问当前this实例) | |||
created() { | |||
this.canEdit = this.$route.query.canEdit; | |||
this.companyId = this.$route.query.companyId; | |||
this.getData(); | |||
}, | |||
@@ -207,6 +289,10 @@ export default { | |||
.nav_box { | |||
background: url("~@assets/image/company/bg_company.png") no-repeat; | |||
position: relative; | |||
overflow: visible; | |||
// position: sticky; | |||
// top: 0; | |||
// z-index: 2; | |||
.second_nv { | |||
@include size(100%, 250px); | |||
> div { | |||
@@ -219,8 +305,7 @@ export default { | |||
.position { | |||
@include flex(row, flex-start, center, null); | |||
img { | |||
@include size(16px, 16px); | |||
background: #ffffff; | |||
// @include size(16px, 16px); | |||
margin-right: 6px; | |||
} | |||
padding-top: 10px; | |||
@@ -248,6 +333,9 @@ export default { | |||
border: solid 1px #bcd8e9; | |||
@include border-box; | |||
background: #ffffff; | |||
position: sticky; | |||
top: 0; | |||
z-index: 2; | |||
span { | |||
@include size(200px, 50px); | |||
@include font(16px, #637485); | |||
@@ -271,10 +359,22 @@ export default { | |||
} | |||
.tip_img { | |||
@include size(68px, 22px); | |||
background-image: linear-gradient(135deg, #4bbe8e 0%, #22a76f 100%); | |||
position: absolute; | |||
top: 20px; | |||
left: 0; | |||
.claim_state { | |||
@include size(100%, 100%); | |||
@include flex(row, flex-start, center, null); | |||
@include font(14px, #fff); | |||
padding-left: 6px; | |||
@include border-box; | |||
} | |||
.claimed { | |||
background: url("~@assets/image/company/bg_claimed.png") no-repeat; | |||
} | |||
.not_claim { | |||
background: url("~@assets/image/company/bg_not_claim.png") no-repeat; | |||
} | |||
} | |||
} | |||
.right_box { | |||
@@ -295,7 +395,6 @@ export default { | |||
> span { | |||
img { | |||
@include size(20px, 20px); | |||
background: #fff; | |||
margin-right: 8px; | |||
} | |||
@include size(90px, 30px); | |||
@@ -322,8 +421,7 @@ export default { | |||
.time { | |||
@include flex(row, center, center, null); | |||
img { | |||
@include size(20px, 20px); | |||
background: #fff; | |||
// @include size(20px, 20px); | |||
margin-right: 8px; | |||
} | |||
@include font(14px, #637485); |
@@ -15,7 +15,7 @@ | |||
<td class="table_title">法人代表:</td> | |||
<td>{{ companyInfo.legalPerson }}</td> | |||
<td class="table_title">登记状态:</td> | |||
<td>{{ JSON.parse(companyInfo.claimState).text }}</td> | |||
<td>{{ companyInfo.claimState.text }}</td> | |||
<td class="table_title width_100">成立日期:</td> | |||
<td>{{ companyInfo.establishOn | formatDate("YYYY.MM.DD") }}</td> | |||
</tr> | |||
@@ -23,7 +23,7 @@ | |||
<td class="table_title">所属行业:</td> | |||
<td colspan="3">{{ companyInfo.ownerIndustry }}</td> | |||
<td class="table_title width_100">企业类型:</td> | |||
<td>{{ companyInfo.enterpriseType }}</td> | |||
<td>{{ companyInfo.enterpriseType.text }}</td> | |||
</tr> | |||
<tr class="table_row"> | |||
<td class="table_title">营业期限:</td> |
@@ -3,7 +3,7 @@ | |||
<div class=""> | |||
<el-dialog | |||
class="dialog_box" | |||
:visible.sync="dialogTableVisible" | |||
:visible.sync="claimDialog" | |||
:show-close="false" | |||
:close-on-click-modal="false" | |||
:close-on-press-escape="false" | |||
@@ -12,51 +12,80 @@ | |||
> | |||
<div slot="title" class="header_title"> | |||
<span class="title_text">企业认领</span> | |||
<img class="pointer" src="" alt="关闭" @click="dialogTableVisible = false" /> | |||
<img | |||
class="pointer" | |||
src="@assets/image/company/icon_close.png" | |||
alt="关闭" | |||
@click="claimDialog = false" | |||
/> | |||
</div> | |||
<div class="dialog_content"> | |||
<el-form label-position="right" label-width="95px"> | |||
<el-form-item label="企业名称"> | |||
<el-input v-model="input"></el-input> | |||
<el-input v-model.trim="companyClaimInfo.companyClaimName"></el-input> | |||
</el-form-item> | |||
<el-form-item label="法人身份证"> | |||
<el-input v-model="companyClaimInfo.idCard"></el-input> | |||
</el-form-item> | |||
<el-form-item label="法人姓名"> | |||
<el-input v-model="companyClaimInfo.name"></el-input> | |||
</el-form-item> | |||
<el-form-item label="认领资料"> | |||
<div class="upload_box"> | |||
<el-upload | |||
class="avatar-uploader" | |||
action="https://jsonplaceholder.typicode.com/posts/" | |||
:show-file-list="false" | |||
:on-success="handleAvatarSuccess" | |||
:before-upload="beforeAvatarUpload" | |||
accept=".jpg,.png,.jpeg" | |||
action="#" | |||
:http-request=" | |||
file => { | |||
afterReadUrl(file, 1); | |||
} | |||
" | |||
> | |||
<img v-if="imageUrl" :src="imageUrl" class="avatar" /> | |||
<img v-if="imageUrl1" :src="imageUrl1" class="avatar" /> | |||
<div v-else class="upload_text"> | |||
<img class="upload_icon" src="" alt="" /> | |||
<div class="upload_icon upload1"> | |||
<img src="@assets/image/company/icon_upload.png" alt="" /> | |||
</div> | |||
<div class="upload_tip">营业执照(或其他材料)</div> | |||
</div> | |||
</el-upload> | |||
<el-upload | |||
class="avatar-uploader" | |||
action="https://jsonplaceholder.typicode.com/posts/" | |||
:show-file-list="false" | |||
:on-success="handleAvatarSuccess" | |||
:before-upload="beforeAvatarUpload" | |||
accept=".jpg,.png,.jpeg" | |||
action="#" | |||
:http-request=" | |||
file => { | |||
afterReadUrl(file, 2); | |||
} | |||
" | |||
> | |||
<img v-if="imageUrl" :src="imageUrl" class="avatar" /> | |||
<img v-if="imageUrl2" :src="imageUrl2" class="avatar" /> | |||
<div v-else class="upload_text"> | |||
<img class="upload_icon" src="" alt="" /> | |||
<div class="upload_icon upload2"> | |||
<img src="@assets/image/company/icon_upload.png" alt="" /> | |||
</div> | |||
<div class="upload_tip">法人身份证(头像面) 或其他材料</div> | |||
</div> | |||
</el-upload> | |||
<el-upload | |||
class="avatar-uploader" | |||
action="https://jsonplaceholder.typicode.com/posts/" | |||
:show-file-list="false" | |||
:on-success="handleAvatarSuccess" | |||
:before-upload="beforeAvatarUpload" | |||
accept=".jpg,.png,.jpeg" | |||
action="#" | |||
:http-request=" | |||
file => { | |||
afterReadUrl(file, 3); | |||
} | |||
" | |||
> | |||
<img v-if="imageUrl" :src="imageUrl" class="avatar" /> | |||
<img v-if="imageUrl3" :src="imageUrl3" class="avatar" /> | |||
<div v-else class="upload_text"> | |||
<img class="upload_icon" src="" alt="" /> | |||
<div class="upload_icon upload3"> | |||
<img src="@assets/image/company/icon_upload.png" alt="" /> | |||
</div> | |||
<div class="upload_tip">授权书</div> | |||
</div> | |||
</el-upload> | |||
@@ -67,11 +96,15 @@ | |||
<ul> | |||
<li> | |||
1、不同组织机构请根据提示上传指定材料, | |||
<span class="color_blue pointer">查看详情;</span> | |||
<span class="color_blue pointer" @click="materialDialog = true"> | |||
查看详情; | |||
</span> | |||
</li> | |||
<li> | |||
2、 | |||
<span class="color_blue pointer">点击生成并下载授权书</span> | |||
<span class="color_blue pointer" @click="authorizeDialog = true"> | |||
点击生成并下载授权书 | |||
</span> | |||
,填写完成后拍照上传,注意授权书填写完整,拍摄清晰,使用手写签名和实体公章; | |||
</li> | |||
<li>3、支持jpg、jpeg、png格式,图片大小不超过2M;</li> | |||
@@ -84,7 +117,12 @@ | |||
</ul> | |||
</el-form-item> | |||
<el-form-item> | |||
<el-button class="submit_btn" type="primary" :loading="loading"> | |||
<el-button | |||
class="submit_btn" | |||
type="primary" | |||
:loading="btnLoading" | |||
@click="submit" | |||
> | |||
提交审核 | |||
</el-button> | |||
</el-form-item> | |||
@@ -94,7 +132,7 @@ | |||
<el-dialog | |||
class="dialog_box" | |||
:visible.sync="dialogTableVisible1" | |||
:visible.sync="materialDialog" | |||
:show-close="false" | |||
:close-on-click-modal="false" | |||
:close-on-press-escape="false" | |||
@@ -103,7 +141,12 @@ | |||
> | |||
<div slot="title" class="header_title"> | |||
<span class="title_text">认领材料</span> | |||
<img class="pointer" src="" alt="关闭" @click="dialogTableVisible1 = false" /> | |||
<img | |||
class="pointer" | |||
src="@assets/image/company/icon_close.png" | |||
alt="关闭" | |||
@click="materialDialog = false" | |||
/> | |||
</div> | |||
<div class="dialog_content"> | |||
<div class="claim_tip"> | |||
@@ -116,7 +159,7 @@ | |||
</div> | |||
</div> | |||
<div class="btn_width"> | |||
<el-button class="submit_btn" type="primary" :loading="loading"> | |||
<el-button class="submit_btn" type="primary" @click="materialDialog = false"> | |||
我知道了 | |||
</el-button> | |||
</div> | |||
@@ -125,7 +168,7 @@ | |||
<el-dialog | |||
class="dialog_box" | |||
:visible.sync="dialogTableVisible3" | |||
:visible.sync="authorizeDialog" | |||
:show-close="false" | |||
:close-on-click-modal="false" | |||
:close-on-press-escape="false" | |||
@@ -134,7 +177,12 @@ | |||
> | |||
<div slot="title" class="header_title"> | |||
<span class="title_text">企业认领授权书</span> | |||
<img class="pointer" src="" alt="关闭" @click="dialogTableVisible3 = false" /> | |||
<img | |||
class="pointer" | |||
src="@assets/image/company/icon_close.png" | |||
alt="关闭" | |||
@click="authorizeDialog = false" | |||
/> | |||
</div> | |||
<div class="dialog_content"> | |||
<div class="authorize_box"> | |||
@@ -147,22 +195,21 @@ | |||
确认授权 | |||
<span class="color_blue">姓名</span> | |||
(身份证号: | |||
<span class="color_blue">141181198909230120</span> | |||
<span class="color_blue">身份证号</span> | |||
) | |||
</span> | |||
<span style="margin-bottom:70px;"> | |||
代表本企业向贵公司完成企业认领,执行企业信息维护和管理功能。 | |||
</span> | |||
<span class="authorize_position">盖章处:</span> | |||
<span class="authorize_position">日期:2022-09-20</span> | |||
<span class="authorize_position">日期:</span> | |||
</div> | |||
<div class="btn_box"> | |||
<div> | |||
<el-button class="pre_btn" type="primary" :loading="loading"> | |||
<!-- <div> | |||
<el-button class="pre_btn" type="primary"> | |||
上一步 | |||
</el-button> | |||
</div> | |||
</div> --> | |||
<div> | |||
<el-button class="submit_btn" type="primary" :loading="loading"> | |||
下载授权书 | |||
@@ -177,17 +224,30 @@ | |||
<script> | |||
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等) | |||
//例如:import 《组件名称》 from '《组件路径》'; | |||
import { upload } from "@api/common"; | |||
import { addCompanyClaim } from "@api/company"; | |||
export default { | |||
props: { | |||
claimDialog: { | |||
types: Boolean, | |||
required: false, | |||
default: false, | |||
}, | |||
}, | |||
//import引入的组件需要注入到对象中才能使用 | |||
components: {}, | |||
data() { | |||
//这里存放数据 | |||
return { | |||
dialogTableVisible: false, | |||
dialogTableVisible1: false, | |||
dialogTableVisible3: false, | |||
input: "", | |||
companyClaimInfo: { | |||
companyClaimName: "", | |||
idCard: "", | |||
name: "", | |||
data: "", | |||
}, | |||
materialDialog: false, | |||
authorizeDialog: false, | |||
material: [ | |||
{ | |||
title: "普通企业", | |||
@@ -210,6 +270,14 @@ export default { | |||
value: "基金会法人登记证书 + 法定代表人身份证(头像面)", | |||
}, | |||
], | |||
btnLoading: false, | |||
loading: false, | |||
imageUrl1: "", | |||
imageUrl1Loading: false, | |||
imageUrl2: "", | |||
imageUrl2Loading: false, | |||
imageUrl3: "", | |||
imageUrl3Loading: false, | |||
}; | |||
}, | |||
//监听属性 类似于data概念 | |||
@@ -218,20 +286,77 @@ export default { | |||
watch: {}, | |||
//方法集合 | |||
methods: { | |||
handleAvatarSuccess(res, file) { | |||
this.imageUrl = URL.createObjectURL(file.raw); | |||
}, | |||
beforeAvatarUpload(file) { | |||
const isJPG = file.type === "image/jpeg"; | |||
const isLt2M = file.size / 1024 / 1024 < 2; | |||
if (!isJPG) { | |||
this.$message.error("上传头像图片只能是 JPG 格式!"); | |||
submit() { | |||
if (!this.companyClaimInfo.companyClaimName) { | |||
this.$message.error(`请填写企业名称!`); | |||
return; | |||
} | |||
if (!this.companyClaimInfo.idCard) { | |||
this.$message.error(`请填写法人身份证!`); | |||
return; | |||
} | |||
if (!isLt2M) { | |||
this.$message.error("上传头像图片大小不能超过 2MB!"); | |||
if (!this.companyClaimInfo.name) { | |||
this.$message.error(`请填写法人姓名!`); | |||
return; | |||
} | |||
return isJPG && isLt2M; | |||
if (!this.imageUrl1) { | |||
this.$message.error(`请上传营业执照(或其他材料)!`); | |||
return; | |||
} | |||
if (!this.imageUrl2) { | |||
this.$message.error(`请上传法人身份证(头像面)或其他材料!`); | |||
return; | |||
} | |||
if (!this.imageUrl3) { | |||
this.$message.error(`请上传授权书!`); | |||
return; | |||
} | |||
this.companyClaimInfo.data = [this.imageUrl1, this.imageUrl2, this.imageUrl3].join(","); | |||
this.setData(); | |||
}, | |||
setData() { | |||
this.btnLoading = true; | |||
addCompanyClaim(this.companyClaimInfo) | |||
.then(res => { | |||
console.log(res.data); | |||
if (res.data.status == 0) { | |||
this.companyInfo = res.data.data; | |||
} else { | |||
this.$message.error(`提交失败,请刷新重试!`); | |||
} | |||
this.btnLoading = false; | |||
}) | |||
.catch(err => { | |||
this.$message.error(`提交失败,失败原因${err},请刷新重试!`); | |||
}); | |||
}, | |||
async afterReadUrl(file, imgUrlIndex) { | |||
this.$data[`imageUrl${imgUrlIndex}`] = ""; | |||
this.$data[`imageUrl${imgUrlIndex}Loading`] = true; | |||
let photo2Url = await this.uploadImg(file, `imageUrl${imgUrlIndex}Loading`); | |||
this.$data[`imageUrl${imgUrlIndex}`] = photo2Url; | |||
this.$forceUpdate(); | |||
}, | |||
// 上传图片 | |||
async uploadImg(file, dataKey) { | |||
let imgUrl; | |||
const formData = new FormData(); // 声明一个FormData对象 | |||
formData.append("uploadFile", file.file); | |||
await upload(formData) | |||
.then(res => { | |||
if (res.data.status == 0) { | |||
imgUrl = res.data.data; | |||
this.$data[dataKey] = false; | |||
} else { | |||
this.$message.error("上传失败,请重新上传!"); | |||
} | |||
}) | |||
.catch(error => { | |||
this.$data[dataKey] = false; | |||
this.$message.error("上传失败,请重新上传!"); | |||
console.log(error); | |||
}); | |||
return imgUrl; | |||
}, | |||
}, | |||
//生命周期 - 创建完成(可以访问当前this实例) | |||
@@ -306,7 +431,21 @@ export default { | |||
@include flex(column, space-between, center, nowrap); | |||
.upload_icon { | |||
@include size(118px, 70px); | |||
background: pink; | |||
@include flex(row, center, flex-end, nowrap); | |||
padding-bottom: 6px; | |||
@include border-box; | |||
} | |||
.upload1 { | |||
background: url("~@assets/image/company/bg_upload_1.png") no-repeat; | |||
background-size: 100% 100%; | |||
} | |||
.upload2 { | |||
background: url("~@assets/image/company/bg_upload_2.png") no-repeat; | |||
background-size: 100% 100%; | |||
} | |||
.upload3 { | |||
background: url("~@assets/image/company/bg_upload_3.png") no-repeat; | |||
background-size: 100% 100%; | |||
} | |||
.upload_tip { | |||
line-height: initial; | |||
@@ -367,6 +506,7 @@ export default { | |||
} | |||
.authorize_box { | |||
border: 1px solid #0977d8; | |||
background: #c7e7fe; | |||
padding: 16px 50px 16px 20px; | |||
border-radius: 4px; | |||
@include border-box; |
@@ -11,7 +11,7 @@ | |||
</div> | |||
<table-item | |||
:table-title="websiteTitle" | |||
:table-data="tableData" | |||
:table-data="companyInfo.companyWebsiteList" | |||
:rowHeight="50" | |||
></table-item> | |||
</div> | |||
@@ -21,9 +21,21 @@ | |||
</div> | |||
<table-item | |||
:table-title="foreignInvestmentInfoTitle" | |||
:table-data="companyInfo.foreignInvestmentInfo" | |||
:table-data="companyInfo.companyInitiatorList" | |||
:rowHeight="50" | |||
></table-item> | |||
> | |||
<el-table-column slot="subscribedCapitalOn" label="认缴出资日期"> | |||
<template slot-scope="scope"> | |||
{{ scope.row.subscribedCapitalOn | formatDate("YYYY-MM-DD") }} | |||
</template> | |||
</el-table-column> | |||
<el-table-column slot="paidCapitalContributionOn" label="实缴出资日期"> | |||
<template slot-scope="scope"> | |||
{{ scope.row.paidCapitalContributionOn | formatDate("YYYY-MM-DD") }} | |||
</template> | |||
</el-table-column> | |||
</table-item> | |||
</div> | |||
<div> | |||
<div class="title"> | |||
@@ -31,9 +43,15 @@ | |||
</div> | |||
<table-item | |||
:table-title="financeInfoTitle" | |||
:table-data="companyInfo.financeInfo" | |||
:table-data="companyInfo.companyFinanceInfoList" | |||
:rowHeight="50" | |||
></table-item> | |||
> | |||
<el-table-column slot="date" label="日期"> | |||
<template slot-scope="scope"> | |||
{{ scope.row.date | formatDate("YYYY-MM-DD") }} | |||
</template> | |||
</el-table-column> | |||
</table-item> | |||
</div> | |||
<!-- <div> | |||
<div class="title"> | |||
@@ -69,71 +87,70 @@ export default { | |||
websiteTitle: [ | |||
{ | |||
label: "类型", | |||
property: "date", | |||
property: "type", | |||
}, | |||
{ | |||
label: "名称", | |||
property: "date", | |||
property: "websiteName", | |||
}, | |||
{ | |||
label: "网站", | |||
property: "date", | |||
property: "url", | |||
}, | |||
], | |||
foreignInvestmentInfoTitle: [ | |||
{ | |||
label: "发起人", | |||
property: "date", | |||
property: "sponsor", | |||
}, | |||
{ | |||
label: "认缴出资额(万元)", | |||
property: "date", | |||
property: "subscribedCapital", | |||
}, | |||
{ | |||
label: "认缴出资日期", | |||
property: "date", | |||
property: "subscribedCapitalOn", | |||
slot: "subscribedCapitalOn", | |||
}, | |||
{ | |||
label: "认缴出资方式", | |||
property: "date", | |||
property: "subscribedCapitalWay", | |||
}, | |||
{ | |||
label: "实缴出资额(万元)", | |||
property: "date", | |||
property: "paidCapitalContribution", | |||
}, | |||
{ | |||
label: "实缴出资日期", | |||
property: "date", | |||
slot: "paidCapitalContributionOn", | |||
}, | |||
{ | |||
label: "实缴出资方式", | |||
property: "date", | |||
property: "paidCapitalContributionWay", | |||
}, | |||
], | |||
financeInfoTitle: [ | |||
{ | |||
label: "日期", | |||
property: "date", | |||
slot: "date", | |||
}, | |||
{ | |||
label: "产品名称", | |||
property: "name", | |||
property: "productName", | |||
}, | |||
{ | |||
label: "融资轮次", | |||
property: "address", | |||
property: "financingRounds", | |||
}, | |||
{ | |||
label: "估值金额", | |||
property: "address", | |||
property: "valuationAmount", | |||
}, | |||
{ | |||
label: "融资金额", | |||
property: "address", | |||
property: "financingAmount", | |||
}, | |||
{ | |||
label: "投资机构", | |||
property: "address", | |||
property: "investmentOrganization", | |||
}, | |||
], | |||
honorQualificationTitle: [ | |||
@@ -170,28 +187,6 @@ export default { | |||
property: "address", | |||
}, | |||
], | |||
tableData: [ | |||
{ | |||
date: "2016-05-02", | |||
name: "王小虎", | |||
address: "上海市普陀区金沙江路 1518 弄", | |||
}, | |||
{ | |||
date: "2016-05-04", | |||
name: "王小虎", | |||
address: "上海市普陀区金沙江路 1517 弄", | |||
}, | |||
{ | |||
date: "2016-05-01", | |||
name: "王小虎", | |||
address: "上海市普陀区金沙江路 1519 弄", | |||
}, | |||
{ | |||
date: "2016-05-03", | |||
name: "王小虎", | |||
address: "上海市普陀区金沙江路 1516 弄", | |||
}, | |||
], | |||
}; | |||
}, | |||
//监听属性 类似于data概念 |
@@ -8,7 +8,11 @@ | |||
<span | |||
:class="[ | |||
'claim_state', | |||
companyInfo.claimState.text === '已认领' ? 'claimed' : 'not_claim', | |||
companyInfo && | |||
companyInfo.claimState && | |||
companyInfo.claimState.text === '已认领' | |||
? 'claimed' | |||
: 'not_claim', | |||
]" | |||
> | |||
{{ companyInfo.claimState.text }} |
@@ -8,27 +8,65 @@ | |||
<tr> | |||
<td class="table_title">企业优势:</td> | |||
<td class="content"> | |||
{{ companyInfo.enterpriseAdvantage }} | |||
<el-input | |||
:disabled="!isEditing" | |||
type="textarea" | |||
v-model="companyInfo.enterpriseAdvantage" | |||
></el-input> | |||
</td> | |||
</tr> | |||
<tr> | |||
<td class="table_title">企业文化:</td> | |||
<td class="content"> | |||
{{companyInfo.enterpriseCulture}} | |||
<el-input | |||
:disabled="!isEditing" | |||
type="textarea" | |||
v-model="companyInfo.enterpriseCulture" | |||
></el-input> | |||
</td> | |||
</tr> | |||
<tr> | |||
<td class="table_title">企业风采:</td> | |||
<td class="content"> | |||
<img class="company_img" src="" alt="" /> | |||
<img class="company_img" src="" alt="" /> | |||
<img class="company_img" src="" alt="" /> | |||
<template v-if="!isEditing"> | |||
<img class="company_img" src="" alt="" /> | |||
<img class="company_img" src="" alt="" /> | |||
<img class="company_img" src="" alt="" /> | |||
</template> | |||
<el-upload | |||
v-else | |||
class="avatar-uploader" | |||
list-type="picture-card" | |||
:show-file-list="false" | |||
accept=".jpg,.png,.jpeg" | |||
action="#" | |||
:http-request=" | |||
file => { | |||
afterReadUrl(file, 1); | |||
} | |||
" | |||
> | |||
<img v-if="imageUrl1" :src="imageUrl1" class="avatar" /> | |||
<div v-else class="upload_text"> | |||
<img | |||
class="company_img" | |||
src="@assets/image/company/bg_upload.png" | |||
alt="" | |||
/> | |||
</div> | |||
</el-upload> | |||
</td> | |||
</tr> | |||
<tr> | |||
<td class="table_title">其他信息:</td> | |||
<td class="content"> | |||
{{companyInfo.otherInfo}} | |||
<div> | |||
<el-input | |||
:disabled="!isEditing" | |||
type="textarea" | |||
v-model="companyInfo.otherInfo" | |||
></el-input> | |||
</div> | |||
</td> | |||
</tr> | |||
</table> | |||
@@ -38,6 +76,7 @@ | |||
<script> | |||
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等) | |||
//例如:import 《组件名称》 from '《组件路径》'; | |||
import { upload } from "@api/common"; | |||
export default { | |||
props: { | |||
@@ -45,6 +84,10 @@ export default { | |||
type: Object, | |||
default: () => {}, | |||
}, | |||
isEditing: { | |||
type: Boolean, | |||
default: false, | |||
}, | |||
}, | |||
//import引入的组件需要注入到对象中才能使用 | |||
components: {}, | |||
@@ -57,7 +100,36 @@ export default { | |||
//监控data中的数据变化 | |||
watch: {}, | |||
//方法集合 | |||
methods: {}, | |||
methods: { | |||
async afterReadUrl(file, imgUrlIndex) { | |||
this.$data[`imageUrl${imgUrlIndex}`] = ""; | |||
this.$data[`imageUrl${imgUrlIndex}Loading`] = true; | |||
let photo2Url = await this.uploadImg(file, `imageUrl${imgUrlIndex}Loading`); | |||
this.$data[`imageUrl${imgUrlIndex}`] = photo2Url; | |||
this.$forceUpdate(); | |||
}, | |||
// 上传图片 | |||
async uploadImg(file, dataKey) { | |||
let imgUrl; | |||
const formData = new FormData(); // 声明一个FormData对象 | |||
formData.append("uploadFile", file.file); | |||
await upload(formData) | |||
.then(res => { | |||
if (res.data.status == 0) { | |||
imgUrl = res.data.data; | |||
this.$data[dataKey] = false; | |||
} else { | |||
this.$message.error("上传失败,请重新上传!"); | |||
} | |||
}) | |||
.catch(error => { | |||
this.$data[dataKey] = false; | |||
this.$message.error("上传失败,请重新上传!"); | |||
console.log(error); | |||
}); | |||
return imgUrl; | |||
}, | |||
}, | |||
//生命周期 - 创建完成(可以访问当前this实例) | |||
created() {}, | |||
//生命周期 - 挂载完成(可以访问DOM元素) | |||
@@ -82,6 +154,7 @@ export default { | |||
@include border-box; | |||
} | |||
.table_box { | |||
width: 100%; | |||
border: 1px solid #bcd8e9; | |||
tr { | |||
height: 48px; | |||
@@ -109,11 +182,33 @@ export default { | |||
.content { | |||
padding: 20px; | |||
@include border-box; | |||
.avatar-uploader { | |||
@include size(120px, 96px); | |||
margin-right: 25px; | |||
.upload_text { | |||
@include border-box; | |||
@include size(120px, 96px); | |||
} | |||
::v-deep .el-upload { | |||
@include size(100%, 100%); | |||
cursor: pointer; | |||
position: relative; | |||
overflow: hidden; | |||
} | |||
} | |||
::v-deep .el-upload--picture-card { | |||
border: none; | |||
} | |||
.company_img { | |||
@include size(120px, 96px); | |||
margin-right: 25px; | |||
} | |||
} | |||
::v-deep .el-textarea.is-disabled .el-textarea__inner { | |||
background: #fff; | |||
border: none; | |||
@include font(14px, #334a5f); | |||
} | |||
} | |||
} | |||
</style> |
@@ -2,7 +2,14 @@ | |||
<template> | |||
<div class="table_box"> | |||
<el-table :data="tableData" width="100%" :height="height" :row="rowHeight" border> | |||
<el-table-column type="index" align="center" label="列号" width="80"></el-table-column> | |||
<el-table-column | |||
v-if="index" | |||
type="index" | |||
align="center" | |||
label="列号" | |||
width="80" | |||
></el-table-column> | |||
<template v-for="(item, index) in tableTitle"> | |||
<slot v-if="item.slot" :name="item.slot"></slot> | |||
<el-table-column | |||
@@ -12,8 +19,18 @@ | |||
:label="item.label" | |||
:min-width="item.minWidth ? item.minWidth : ''" | |||
:width="item.width ? item.width : ''" | |||
></el-table-column> | |||
:show-overflow-tooltip="item.overHidden || true" | |||
> | |||
<template slot-scope="scope"> | |||
<span>{{ scope.row[item.property] || "--" }}</span> | |||
</template> | |||
</el-table-column> | |||
</template> | |||
<el-table-column v-if="operation" label="操作" align="center"> | |||
<template slot-scope="scope"> | |||
<slot name="menu" :row="scope.row" :$index="scope.$index" /> | |||
</template> | |||
</el-table-column> | |||
</el-table> | |||
</div> | |||
</template> | |||
@@ -26,28 +43,42 @@ export default { | |||
//import引入的组件需要注入到对象中才能使用 | |||
components: {}, | |||
props: { | |||
// 是否设置序号,默认设置 | |||
index: { | |||
type: Boolean, | |||
default: () => { | |||
return false; | |||
}, | |||
}, | |||
// 表格数据 | |||
tableData: { | |||
// 表格数据 | |||
type: Array, | |||
default: () => { | |||
return []; | |||
}, | |||
}, | |||
// 表头标题 | |||
tableTitle: { | |||
// 表格头标题 | |||
type: Array, | |||
require: true, | |||
}, | |||
// 表格高度 | |||
height: { | |||
// 表格高度 | |||
type: [Number, String], | |||
default: "100%", | |||
}, | |||
// 表格行高 | |||
rowHeight: { | |||
// 表格行高 | |||
type: [Number, String], | |||
default: 44, | |||
}, | |||
// 是否有操作列,默认无 | |||
operation: { | |||
type: Boolean, | |||
default: () => { | |||
return false; | |||
}, | |||
}, | |||
}, | |||
data() { | |||
//这里存放数据 | |||
@@ -58,15 +89,7 @@ export default { | |||
//监控data中的数据变化 | |||
watch: {}, | |||
//方法集合 | |||
methods: { | |||
tableCellStyle() { | |||
// return "border-color: #bcd8e9;"; | |||
}, | |||
// 修改 table header cell的背景色 | |||
tableHeaderCellStyle() { | |||
// return "border-color: #bcd8e9;"; | |||
}, | |||
}, | |||
methods: {}, | |||
//生命周期 - 创建完成(可以访问当前this实例) | |||
created() {}, | |||
//生命周期 - 挂载完成(可以访问DOM元素) |
@@ -24,7 +24,8 @@ module.exports = { | |||
proxy: { | |||
"/domain": { | |||
// target: "http://localhost:80", | |||
target: "http://192.168.18.236:18888/", | |||
// target: "http://192.168.18.236:18888/", | |||
target: "http://192.168.18.138:18888/", | |||
changeOrigin: true, | |||
pathRewrite: { | |||
"^/domain": "", |