互链企业 update

public/static/css/main.css

@@ -3256,10 +3256,10 @@ button:focus {
 	max-height: 100%;
 	/* transform: scale(1.5); */
 }
-.v-modal{
+/* .v-modal{
 	width: 0;
 	height: 0
-}
+} */
 /*探索者企业后台 2019年3月21日-添加-开始*/
 .yiyun_headerfl.houtai,
 .yiyun_headerfr.houtai {
@@ -6910,7 +6910,7 @@ h4.biaoqianweizhi2{
     padding: 40px 15px;
 }
 .el-dialog {
-    border-radius: 30px;
+    border-radius: 8px;
     box-shadow: 0px 12px 14px 0px rgba(0, 0, 0, 0.2);
 }
 .el-dialog__header {
@@ -6921,7 +6921,7 @@ h4.biaoqianweizhi2{
 	width: 200px;
     height: 30px;
     padding: 7px 20px;
-    border-radius: 30px;
+    border-radius: 8px;
     font-size: 14px;
 }
 .el-dialog__headerbtn,.el-message-box__headerbtn {

src/utils/request.js

@@ -90,8 +90,6 @@ export function wrapErrorHint(response) {
       title:title + '错误',
       type: type
     })
-
-
   }
   return response;
 }

src/views/manage_company/user/components/relation_company_info.vue

@@ -3,7 +3,7 @@
     <div class="mlr-20">
     <card-header>
       <!-- 未申请状态 -->
-      <template v-if="isUnApply" #left><span /></template>
+      <template v-if="isUnApply"  #left><span /></template>
       <template #title>
         {{ isUnApply
           ? '申请互链企业'
@@ -28,44 +28,45 @@
     <div class="largecontentBox">
       <div class="mlr-20">
         <div class="company_logo">
-          <img :src="companyData.showImgUrl | resolveImg" alt="" />
+          <img :src="companyData.logoUrl | resolveImg" alt="" />
         </div>
         <div class="info_item">
           <span class="info_item_label">企业简称</span>
-          <span class="info_item_text">{{ mainCompanyId }}</span>
+          <span class="info_item_text">{{ companyData.companyName }}</span>
         </div>
         <div class="info_item">
           <span class="info_item_label">企业全称</span>
-          <span class="info_item_text">{{ mainCompanyId }}</span>
+          <span class="info_item_text">{{ companyData.compAllName }}</span>
         </div>
         <div class="info_item">
           <span class="info_item_label">地址</span>
-          <span class="info_item_text">{{ mainCompanyId }}</span>
+          <span class="info_item_text">{{ companyData.address }}</span>
         </div>
         <div class="info_item">
           <span class="info_item_label">所属行业</span>
-          <span class="info_item_text">{{ mainCompanyId }}</span>
+          <span class="info_item_text">{{ companyData.industryName }}</span>
         </div>
         <div class="info_item">
           <span class="info_item_label">法人</span>
-          <span class="info_item_text">{{ mainCompanyId }}</span>
+          <span class="info_item_text">{{ companyData.cnName }}</span>
         </div>
         <div class="info_item">
           <span class="info_item_label">法人电话</span>
-          <span class="info_item_text">{{ mainCompanyId }}</span>
+          <span class="info_item_text">{{ companyData.phone }}</span>
         </div>
         <div class="info_item">
           <span class="info_item_label">单位电话</span>
-          <span class="info_item_text">{{ mainCompanyId }}</span>
+          <span class="info_item_text">{{ companyData.telphone }}</span>
         </div>
         <div class="info_item">
           <span class="info_item_label">企业成员</span>
-          <span class="info_item_text">{{ mainCompanyId | displayText('人') }}</span>
+          <span class="info_item_text">{{ companyData.userCount | displayText('人') }}</span>
         </div>
         <div class="info_item">
           <span class="info_item_label">企业部门</span>
-          <span class="info_item_text">{{ mainCompanyId | displayText('个部门') }}</span>
+          <span class="info_item_text">{{ companyData.deptCount | displayText('个部门') }}</span>
         </div>
+        {{JSON.stringify(relationInfo)}}
         <!-- <div class="info_item">
           <span class="info_item_label">企业ID</span>
           <span class="info_item_text">{{ mainCompanyId }}</span>
@@ -78,6 +79,8 @@
 <script>
 import CardHeader from './card-header';
 import { isNil } from 'lodash';
+import { wrapErrorHint } from '@/utils/request';
+import { firstCharToLowerCase } from '@/utils/tool';
 
 export default {
   props: {
@@ -101,12 +104,16 @@ export default {
      *  //  1: 关联中
      *  //  2: 已暂停
      *  linkStatus,
+     *  // 以下为前端解析数据插入
+     *  key: "对方公司id",
+     *  thatCompanyName: "对方企业",
+     * 
      * }
      * 
      */
     relationInfo: {
       type: Object,
-      default: () => ({ auditStatus: '-1' }),
+      default: () => ({ /* auditStatus: '-1' */ }),
     }
   },
   components: {
@@ -119,6 +126,9 @@ export default {
       companyData: {},
     }
   },
+  mounted() {
+    this.fetchCompanyDetail()
+  },
   computed: {
     isUnApply(){ return this.relationInfo.auditStatus == '-1' },
     isApplying(){ return this.relationInfo.auditStatus == '0' },
@@ -127,7 +137,20 @@ export default {
   },
   filters: {
     displayText: (v, unit) => isNil(v) ? '' : `${v} ${unit}`,
-  }
+  },
+  // watch: {
+  //   relationInfo(v) { debugger; this.fetchCompanyDetail()}
+  // },
+  methods: {
+    async fetchCompanyDetail() {
+      const thatCompanyId = this.relationInfo.thatCompanyId;
+      // todo await 查询公司互链项目列表
+      const res = await this.$fetchApi('company/queryCompanyById', { id: thatCompanyId });
+      wrapErrorHint(res);
+      if(res.Code) { return; }
+      this.companyData = { ...firstCharToLowerCase(res.Data.company), ...firstCharToLowerCase(res.Data.user), deptCount: res.Data.deptNum, userCount: res.Data.userNum };
+    }
+  },
 }
 </script>
 

src/views/manage_company/user/relation_company.vue

@@ -11,18 +11,34 @@
           <div class="fl_navBox_body">
             <div class="admin_treeBox navtree">
               <div class="tree_list">
-
-                <div class="tree_list_item">
+                <div
+                  v-for="info in relationList"
+                  :key="info.key"
+                  class="tree_list_item"
+                  :class="{ active: info === currentRelationInfo }"
+                  @click="checkRelationDetail(info)"
+                >
                   <i class="el-icon-models" />
-                  <span class="tree_list_item_label">企业名称</span>
+                  <span class="tree_list_item_label">{{
+                    info.auditStatus == "1" &&
+                    info.acceptCompanyId === mainCompanyId
+                      ? "新申请"
+                      : info.thatCompanyName
+                  }}</span>
                 </div>
-                <div class="tree_list_empty">
+
+                <div class="tree_list_empty" v-if="!relationList.length">
                   暂无互链企业，请添加
                 </div>
               </div>
-              <div class="bottombtn tree_list_bottom_button">添加互链企业</div>
+              <div
+                class="bottombtn tree_list_bottom_button"
+                @click="searchModalVisible = true"
+              >
+                添加互链企业
+              </div>
               <!-- <div class="navtreebox fulltreebox list-company-dept"> -->
-                <!-- 树形导航 -->
+              <!-- 树形导航 -->
               <!-- </div> -->
             </div>
           </div>
@@ -31,63 +47,172 @@
           <div class="admin_contentBox_body">
             <div class="admin_contentBox_bodyPain">
               <relation-company-info
-
+                v-if="currentRelationInfo"
+                :key="currentRelationInfo"
+                :relationInfo="currentRelationInfo"
               />
             </div>
           </div>
         </div>
       </section>
     </div>
-    
-    <div class="ec_dialog" v-if="true">
-      <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">
-          
-        </div>
-        <div class="line"></div>
-        <div class="ec_dialogBoxfooter">
-          <el-button>取 消</el-button>
-          <el-button type="primary">查 询</el-button>
-        </div>
+
+    <el-dialog
+      title="通过手机号搜索外部企业职员"
+      :visible.sync="searchModalVisible"
+      width="460px"
+      top="30vh"
+    >
+      <el-form :model="searchForm">
+        <el-form-item label="">
+          <el-input
+            v-model="searchForm.keywords"
+            placeholder="点击输入手机号"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="searchModalVisible = false">取 消</el-button>
+        <el-button
+          :disabled="!searchForm.keywords"
+          type="primary" 
+          @click="searchCompanyByKeywords"
+        >查 询</el-button>
       </div>
-    </div>
+    </el-dialog>
+
+    <el-dialog
+      title="已查询到用户,请选择所在企业关系"
+      :visible.sync="searchResultModalVisible"
+      custom-class="relation_company_search_modal"
+      width="460px"
+      top="30vh"
+    >
+      <div
+        class="search_result_item"
+        v-for="result in searchResultsList"
+        :key="result.companyId"
+        @click="generateRelation(result)"
+      >
+        <div class="search_result_item_sub_label">{{result.contactor}}</div>
+        <div class="search_result_item_label">{{result.companyName}}</div>
+        <i
+          class="el-collapse-item__arrow el-icon-arrow-right search_result_item_icon"
+        />
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-
-import RelationCompanyInfo from './components/relation_company_info';
+import RelationCompanyInfo from "./components/relation_company_info";
+import { wrapErrorHint } from '@/utils/request';
 
 export default {
   components: {
     RelationCompanyInfo,
   },
   data() {
+    const mainCompanyId = this.$store.state.currentCompanyId;
     return {
+      mainCompanyId,
+      relationList: [],
+      searchModalVisible: false,
+      searchForm: {},
+      searchResultModalVisible: false,
+      searchResultsList: [],
+      currentRelationInfo: undefined,
     };
   },
-  filters: {
-  },
+  filters: {},
   mounted: function () {
+    this.fetchRelations()
+      .then(() => {
+        if(this.relationList.length) {
+          this.checkRelationDetail(this.relationList[0]);
+        }
+      })
+  },
+  watch: {
+    searchModalVisible(v) {
+      if(!v) {
+        this.searchForm = {};
+      }
+    }
   },
   methods: {
+    /**
+     * 查询互链关系
+     */
+    async fetchRelations() {
+      this.relationList = [
+        {
+          sendCompanyId: this.mainCompanyId,
+          sendCompanyName: "我方公司",
+          acceptCompanyId: "对方公司id",
+          acceptCompanyName: "对方公司",
+          auditStatus: 0,
+          linkStatus: 0,
+          // 以下为前端解析数据插入
+          key: "对方公司id",
+          thatCompanyId: "对方公司id",
+          thatCompanyName: "对方企业",
+        },
+      ];
+    },
+    checkRelationDetail(nextRelationInfo) {
+      this.currentRelationInfo = nextRelationInfo;
+    },
+    async searchCompanyByKeywords() {
+      const keywords = this.searchForm.keywords;
+      const res = await this.$fetchApi('user/queryUserAndCompanyByUserPhone', { phone: keywords });
+      wrapErrorHint(res);
+      if(res.Code !== 0) { return; }
+      const data = res.Data;
+      // 判断company是否已互链或者是本公司
+      if(data.companyId === this.mainCompanyId) {
+        this.$notify({ type: 'error', message: '该职员与您在同一个企业。' });
+        return;
+      }
+      if(this.relationList.find(info => info.thatCompanyId === data.companyId)) {
+        this.$notify({ type: 'error', message: '已存在与目标企业的互链或申请' });
+        return;
+      }
+      this.searchResultsList = [{
+        companyId: data.companyId,
+        companyName: data.companyName,
+        contactor: data.userName,
+      }];
+      this.searchModalVisible = false;
+      this.searchResultModalVisible = true;
+    },
+    generateRelation(result) {
+      const newRelation = {
+        sendCompanyId: this.mainCompanyId,
+        // sendCompanyName: "我方公司",
+        acceptCompanyId: result.companyId,
+        acceptCompanyName: result.companyName,
+        auditStatus: '-1',
+        // linkStatus: 0,
+        // 以下为前端解析数据插入
+        key: result.companyId,
+        thatCompanyId: result.companyId,
+        thatCompanyName: result.companyName,
+      }
+      this.currentRelationInfo = newRelation;
+      this.searchResultModalVisible = false;
+    },
   },
 };
 </script>
 
 <style>
-  .list-company-dept .el-tree-node__content {
-    margin: 0 10px 0 0;
-  }
+.list-company-dept .el-tree-node__content {
+  margin: 0 10px 0 0;
+}
+.relation_company_search_modal {
+  background-color: #f8f8f8;
+}
 </style>
 
 <style lang="less" scoped>
@@ -102,7 +227,8 @@ export default {
   padding-left: 16px + 8px;
   border-radius: 5px;
   cursor: pointer;
-  &:hover, .active {
+  &:hover,
+  .active {
     background-color: rgba(255, 255, 255, 0.2);
   }
   &_label {
@@ -125,6 +251,36 @@ export default {
   color: #fff;
 }
 .tree_list_bottom_button {
-  
+}
+.search_result_item {
+  position: relative;
+  background-color: #fff;
+  height: 64px;
+  padding: 11px 24px;
+  box-sizing: border-box;
+  cursor: pointer;
+  &_sub_label {
+    color: rgba(#000, 0.56);
+    font-size: 16px;
+    line-height: 1em;
+  }
+  &_label {
+    color: #32323c;
+    font-size: 20px;
+    line-height: 1em;
+    margin-top: 5px;
+  }
+  &_icon {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 15px;
+    margin: auto 0;
+    width: 22px;
+    height: 22px;
+
+    color: #9b9b9b;
+    font-size: 22px;
+  }
 }
 </style>