| @@ -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": "", | |||