| @@ -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; | |||
| }, | |||
| }, | |||
| }; | |||
| @@ -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; | |||
| @@ -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; | |||
| @@ -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() {}, | |||
| @@ -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 { | |||