企业详情

digital-park-web/digital-park/src/mixin/uploadFile.js

+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;
+        },
+    },
+};

digital-park-web/digital-park/src/views/park-enterprises/Detail.vue

                                 </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="认领" />
                     </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"
             </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>
 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引入的组件需要注入到对象中才能使用
         enterpriseLabel() {
             return this.companyInfo?.enterpriseLabel?.text ?? [];
         },
+        ...mapGetters({
+            currentAccount: "currentAccount",
+        }),
     },
     //监控data中的数据变化
     watch: {},
                 top: scrollTop,
                 behavior: "smooth", // 平滑滚动
             });
-            location.href = `#content${this.activeTab}`;
+            // location.href = `#content${this.activeTab}`;
         },
 
         getData() {
                 });
         },
         setClaimDialog() {
+            // 是否登录
+            console.log(this.currentAccount, "this.currentAccount");
+            if (!this.currentAccount) {
+                this.$router.push("/login");
+            }
+
             this.showClaimDialog = true;
             this.claimDialog = true;
         },
             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(`保存失败,请刷新重试！`);
                     }
                 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;

digital-park-web/digital-park/src/views/park-enterprises/components/BasicInfo.vue

         <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>
                     }}
                 </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>
         @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;

digital-park-web/digital-park/src/views/park-enterprises/components/ClaimDialog.vue

 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》 from '《组件路径》';
-import { upload } from "@api/common";
 import { addCompanyClaim } from "@api/company";
+import { uploadFile } from "@mixin/uploadFile";
 
 export default {
     props: {
     },
     //import引入的组件需要注入到对象中才能使用
     components: {},
+    mixins: [uploadFile],
     data() {
         //这里存放数据
         return {
         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() {},

digital-park-web/digital-park/src/views/park-enterprises/components/OtherInfo.vue

                 <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>
                 </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: {
     },
     //import引入的组件需要注入到对象中才能使用
     components: {},
+    mixins: [uploadFile],
     data() {
         //这里存放数据
-        return {};
+        return {
+            fileList: [],
+            uploadFileList: [], // 上传的图片数组
+            dialogImageUrl: "",
+            dialogVisible: false,
+        };
     },
     //监听属性 类似于data概念
     computed: {},
     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>
         .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 {