ylrz_his_scrm_companyUI/src/views/qw/customerLink/index.vue

<template>
  <div class="app-container">
    <!-- 查询表单 -->
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="链接名称" prop="linkName">
        <el-input
          v-model="queryParams.linkName"
          placeholder="请输入链接名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="企业微信" prop="corpName">
        <el-input
          v-model="queryParams.corpName"
          placeholder="请输入企业微信"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 列表 -->
    <el-table v-loading="loading" :data="list" border>
      <el-table-column label="链接名称" align="center" prop="linkName" />
      <el-table-column label="企业微信" align="center" prop="corpName" />
      <el-table-column label="渠道链接" align="center" prop="url" show-overflow-tooltip />
      <el-table-column label="创建人" align="center" prop="createBy" />
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column label="最后修改人" align="center" prop="updateBy" />
      <el-table-column label="修改时间" align="center" prop="updateTime" />
      <el-table-column label="今日添加数" align="center" prop="toDayAddNum" />
      <el-table-column label="累积添加数" align="center" prop="countAddNum" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleViewChannel(scope.row)">查看渠道</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 新增/编辑对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body @close="cancel">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="链接名称" prop="linkName">
          <el-input v-model="form.linkName" placeholder="请输入链接名称" />
        </el-form-item>
        <el-form-item label="企业微信" prop="corpId">
          <el-select v-model="form.corpId" placeholder="请选择企业微信" @change="handleCorpChange">
            <el-option v-for="item in qwCompanyList" :key="item.corpId" :label="item.corpName" :value="item.corpId" />
          </el-select>
        </el-form-item>
        <el-form-item label="自动通过好友" prop="skipVerify">
          <div style="display: flex; align-items: center; height: 32px;">
            <el-switch v-model="form.skipVerify" :active-value="1" :inactive-value="0" />
          </div>
        </el-form-item>
        <el-form-item label="员工选择" prop="linkUser">
          <el-select v-model="form.selectedUserIds" placeholder="请先选择企业微信" :disabled="!form.corpId" multiple @change="handleUserChange">
            <el-option v-for="item in qwUserList" :key="item.id" :label="item.qwUserName" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 查看渠道链接对话框 -->
    <el-dialog title="查看渠道链接" :visible.sync="channelDialogOpen" width="900px" append-to-body @close="cancelChannel">
      <!-- 查询表单 -->
      <el-form :model="channelQueryParams" ref="channelQueryForm" :inline="true" v-show="channelShowSearch" label-width="68px">
        <el-form-item label="渠道名称" prop="linkName">
          <el-input
            v-model="channelQueryParams.linkName"
            placeholder="请输入渠道名称"
            clearable
            size="small"
            @keyup.enter.native="getChannelList"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getChannelList">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetChannelQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAddChannel"
          >新增</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="channelShowSearch" @queryTable="getChannelList"></right-toolbar>
      </el-row>

      <!-- 渠道列表 -->
      <el-table v-loading="channelLoading" :data="channelList" border>
        <el-table-column label="渠道名称" align="center" prop="linkName" />
        <el-table-column label="渠道链接" align="center" prop="url" show-overflow-tooltip />
        <el-table-column label="今日添加数" align="center" prop="toDayAddNum" />
        <el-table-column label="累积添加数" align="center" prop="countAddNum" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteChannel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination
        v-show="channelTotal>0"
        :total="channelTotal"
        :page.sync="channelQueryParams.pageNum"
        :limit.sync="channelQueryParams.pageSize"
        @pagination="getChannelList"
      />

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelChannel">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 新增渠道对话框 -->
    <el-dialog title="选择渠道" :visible.sync="selectChannelDialogOpen" width="900px" append-to-body>
      <el-row :gutter="20">
        <!-- 左侧：分组和渠道选择 -->
        <el-col :xs="24" :sm="12">
          <div style="border-right: 1px solid #dcdfe6; padding-right: 20px;">
            <h4 style="margin-top: 0; margin-bottom: 15px;">分组管理</h4>
            <div style="margin-bottom: 15px;">
              <el-input 
                v-model="selectChannelQueryParams.channelName" 
                placeholder="搜索分组"
                clearable
                size="small"
                @input="loadGroupList"
              />
            </div>
            <div style="border: 1px solid #dcdfe6; border-radius: 4px; max-height: 400px; overflow-y: auto;">
              <div 
                v-for="item in groupList" 
                :key="item.id"
                :class="['group-item', { active: selectedGroupId === item.id }]"
                @click="selectGroup(item)"
                style="padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #f0f0f0; user-select: none;"
              >
                <span>{{ item.channelName }}</span>
              </div>
              <div v-if="groupList.length === 0" style="padding: 20px; text-align: center; color: #909399;">暂无分组</div>
            </div>
          </div>
        </el-col>
    
        <!-- 中间：渠道列表 -->
        <el-col :xs="24" :sm="12">
          <div style="padding: 0 20px;">
            <h4 style="margin-top: 0; margin-bottom: 15px;">渠道模板</h4>
            <div v-if="!selectedGroupId" style="padding: 40px 0; text-align: center; color: #909399;">
              请上方选择分组
            </div>
            <div v-else>
              <div style="border: 1px solid #dcdfe6; border-radius: 4px; max-height: 400px; overflow-y: auto;">
                <div 
                  v-for="item in selectChannelList" 
                  :key="item.id"
                  style="padding: 10px 15px; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; user-select: none; cursor: pointer; background-color: #fff; transition: all 0.3s;"
                  :style="{ backgroundColor: isChannelSelected(item) ? '#e6f7ff' : '#fff' }"
                  @click="toggleChannelSelection(item)"
                >
                  <el-checkbox 
                    :value="isChannelSelected(item)"
                    style="margin-right: 8px;"
                  />
                  <span>{{ item.channelName }}</span>
                </div>
                <div v-if="selectChannelList.length === 0" style="padding: 20px; text-align: center; color: #909399;">暂无渠道</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    
      <!-- 右侧：已选渠道 -->
      <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #dcdfe6;">
        <h4 style="margin-top: 0; margin-bottom: 10px;">已选渠道（{{ selectedChannels.length }}）</h4>
        <div style="border: 1px solid #dcdfe6; border-radius: 4px; padding: 10px; min-height: 80px; max-height: 150px; overflow-y: auto;">
          <el-tag 
            v-for="(item, index) in selectedChannels" 
            :key="item.channelId || index"
            closable
            @close="removeSelectedChannel(item)"
            style="margin: 5px; cursor: pointer;"
          >
            {{ item.channelName }}
          </el-tag>
          <div v-if="selectedChannels.length === 0" style="color: #909399; text-align: center; padding: 20px 0;">未选择任何渠道</div>
        </div>
      </div>
    
      <div slot="footer" class="dialog-footer">
        <el-button @click="selectChannelDialogOpen = false">取 消</el-button>
        <el-button type="primary" @click="confirmAddChannel">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  pageCustomerLink,
  createOrUpdateCustomerLink,
  deleteCustomerLink,
  pageCustomerLinkChannel,
  createCustomerLinkChannel,
  deleteCustomerLinkChannel
} from '@/api/qw/customerLink'
import { getMyQwCompanyList, listUser } from '@/api/qw/user'
import { pageProject } from '@/api/adv/channel'
import Pagination from '@/components/Pagination'
import RightToolbar from '@/components/RightToolbar'

export default {
  name: 'CustomerLink',
  components: {
    Pagination,
    RightToolbar
  },
  data() {
    return {
      // 加载状态
      loading: false,
      channelLoading: false,
      // 是否显示查询表单
      showSearch: true,
      channelShowSearch: true,
      // 列表数据
      list: [],
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        linkName: undefined,
        corpName: undefined
      },
      // 表单参数
      form: {},
      // 表单验证规则
      rules: {
        linkName: [
          { required: true, message: '请输入链接名称', trigger: 'blur' }
        ],
        corpId: [
          { required: true, message: '请选择企业微信', trigger: 'change' }
        ],
        linkUser: [
          { required: true, message: '请选择员工', trigger: 'change' }
        ]
      },
      // 对话框
      open: false,
      title: '',
      // 企业微信列表
      qwCompanyList: [],
      // 企业微信员工列表
      qwUserList: [],
      // 选中的企业微信ID
      selectedCorpId: undefined,
      
      // 渠道链接对话框
      channelDialogOpen: false,
      channelList: [],
      channelTotal: 0,
      channelQueryParams: {
        pageNum: 1,
        pageSize: 10,
        linkName: undefined,
        sysLinkId: undefined
      },
      // 新增渠道对话框
      selectChannelDialogOpen: false,
      selectChannelParams: {
        channelId: undefined
      },
      channelOptions: [],
      currentSysLinkId: undefined,
      
      // 渠道选择相关数据
      groupList: [],  // 分组列表
      selectedGroupId: null,  // 选中的分组ID
      selectChannelList: [],  // 当前分组的渠道列表
      selectChannelLoading: false,  // 渠道列表加载中
      selectedChannels: [],  // 已选择的渠道列表（右侧）
      selectChannelPageNum: 1,
      selectChannelPageSize: 10,
      selectChannelTotal: 0,
      selectChannelQueryParams: {
        channelName: ''
      }
    }
  },
  created() {
    this.getList()
    this.loadQwCompanyList()
  },
  methods: {
    // 查询列表
    getList() {
      this.loading = true
      pageCustomerLink(this.queryParams).then(response => {
        this.list = response.data.records || []
        this.total = response.data.total || 0
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 搜索
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    // 重置查询
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 新增
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '新增渠道管理'
    },
    // 编辑
    handleUpdate(row) {
      this.reset()
      this.form = Object.assign({}, row)
      this.selectedCorpId = row.corpId
      this.loadQwUserList(row.corpId)
      this.open = true
      this.title = '编辑渠道管理'
    },
    // 删除
    handleDelete(row) {
      this.$confirm('确定删除该渠道吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCustomerLink(row.id).then(response => {
          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() => {})
    },
    // 查看渠道链接
    handleViewChannel(row) {
      this.channelDialogOpen = true
      this.currentSysLinkId = row.id
      this.channelQueryParams.sysLinkId = row.id
      this.getChannelList()
    },
    // 查询渠道链接列表
    getChannelList() {
      this.channelLoading = true
      pageCustomerLinkChannel(this.channelQueryParams).then(response => {
        this.channelList = response.data.records || []
        this.channelTotal = response.data.total || 0
        this.channelLoading = false
      }).catch(() => {
        this.channelLoading = false
      })
    },
    // 重置渠道查询
    resetChannelQuery() {
      this.channelQueryParams = {
        pageNum: 1,
        pageSize: 10,
        linkName: undefined,
        sysLinkId: this.currentSysLinkId
      }
      this.getChannelList()
    },
    // 新增渠道链接
    handleAddChannel() {
      this.selectChannelDialogOpen = true
      this.selectedChannels = []
      this.selectedGroupId = null
      this.selectChannelList = []
      this.selectChannelQueryParams.channelName = ''
      this.loadGroupList()
    },
    // 加载分组列表
    loadGroupList() {
      const params = { pageNum: 1, pageSize: 1000, parentId: 0 }
      pageProject(params).then(response => {
        this.groupList = response.data.records || []
      }).catch(() => {
        this.groupList = []
      })
    },
    // 选择分组
    selectGroup(group) {
      this.selectedGroupId = group.id
      this.selectChannelPageNum = 1
      this.getSelectChannelList()
    },
    // 获取渠道列表
    getSelectChannelList() {
      if (!this.selectedGroupId) return
      this.selectChannelLoading = true
      const params = { pageNum: this.selectChannelPageNum, pageSize: this.selectChannelPageSize, parentId: this.selectedGroupId }
      if (this.selectChannelQueryParams.channelName) {
        params.channelName = this.selectChannelQueryParams.channelName
      }
      pageProject(params).then(response => {
        this.selectChannelList = response.data.records || []
        this.selectChannelTotal = response.data.total || 0
        this.selectChannelLoading = false
      }).catch(() => {
        this.selectChannelLoading = false
      })
    },
    // 勾选渠道
    toggleChannelSelection(channel) {
      const index = this.selectedChannels.findIndex(item => item.channelId === channel.id)
      if (index > -1) {
        // 已选中，取消选择
        this.selectedChannels.splice(index, 1)
      } else {
        // 未选中，添加选择
        this.selectedChannels.push({ channelId: channel.id, channelName: channel.channelName })
      }
    },
    // 判断渠道是否已选择
    isChannelSelected(channel) {
      return this.selectedChannels.some(item => item.channelId === channel.id)
    },
    // 删除已选渠道
    removeSelectedChannel(channel) {
      const index = this.selectedChannels.findIndex(item => item.channelId === channel.channelId)
      if (index > -1) {
        this.selectedChannels.splice(index, 1)
      }
    },
    // 加载渠道选项
    loadChannelOptions() {
      // 这里需要加载渠道列表，根据实际接口调整
      // 暂时使用空数组，需要后续实现
      this.channelOptions = []
    },
    // 确认新增渠道
    confirmAddChannel() {
      if (this.selectedChannels.length === 0) {
        this.$message.error('请选择渠道')
        return
      }
      const data = {
        sysLinkId: this.currentSysLinkId,
        channelList: this.selectedChannels
      }
      createCustomerLinkChannel(data).then(response => {
        this.$message.success('新增成功')
        this.selectChannelDialogOpen = false
        this.getChannelList()
      })
    },
    // 删除渠道链接
    handleDeleteChannel(row) {
      this.$confirm('确定删除该渠道链接吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCustomerLinkChannel(row.id).then(response => {
          this.$message.success('删除成功')
          this.getChannelList()
        })
      }).catch(() => {})
    },
    // 关闭渠道链接对话框
    cancelChannel() {
      this.channelDialogOpen = false
      this.currentSysLinkId = undefined
    },
    // 表单提交
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const data = {
            linkName: this.form.linkName,
            corpId: this.form.corpId,
            corpName: this.form.corpName,
            skipVerify: this.form.skipVerify,
            linkUser: this.form.linkUser
          }
          if (this.form.id) {
            data.id = this.form.id
          }
          createOrUpdateCustomerLink(data).then(response => {
            this.$message.success(this.form.id ? '编辑成功' : '新增成功')
            this.open = false
            this.getList()
          })
        }
      })
    },
    // 重置表单
    reset() {
      this.form = {
        linkName: undefined,
        corpId: undefined,
        corpName: undefined,
        skipVerify: 0,
        selectedUserIds: [],
        linkUser: []
      }
      this.qwUserList = []
      this.selectedCorpId = undefined
      if (this.$refs.form) {
        this.$refs.form.clearValidate()
      }
    },
    // 取消
    cancel() {
      this.open = false
      this.reset()
    },
    // 加载企业微信列表
    loadQwCompanyList() {
      getMyQwCompanyList().then(response => {
        this.qwCompanyList = response.data || []
      }).catch(() => {
        this.qwCompanyList = []
      })
    },
    // 企业微信改变
    handleCorpChange(corpId) {
      this.form.selectedUserIds = []
      this.form.linkUser = []
      this.qwUserList = []
      const selectedCompany = this.qwCompanyList.find(item => item.corpId === corpId)
      if (selectedCompany) {
        this.form.corpName = selectedCompany.corpName
      }
      this.loadQwUserList(corpId)
    },
    // 加载企业微信员工列表
    loadQwUserList(corpId) {
      if (!corpId) {
        this.qwUserList = []
        return
      }
      listUser({ corpId: corpId }).then(response => {
        this.qwUserList = response.rows || []
      }).catch(() => {
        this.qwUserList = []
      })
    },
    // 员工改变
    handleUserChange(userIds) {
      // 根据选中的用户ID列表构建员工信息数组
      this.form.linkUser = userIds.map(userId => {
        const selectedUser = this.qwUserList.find(item => item.id === userId)
        return {
          sysQwUserId: selectedUser.id,
          qwUserName: selectedUser.qwUserName,
          qwUserId: selectedUser.qwUserId
        }
      })
    },
    // 表单重置
    resetForm(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].resetFields()
      }
    }
  }
}
</script>

<style scoped>
</style>