Просмотр исходного кода

企业详情

feature/20220929首页静态开发
王露 3 лет назад
Родитель
Сommit
b250e16707

+ 27
- 0
digital-park-web/digital-park/src/mixin/uploadFile.js Просмотреть файл

@@ -0,0 +1,27 @@
import { upload } from "@api/common";
// 导出对象
export const uploadFile = {
methods: {
// 上传文件
async uploadFile(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;
},
},
};

+ 23
- 10
digital-park-web/digital-park/src/views/park-enterprises/Detail.vue Просмотреть файл

@@ -64,7 +64,7 @@
</template>
<span
class="pointer"
v-if="canEdit == 0 && companyInfo.claimState.text !== '已认领'"
v-if="!canEdit && companyInfo.claimState.text !== '已认领'"
@click="setClaimDialog"
>
<img src="@assets/image/company/icon_claim.png" alt="认领" />
@@ -120,7 +120,7 @@
</div>
</section>

<div class="tab_box" ref="boxFixed">
<div class="tab_box">
<span
:class="['pointer', activeTab === item.value ? 'active' : '']"
v-for="(item, index) in tabs"
@@ -133,20 +133,16 @@
</div>
</section>
<section class="content_box" v-if="companyInfo">
<basic-info
class="content_item"
refs="content1"
:companyInfo="companyInfo"
></basic-info>
<basic-info class="content_item" ref="content1" :companyInfo="companyInfo"></basic-info>
<company-dev
class="content_item"
refs="content2"
ref="content2"
:companyInfo="companyInfo"
></company-dev>
<!-- <intellectual-property :companyInfo="companyInfo"></intellectual-property> -->
<other-info
class="content_item"
refs="content4"
ref="content4"
:companyInfo="companyInfo"
:isEditing="isEditing"
></other-info>
@@ -167,6 +163,7 @@ import CompanyDev from "./components/CompanyDev.vue";
import OtherInfo from "./components/OtherInfo.vue";
import ClaimDialog from "./components/ClaimDialog.vue";
import { getCompanyById, updateCompany } from "@api/company";
import { mapGetters } from "vuex";

export default {
//import引入的组件需要注入到对象中才能使用
@@ -214,6 +211,9 @@ export default {
enterpriseLabel() {
return this.companyInfo?.enterpriseLabel?.text ?? [];
},
...mapGetters({
currentAccount: "currentAccount",
}),
},
//监控data中的数据变化
watch: {},
@@ -229,7 +229,7 @@ export default {
top: scrollTop,
behavior: "smooth", // 平滑滚动
});
location.href = `#content${this.activeTab}`;
// location.href = `#content${this.activeTab}`;
},

getData() {
@@ -252,6 +252,12 @@ export default {
});
},
setClaimDialog() {
// 是否登录
console.log(this.currentAccount, "this.currentAccount");
if (!this.currentAccount) {
this.$router.push("/login");
}

this.showClaimDialog = true;
this.claimDialog = true;
},
@@ -259,12 +265,16 @@ export default {
this.isEditing = false;
},
updateCompany() {
this.companyInfo.enterpriseFeatures = this.$refs.content4.$data.uploadFileList.join(
","
);
updateCompany(this.companyInfo)
.then(res => {
console.log(res.data);
if (res.data.status == 0) {
this.isEditing = false;
this.$message.success(`保存成功!`);
this.getData();
} else {
this.$message.error(`保存失败,请刷新重试!`);
}
@@ -410,7 +420,10 @@ export default {
width: 100%;
@include flex(row, space-between, center, null);
.company_type {
flex: 1;
@include text-ellipsis;
> span {
display: inline-block;
@include font(14px, #0086e7);
padding: 2px 8px;
border: solid 1px #0086e7;

+ 16
- 10
digital-park-web/digital-park/src/views/park-enterprises/components/BasicInfo.vue Просмотреть файл

@@ -7,23 +7,25 @@
<table class="table_box" cellspacing="0">
<tr class="table_row">
<td class="table_title">统一社会信用代码:</td>
<td>{{ companyInfo.creditCode }}</td>
<td>{{ companyInfo.creditCode || "--" }}</td>
<td class="table_title">公司名称:</td>
<td colspan="3">{{ companyInfo.companyName }}</td>
<td colspan="3">{{ companyInfo.companyName || "--" }}</td>
</tr>
<tr class="table_row">
<td class="table_title">法人代表:</td>
<td>{{ companyInfo.legalPerson }}</td>
<td>{{ companyInfo.legalPerson || "--" }}</td>
<td class="table_title">登记状态:</td>
<td>{{ companyInfo.claimState.text }}</td>
<td>
{{ companyInfo.enterpriseState || "--" }}
</td>
<td class="table_title width_100">成立日期:</td>
<td>{{ companyInfo.establishOn | formatDate("YYYY.MM.DD") }}</td>
</tr>
<tr class="table_row">
<td class="table_title">所属行业:</td>
<td colspan="3">{{ companyInfo.ownerIndustry }}</td>
<td colspan="3">{{ companyInfo.ownerIndustry || "--" }}</td>
<td class="table_title width_100">企业类型:</td>
<td>{{ companyInfo.enterpriseType.text }}</td>
<td>{{ companyInfo.enterpriseType.text || "--" }}</td>
</tr>
<tr class="table_row">
<td class="table_title">营业期限:</td>
@@ -33,19 +35,21 @@
}}
</td>
<td class="table_title">纳税人资质:</td>
<td>{{ companyInfo.taxpayerCertification }}</td>
<td>
{{ companyInfo.taxpayerCertification || "--" }}
</td>
<td class="table_title width_100">注册资本:</td>
<td>{{ companyInfo.registeredCapital }}</td>
<td>{{ companyInfo.registeredCapital || "--" }}</td>
</tr>

<tr class="table_row">
<td class="table_title">注册地址:</td>
<td colspan="5">{{ companyInfo.registeredAddress }}</td>
<td colspan="5">{{ companyInfo.registeredAddress || "--" }}</td>
</tr>
<tr class="table_row">
<td class="table_title">经营范围:</td>
<td colspan="5">
{{ companyInfo.businessScope }}
{{ companyInfo.businessScope || "--" }}
</td>
</tr>
</table>
@@ -92,10 +96,12 @@ export default {
@include border-box;
}
.table_box {
width: 100%;
border: 1px solid #bcd8e9;
tr {
height: 48px;
td {
min-width: 100px;
@include font(14px, #334a5f);
padding: 15px 10px;
@include border-box;

+ 3
- 23
digital-park-web/digital-park/src/views/park-enterprises/components/ClaimDialog.vue Просмотреть файл

@@ -224,8 +224,8 @@
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
import { upload } from "@api/common";
import { addCompanyClaim } from "@api/company";
import { uploadFile } from "@mixin/uploadFile";

export default {
props: {
@@ -237,6 +237,7 @@ export default {
},
//import引入的组件需要注入到对象中才能使用
components: {},
mixins: [uploadFile],
data() {
//这里存放数据
return {
@@ -333,31 +334,10 @@ export default {
async afterReadUrl(file, imgUrlIndex) {
this.$data[`imageUrl${imgUrlIndex}`] = "";
this.$data[`imageUrl${imgUrlIndex}Loading`] = true;
let photo2Url = await this.uploadImg(file, `imageUrl${imgUrlIndex}Loading`);
let photo2Url = await this.uploadFile(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() {},

+ 89
- 64
digital-park-web/digital-park/src/views/park-enterprises/components/OtherInfo.vue Просмотреть файл

@@ -29,32 +29,44 @@
<td class="table_title">企业风采:</td>
<td class="content">
<template v-if="!isEditing">
<img class="company_img" src="" alt="" />
<img class="company_img" src="" alt="" />
<img class="company_img" src="" alt="" />
<img
v-for="(item, index) in uploadFileList"
:key="index"
class="company_img"
:src="item"
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>
<div v-else class="img_box">
<!-- <img
v-for="(item, index) in uploadFileList"
:key="index"
class="company_img"
:src="item"
/> -->
<el-upload
:limit="5"
class="avatar-uploader"
:file-list="fileList"
action="#"
list-type="picture-card"
accept=".jpg,.png,.jpeg"
:http-request="
file => {
afterReadUrl(file);
}
"
:before-remove="handleBeforeRemove"
>
<div slot="default" class="upload_text">
<img
class="company_img"
src="@assets/image/company/bg_upload.png"
alt=""
/>
</div>
</el-upload>
</div>
</td>
</tr>
<tr>
@@ -70,13 +82,17 @@
</td>
</tr>
</table>

<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</div>
</template>

<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
import { upload } from "@api/common";
import { uploadFile } from "@mixin/uploadFile";

export default {
props: {
@@ -91,9 +107,15 @@ export default {
},
//import引入的组件需要注入到对象中才能使用
components: {},
mixins: [uploadFile],
data() {
//这里存放数据
return {};
return {
fileList: [],
uploadFileList: [], // 上传的图片数组
dialogImageUrl: "",
dialogVisible: false,
};
},
//监听属性 类似于data概念
computed: {},
@@ -101,46 +123,33 @@ export default {
watch: {},
//方法集合
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();
// 删除图片
handleBeforeRemove(file, fileList) {
console.log(fileList);
const index = fileList.findIndex(e => e.uid === file.uid);
this.uploadFileList.splice(index, 1);
},
// 上传图片
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;
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
async afterReadUrl(file) {
let photo2Url = await this.uploadFile(file, null);
this.uploadFileList.push(photo2Url);
console.log(this.uploadFileList);
},
},
//生命周期 - 创建完成(可以访问当前this实例)
created() {},
created() {
this.uploadFileList = JSON.parse(this.companyInfo.enterpriseFeatures);
this.uploadFileList.forEach(item => {
this.fileList.push({
url: item,
});
});
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
};
</script>
<style lang="scss" scoped>
@@ -182,18 +191,34 @@ export default {
.content {
padding: 20px;
@include border-box;

.avatar-uploader {
@include size(120px, 96px);
margin-right: 25px;
// @include size(120px, 96px);
@include flex(row, flex-start, center, wrap);
.upload_text {
@include border-box;
@include size(120px, 96px);
}
::v-deep .el-upload {
@include size(100%, 100%);
@include size(120px, 96px);
cursor: pointer;
position: relative;
overflow: hidden;
margin-bottom: 8px;
}
}
::v-deep .el-upload-list--picture-card {
display: inline-flex;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
@include size(120px, 96px);
border: none;
border-radius: 0px;
margin-right: 25px;

> div {
width: 100%;
height: 100%;
}
}
::v-deep .el-upload--picture-card {

Загрузка…
Отмена
Сохранить