|
@@ -1,199 +1,202 @@
|
|
|
-<template>
|
|
|
- <div class="hui-flex hui-content border-box">
|
|
|
- <div class="hui-content-title">
|
|
|
- <div class="hui-title-item active">公司管理</div>
|
|
|
- </div>
|
|
|
- <div class="hui-flex-box">
|
|
|
- <div class="manager-index hui-flex hui-table">
|
|
|
- <div class="hui-content-insert" style="text-align: right;">
|
|
|
- <el-button v-permission="'/work/organization/manager/update'" type="primary" size="small" @click="visible = true">修改</el-button>
|
|
|
- </div>
|
|
|
- <div class="hui-flex-box">
|
|
|
- <div class="manager-content">
|
|
|
- <div class="manager-title">
|
|
|
- <div class="manager-logo">
|
|
|
- <el-image v-if="logoUrl" :src="logoUrl" fit="cover"></el-image>
|
|
|
- <div class="el-image" v-else>
|
|
|
- <div class="image-slot"><i class="el-icon-picture-outline"></i></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="manager-name">{{organization.name}}</div>
|
|
|
- </div>
|
|
|
- <div class="manager-box">
|
|
|
- <div class="manager-item">
|
|
|
- <div class="manager-label">公司代码</div>
|
|
|
- <div class="manager-value">
|
|
|
- {{organization.organizationCode}}
|
|
|
- <i class="el-icon-copy-document color-primary" title="点击复制"
|
|
|
- @click="copyText(organization.organizationCode)"></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="manager-item">
|
|
|
- <div class="manager-label">联系人</div>
|
|
|
- <div class="manager-value">{{organization.contact}}</div>
|
|
|
- </div>
|
|
|
- <div class="manager-item">
|
|
|
- <div class="manager-label">公司地址</div>
|
|
|
- <div class="manager-value">{{address}}</div>
|
|
|
- </div>
|
|
|
- <div class="manager-item">
|
|
|
- <div class="manager-label">联系方式</div>
|
|
|
- <div class="manager-value">{{organization.contactTel}}</div>
|
|
|
- </div>
|
|
|
- <div class="manager-item" style="width: 100%;">
|
|
|
- <div class="manager-label">公司简介</div>
|
|
|
- <div class="manager-value">{{organization.introduction}}</div>
|
|
|
- </div>
|
|
|
- <div class="manager-item" style="width: 100%;">
|
|
|
- <div class="manager-label">附件</div>
|
|
|
- <div class="manager-value">
|
|
|
- <upload
|
|
|
- :list="organization.businessLicense ? JSON.parse(organization.businessLicense):[]">
|
|
|
- </upload>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <el-dialog :close-on-click-modal="false" title="编辑" :visible.sync="visible" width="900px"
|
|
|
- :append-to-body="true">
|
|
|
- <edit v-if="visible" @callback="callback"></edit>
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- const upload = () => import('@/components/common/upload');
|
|
|
- const edit = () => import('@/components/work/organization/manager/edit');
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- organization: {},
|
|
|
- logoUrl: '',
|
|
|
- address: '',
|
|
|
- visible: false
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.init();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- init() {
|
|
|
- if (!this.auth('/work/organization/manager/information')) return;
|
|
|
- this.organization = this.$store.getters.organization;
|
|
|
- if (this.organization.address) {
|
|
|
- let address = JSON.parse(this.organization.address);
|
|
|
- this.address = address.join('-') + '-' + (this.organization.detailAddress || '');
|
|
|
- }
|
|
|
- let logo = !this.organization.logo ? {} : JSON.parse(this.organization.logo);
|
|
|
- this.logoUrl = logo.url;
|
|
|
-
|
|
|
- },
|
|
|
- async copyText(code) {
|
|
|
- try {
|
|
|
- await navigator.clipboard.writeText(code);
|
|
|
- this.$message.success('复制成功')
|
|
|
- } catch (error) {
|
|
|
- this.$message.success('复制失败')
|
|
|
- }
|
|
|
- },
|
|
|
- callback(type) {
|
|
|
- this.visible = false;
|
|
|
- if (type === 'init') this.init();
|
|
|
- }
|
|
|
- },
|
|
|
- components: {
|
|
|
- upload,
|
|
|
- edit
|
|
|
- },
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
- .manager-index {
|
|
|
- width: 70%;
|
|
|
- max-width: 1200px;
|
|
|
- margin: 0 auto;
|
|
|
-
|
|
|
- .manager-update {
|
|
|
- padding: 12px 0;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
-
|
|
|
- .manager-content {
|
|
|
- background: $--background-color-base;
|
|
|
- border-radius: 2px;
|
|
|
- height: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .manager-title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 32px;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .manager-title::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- left: 32px;
|
|
|
- right: 32px;
|
|
|
- bottom: 0;
|
|
|
- height: 1px;
|
|
|
- background-color: $--border-color-light;
|
|
|
- }
|
|
|
-
|
|
|
- .manager-logo {
|
|
|
- width: 48px;
|
|
|
- height: 48px;
|
|
|
- border-radius: 4px;
|
|
|
- overflow: hidden;
|
|
|
- margin-right: 18px;
|
|
|
- border: 1px solid $--border-color-light;
|
|
|
-
|
|
|
- .el-image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .image-slot {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- text-align: center;
|
|
|
- line-height: 48px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .manager-name {
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- .manager-box {
|
|
|
- padding: 32px 32px 16px 32px;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .manager-item {
|
|
|
- width: 50%;
|
|
|
- margin-bottom: 32px;
|
|
|
-
|
|
|
- .manager-label {
|
|
|
- opacity: 0.6;
|
|
|
- line-height: 20px;
|
|
|
- margin-bottom: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .manager-value {
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .el-icon-copy-document {
|
|
|
- margin-left: 5px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+<template>
|
|
|
+ <div class="hui-flex hui-content border-box">
|
|
|
+ <div class="hui-content-title">
|
|
|
+ <div class="hui-title-item active">公司管理</div>
|
|
|
+ </div>
|
|
|
+ <div class="hui-flex-box">
|
|
|
+ <div class="manager-index hui-flex hui-table">
|
|
|
+ <div class="hui-content-insert" style="text-align: right;">
|
|
|
+ <el-button v-permission="'/work/organization/manager/update'" type="primary" size="small"
|
|
|
+ @click="visible = true">
|
|
|
+ 修改
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="hui-flex-box">
|
|
|
+ <div class="manager-content">
|
|
|
+ <div class="manager-title">
|
|
|
+ <div class="manager-logo">
|
|
|
+ <el-image v-if="logoUrl" :src="logoUrl" fit="cover"></el-image>
|
|
|
+ <div class="el-image" v-else>
|
|
|
+ <div class="image-slot"><i class="el-icon-picture-outline"></i></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="manager-name">{{organization.name}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="manager-box">
|
|
|
+ <div class="manager-item">
|
|
|
+ <div class="manager-label">公司代码</div>
|
|
|
+ <div class="manager-value">
|
|
|
+ {{organization.organizationCode}}
|
|
|
+ <i class="el-icon-copy-document color-primary" title="点击复制"
|
|
|
+ @click="copyText(organization.organizationCode)"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="manager-item">
|
|
|
+ <div class="manager-label">联系人</div>
|
|
|
+ <div class="manager-value">{{organization.contact}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="manager-item">
|
|
|
+ <div class="manager-label">公司地址</div>
|
|
|
+ <div class="manager-value">{{address}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="manager-item">
|
|
|
+ <div class="manager-label">联系方式</div>
|
|
|
+ <div class="manager-value">{{organization.contactTel}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="manager-item" style="width: 100%;">
|
|
|
+ <div class="manager-label">公司简介</div>
|
|
|
+ <div class="manager-value">{{organization.introduction}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="manager-item" style="width: 100%;">
|
|
|
+ <div class="manager-label">附件</div>
|
|
|
+ <div class="manager-value">
|
|
|
+ <upload
|
|
|
+ :list="organization.businessLicense ? JSON.parse(organization.businessLicense):[]">
|
|
|
+ </upload>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog :close-on-click-modal="false" title="编辑" :visible.sync="visible" width="900px"
|
|
|
+ :append-to-body="true">
|
|
|
+ <edit v-if="visible" @callback="callback"></edit>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ const upload = () => import('@/components/common/upload');
|
|
|
+ const edit = () => import('@/components/work/organization/manager/edit');
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ organization: {},
|
|
|
+ logoUrl: '',
|
|
|
+ address: '',
|
|
|
+ visible: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ if (!this.auth('/work/organization/manager/information')) return;
|
|
|
+ this.organization = this.$store.getters.organization;
|
|
|
+ if (this.organization.address) {
|
|
|
+ let address = JSON.parse(this.organization.address);
|
|
|
+ this.address = address.join('-') + '-' + (this.organization.detailAddress || '');
|
|
|
+ }
|
|
|
+ let logo = !this.organization.logo ? {} : JSON.parse(this.organization.logo);
|
|
|
+ this.logoUrl = logo.url;
|
|
|
+
|
|
|
+ },
|
|
|
+ async copyText(code) {
|
|
|
+ try {
|
|
|
+ await navigator.clipboard.writeText(code);
|
|
|
+ this.$message.success('复制成功')
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.success('复制失败')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ callback(type) {
|
|
|
+ this.visible = false;
|
|
|
+ if (type === 'init') this.init();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ upload,
|
|
|
+ edit
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .manager-index {
|
|
|
+ width: 70%;
|
|
|
+ max-width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ .manager-update {
|
|
|
+ padding: 12px 0;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .manager-content {
|
|
|
+ background: $--background-color-base;
|
|
|
+ border-radius: 2px;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .manager-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 32px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .manager-title::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 32px;
|
|
|
+ right: 32px;
|
|
|
+ bottom: 0;
|
|
|
+ height: 1px;
|
|
|
+ background-color: $--border-color-light;
|
|
|
+ }
|
|
|
+
|
|
|
+ .manager-logo {
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-right: 18px;
|
|
|
+ border: 1px solid $--border-color-light;
|
|
|
+
|
|
|
+ .el-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .image-slot {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 48px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .manager-name {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .manager-box {
|
|
|
+ padding: 32px 32px 16px 32px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .manager-item {
|
|
|
+ width: 50%;
|
|
|
+ margin-bottom: 32px;
|
|
|
+
|
|
|
+ .manager-label {
|
|
|
+ opacity: 0.6;
|
|
|
+ line-height: 20px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .manager-value {
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-icon-copy-document {
|
|
|
+ margin-left: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|