催办招商

src/views/lb-business/department-user/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <el-card class="filter-container" shadow="never">
-      <el-form :model="queryParams" :inline="true" label-width="100px"> 
+      <el-form :model="queryParams" :inline="true" label-width="100px">
         <el-form-item label="姓名">
           <el-input v-model="queryParams.name" clearable placeholder="请输入姓名" style="width: 180px" />
         </el-form-item>
@@ -49,29 +49,32 @@
       >
         构建父链
       </el-button>
+      <el-button
+        type="danger"
+        icon="el-icon-bell"
+        :loading="urgeInvestmentLoading"
+        style="margin-left: 12px"
+        @click="handleUrgeInvestment"
+      >
+        催办招商
+      </el-button>
     </el-card>
 
     <el-card class="table-container" shadow="never">
-      <el-table v-loading="loading" :data="list" style="width: 100%"> 
-        <el-table-column label="用户ID" prop="userId" min-width="140" show-overflow-tooltip /> 
-        <el-table-column label="姓名" prop="name" min-width="120" />
-        <el-table-column label="电话" prop="phone" min-width="120" />
-        <el-table-column label="上级ID" prop="parentId" min-width="140" show-overflow-tooltip />
-        <el-table-column label="上级姓名" min-width="120" show-overflow-tooltip>
-          <template slot-scope="scope">
-            {{ scope.row.parentName || scope.row.parentUserName || '-' }}
-          </template>
-        </el-table-column>
-        <el-table-column label="组织链" prop="orgChain" min-width="220" show-overflow-tooltip>
-          <template slot-scope="scope">
-            {{ scope.row.orgChain || '-' }}
-          </template>
-        </el-table-column>
+      <el-table v-loading="loading" :data="list" style="width: 100%">
+        <el-table-column label="用户ID" prop="userId" min-width="70" show-overflow-tooltip />
+        <el-table-column label="姓名" prop="name" min-width="84" show-overflow-tooltip />
+        <el-table-column label="电话" prop="phone" min-width="84" show-overflow-tooltip />
         <el-table-column label="加入日期" prop="joinDate" min-width="120">
           <template slot-scope="scope">
             {{ scope.row.joinDate || '-' }}
           </template>
         </el-table-column>
+        <el-table-column label="组织链" prop="orgChain" min-width="440" class-name="org-chain-column">
+          <template slot-scope="scope">
+            <div class="org-chain-cell">{{ scope.row.orgChain || '-' }}</div>
+          </template>
+        </el-table-column>
         <el-table-column label="更新时间" prop="updateTime" min-width="170">
           <template slot-scope="scope">
             {{ formatDateTime(scope.row.updateTime) }}
@@ -215,6 +218,50 @@
         <el-button type="primary" :loading="parentBindLoading" @click="confirmParentSelection">确定</el-button>
       </div>
     </el-dialog>
+
+    <el-dialog
+      title="催办招商 - 部门用户树"
+      :visible.sync="urgeTreeDialogVisible"
+      width="900px"
+      @close="resetUrgeTreeDialog"
+    >
+      <el-alert
+        :title="`共 ${urgeTreeTotal} 人`"
+        type="info"
+        :closable="false"
+        show-icon
+        class="urge-tree-alert"
+      />
+      <el-input
+        v-model="urgeTreeFilterText"
+        clearable
+        placeholder="搜索姓名、用户ID、电话、加入日期"
+        prefix-icon="el-icon-search"
+        class="urge-tree-filter"
+      />
+      <div v-loading="urgeTreeLoading" class="urge-tree-wrap">
+        <el-tree
+          v-if="urgeTreeData.length"
+          ref="urgeTree"
+          :data="urgeTreeData"
+          :props="urgeTreeProps"
+          :filter-node-method="filterUrgeTreeNode"
+          node-key="userId"
+          highlight-current
+        >
+          <span slot-scope="{ data }" class="urge-tree-node">
+            <span class="urge-tree-node-name">{{ data.name || '-' }}</span>
+            <span class="urge-tree-node-meta">用户ID：{{ data.userId || '-' }}</span>
+            <span class="urge-tree-node-meta">电话：{{ data.phone || '-' }}</span>
+            <span class="urge-tree-node-meta">加入日期：{{ data.joinDate || '-' }}</span>
+          </span>
+        </el-tree>
+        <el-empty v-else description="暂无数据" />
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="urgeTreeDialogVisible = false">关闭</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -224,6 +271,7 @@ import {
   bindLbDepartmentUserParent,
   deleteLbDepartmentUser,
   getLbDepartmentUserList,
+  getLbDepartmentUserTree,
   syncLbDepartmentUserFromDailyUserTrade,
   syncLbDepartmentUserFromLbUser,
   updateLbDepartmentUser
@@ -238,6 +286,16 @@ export default {
       submitLoading: false,
       syncLoading: false,
       syncParentChainLoading: false,
+      urgeInvestmentLoading: false,
+      urgeTreeDialogVisible: false,
+      urgeTreeLoading: false,
+      urgeTreeData: [],
+      urgeTreeTotal: 0,
+      urgeTreeFilterText: '',
+      urgeTreeProps: {
+        children: 'children',
+        label: 'name'
+      },
       parentBindLoading: false,
       list: [],
       total: 0,
@@ -288,6 +346,15 @@ export default {
       }
     }
   },
+  watch: {
+    urgeTreeFilterText(val) {
+      this.$nextTick(() => {
+        if (this.$refs.urgeTree) {
+          this.$refs.urgeTree.filter(val)
+        }
+      })
+    }
+  },
   created() {
     this.fetchList()
   },
@@ -411,6 +478,56 @@ export default {
           this.syncParentChainLoading = false
         })
     },
+    handleUrgeInvestment() {
+      const tenantId = this.getTenantIdFromBusinessHeaders()
+      if (!tenantId) {
+        this.$message.error('未获取到租户ID，请先登录或配置业务请求头中的租户')
+        return
+      }
+      this.urgeInvestmentLoading = true
+      this.urgeTreeLoading = true
+      getLbDepartmentUserTree({ tenantId })
+        .then((res) => {
+          const hasData = res && Array.isArray(res.data)
+          const isSuccess = res && (res.success === true || res.code === 200 || res.code === 20000 || hasData)
+          if (!isSuccess) {
+            this.$message.error((res && res.message) || '催办招商失败')
+            return
+          }
+          this.urgeTreeData = hasData ? res.data : []
+          this.urgeTreeTotal = typeof res.total === 'number' ? res.total : this.urgeTreeData.length
+          this.urgeTreeFilterText = ''
+          this.urgeTreeDialogVisible = true
+          this.$nextTick(() => {
+            if (this.$refs.urgeTree) {
+              this.$refs.urgeTree.filter('')
+            }
+          })
+          if (res && res.message) {
+            this.$message.success(res.message)
+          }
+        })
+        .catch(() => {
+          this.$message.error('催办招商失败')
+        })
+        .finally(() => {
+          this.urgeInvestmentLoading = false
+          this.urgeTreeLoading = false
+        })
+    },
+    filterUrgeTreeNode(value, data) {
+      if (!value) return true
+      const keyword = String(value).trim().toLowerCase()
+      if (!keyword) return true
+      const fields = [data.name, data.userId, data.phone, data.joinDate]
+      return fields.some((field) => field != null && String(field).toLowerCase().includes(keyword))
+    },
+    resetUrgeTreeDialog() {
+      this.urgeTreeData = []
+      this.urgeTreeTotal = 0
+      this.urgeTreeFilterText = ''
+      this.urgeTreeLoading = false
+    },
     handleEdit(row) {
       this.dialogTitle = '编辑部门人员'
       this.isEdit = true
@@ -668,12 +785,82 @@ export default {
       margin-top: 20px;
       text-align: right;
     }
+
+    ::v-deep .org-chain-column .cell {
+      padding: 8px 10px;
+    }
+
+    .org-chain-cell {
+      display: block;
+      width: 100%;
+      height: 32px;
+      line-height: 30px;
+      padding: 0 12px;
+      background-color: #fff;
+      border: 1px solid #dcdfe6;
+      border-radius: 4px;
+      color: #606266;
+      font-size: 14px;
+      overflow-x: auto;
+      overflow-y: hidden;
+      white-space: nowrap;
+      box-sizing: border-box;
+      cursor: default;
+
+      &::-webkit-scrollbar {
+        height: 6px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: #c0c4cc;
+        border-radius: 3px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background-color: #f5f7fa;
+      }
+    }
   }
 
   .parent-alert {
     margin-bottom: 12px;
   }
 
+  .urge-tree-alert {
+    margin-bottom: 12px;
+  }
+
+  .urge-tree-filter {
+    margin-bottom: 12px;
+  }
+
+  .urge-tree-wrap {
+    max-height: 60vh;
+    overflow: auto;
+    border: 1px solid #ebeef5;
+    border-radius: 4px;
+    padding: 12px;
+  }
+
+  .urge-tree-node {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 12px;
+    font-size: 14px;
+    line-height: 24px;
+  }
+
+  .urge-tree-node-name {
+    font-weight: 500;
+    color: #303133;
+  }
+
+  .urge-tree-node-meta {
+    color: #909399;
+    font-size: 13px;
+  }
+
   .selected-tip {
     float: left;
     color: #606266;