添加互联企业代码基础结构

4 years ago · 5dc738bf3b
--- a/src/views/manage_company/user/components/card-header.vue
+++ b/src/views/manage_company/user/components/card-header.vue
@@ -0,0 +1,37 @@
 <template>
  <div class="card-header">
    <div v-if="hasLeft">
      <slot name="left" />
    </div>
    <div class="title">
      <slot name="title" />
    </div>
    <div>
      <slot name="right" />
    </div>
  </div>
 </template>


 <script>
 export default {
  data() {
    return {
      hasLeft: false,
    }
  },
  mounted() {
    this.hasLeft = !!this.$slots.left;
  }
 }
 </script>

 <style lang="less" scoped>
 .card-header {
  display: flex;
  justify-content: space-between;
  .title {
    color: red;
  }
 }
 </style>
--- a/src/views/manage_company/user/components/relation_company_info.vue
+++ b/src/views/manage_company/user/components/relation_company_info.vue
@@ -0,0 +1,83 @@
 <template>
  <div class="relation_company_info">
    <div class="mlr-20">
    <card-header>
      <template v-slot:left>
        left
      </template>
      <template #title>
        标题组件
      </template>
      <template #right>
        right
      </template>
    </card-header>
  </div>
  <div>
    <div class="border-line"></div>
  </div>
  <div class="clear"></div>
    <div class="largecontentBox">
      <div class="mlr-10">
        <div class="yiyunTable_list mt-10">
          <img class="prjitem_img"  ref="projimg" :class="{'height-full': isHeightFull && !isWidthFull, 'width-full': isWidthFull && !isHeightFull}"
                :src="companyData.showImgUrl | resolveImg" alt="" 
            />
          {{mainCompanyId}}
        </div>
      </div>
    </div>
  </div>
 </template>

 <script>
 import CardHeader from './card-header';
 export default {
  props: {
    /**
     * 企业关联关系对象:
     * {
     *  // 申请发起方
     *  sendCompanyId,
     *  sendCompanyName,
     *  // 申请接收方
     *  acceptCompanyId,
     *  acceptCompanyName,
     *  // 申请状态
     *  // -1: 未申请 （前端自用）
     *  //  0: 申请中
     *  //  1: 申请通过
     *  //  2: 申请驳回
     *  auditStatus,
     *  // 互链状态
     *  //  0: 已解除
     *  //  1: 关联中
     *  //  2: 已暂停
     *  linkStatus,
     * }
     * 
     */
    relationInfo: {
      type: Object,
      default: () => ({}),
    }
  },
  components: {
    CardHeader,
  },
  data(){
    const mainCompanyId = this.$store.state.currentCompanyId;
    return {
      mainCompanyId,
      companyData: {},
    }
  },
  computed: {
    
  },
 }
 </script>

 <style lang="less" scoped>

 </style>
--- a/src/views/manage_company/user/index.vue
+++ b/src/views/manage_company/user/index.vue
--- a/src/views/manage_company/user/relation_company.vue
+++ b/src/views/manage_company/user/relation_company.vue
@@ -0,0 +1,134 @@
 <template>
  <div>
    <div class="layout_content">
      <section class="title_section">
        <div class="EC_col_8">
          <slot name="nav" />
        </div>
      </section>
      <section class="yiyun_section houtai">
        <div class="fl_navBox">
          <div class="fl_navBox_body">
            <div class="admin_treeBox navtree">
              <div class="tree_list">

                <div class="tree_list_item">
                  <i class="el-icon-models" />
                  <span class="tree_list_item_label">企业名称</span>
                </div>
                <div class="tree_list_empty">
                  暂无互链企业，请添加
                </div>
              </div>
              <div class="bottombtn tree_list_bottom_button">添加互链企业</div>
              <!-- <div class="navtreebox fulltreebox list-company-dept"> -->
                <!-- 树形导航 -->
              <!-- </div> -->
            </div>
          </div>
        </div>
        <div class="fl_contentBox dept-personnel-list">
          <div class="admin_contentBox_body">
            <div class="admin_contentBox_bodyPain">
              <relation-company-info

              />
            </div>
          </div>
        </div>
      </section>
    </div>

    <div class="ec_dialog" v-if="false">
      <div class="ec_dialogBox">
        <div class="ec_dialogBoxHead">
          <h3 class="ec_dialogBoxHeadTitle fl">设置职员所在部门</h3>
          <i
            title="关闭"
            class="Cicon icon font_family icon-icon_quxiaohuoguanbi ec_dialogBoxHeadclose fr"
            @click="colseSet"
          ></i>
        </div>
        <div class="line"></div>
        <div class="ec_dialogBoxBody">
          <el-cascader-panel
            :options="deptOptions"
            :props="selectProps"
            v-model="currentUser.arraySuper"
          ></el-cascader-panel>
        </div>
        <div class="line"></div>
        <div class="ec_dialogBoxfooter">
          <el-button @click="cancelAddDept()">取 消</el-button>
          <el-button @click="enterAddDept()">指派至所选部门</el-button>
        </div>
      </div>
    </div>
  </div>
 </template>

 <script>

 import RelationCompanyInfo from './components/relation_company_info';

 export default {
  components: {
    RelationCompanyInfo,
  },
  data() {
    return {
    };
  },
  filters: {
  },
  mounted: function () {
  },
  methods: {
  },
 };
 </script>

 <style>
  .list-company-dept .el-tree-node__content {
    margin: 0 10px 0 0;
  }
 </style>

 <style lang="less" scoped>
 .tree_list {
  height: calc(100% - 56px);
  padding: 10px 3% 0;
  overflow: auto;
 }
 .tree_list_item {
  position: relative;
  height: 32px;
  padding-left: 16px + 8px;
  border-radius: 5px;
  cursor: pointer;
  &:hover, .active {
    background-color: rgba(255, 255, 255, 0.2);
  }
  &_label {
    color: #fff;
    font-size: 12px;
    line-height: 32px;
  }
  .el-icon-models {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transform: translateY(-2px);
  }
 }
 .tree_list_empty {
  margin-top: 350px;
  text-align: center;
  color: #fff;
 }
 .tree_list_bottom_button {
  
 }
 </style>
--- a/src/views/manage_company/user/user.vue
+++ b/src/views/manage_company/user/user.vue