dvcp_v2_webapp/packages/xbot/AppTaskAi/components/GroupList.vue

<template>
  <section class="GroupList">
    <ai-list>
      <template slot="title">
        <ai-title title="群匹配" isShowBottomBorder isShowBack @onBackClick="cancel(false)"></ai-title>
      </template>
      <template #content>
        <ai-search-bar>
          <template #left>
            <ai-select v-model="search.matchStatus" :selectList="dict.getDict('xbotGroupMatchStatus')" placeholder="请选择是否匹配" @change="search.current = 1, getTableData()"/>
            <ai-select v-model="search.status" :selectList="dict.getDict('xbotGroupStatus')" placeholder="请选择群状态" @change="search.current = 1, getTableData()"/>
            <el-button type="primary" @click="match">自动匹配</el-button>
          </template>
          <template #right>
            <el-input
              v-model="search.nickname"
              size="small"
              placeholder="群名称"
              clearable
              v-throttle="() => {search.current = 1, getTableData()}"
              @clear="search.current = 1, search.nickname = '', getTableData()"
              suffix-icon="iconfont iconSearch">
            </el-input>
          </template>
        </ai-search-bar>
        <ai-table :tableData="tableData" :total="total" :current.sync="search.current" :size.sync="search.size"
                  @getList="getTableData()" :col-configs="colConfigs">
          <el-table-column slot="avatar" label="群聊头像"  align="left">
            <template slot-scope="{ row }">
              <img :src="row.avatar ? row.avatar : 'https://cdn.cunwuyun.cn/dvcp/group-img.png'" alt="" class="group-avatar">
            </template>
          </el-table-column>
          <el-table-column slot="option" label="操作"  align="center">
            <template slot-scope="{ row }">
              <div class="table-options">
                <el-button type="text" @click="edit(row)">编辑</el-button>
              </div>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <ai-dialog
      :visible.sync="dialog"
      width="800px"
      @close="dialog=false"
      title="群关联信息"
      @onConfirm="onConfirm">
      <el-form class="ai-form" label-width="120px" :model="editInfo" ref="editInfo">
        <el-form-item label="群名称" style="width: 100%;">
          <div>{{editInfo.nickname}}</div>
        </el-form-item>
        <el-form-item label="群主ID" style="width: 100%;">
          <div>{{editInfo.managerWxid}}</div>
        </el-form-item>
        <el-form-item label="人员关联" prop="managerTpUserName" style="width: 100%;" :rules="[{ required: true, message: '请选择人员' }]">
          <el-input disabled size="small" v-model="editInfo.managerTpUserName" clearable placeholder="请选择人员">
            <template slot="append">
              <ai-user-selecter refs="addTags" :isMultiple="false" :instance="instance" v-model="editInfo.user" @change="onChooseUser">
                <el-button size="small">选择人员</el-button>
              </ai-user-selecter>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </section>

</template>

<script>
import { mapState } from "vuex";
export default {
  name: "GroupList",
  props: {
    instance: Function,
    dict: Object,
    params: Object
  },
  data() {
    return {
      search: {
        current: 1,
        size: 10,
        matchStatus: '',
        status: '',
        nickname: ''
      },
      tableData: [],
      total: 0,
      dialog: false,
      editInfo: {}
    }
  },
  created() {
    this.dict.load('xbotGroupMatchStatus', 'xbotGroupStatus').then(() => {
      this.getTableData()
    })
  },
  computed: {
    ...mapState(['user']),
    colConfigs() {
      return [
       { slot: "avatar", label: '群聊头像'},
        { prop: "nickname", label: '群名称', align: 'center'},
        { prop: "managerNickname", label: '群主昵称', align: 'center'},
        { prop: "status", label: '群状态', align: 'center', dict: 'xbotGroupStatus'},
        { prop: "managerTpUserName", label: '关联人员', align: 'center'},
        { prop: "managerTpUserDeptName", label: '主部门', align: 'center'},
        { slot: "option"},
        // { prop: "status", label: '状态'},
      ]
    },
  },
  methods: {
    getTableData() {
      this.instance.post(`/app/xbotCallback/groupMatchList`,null,{
        params: {
          ...this.search,
          managerWxid: this.params.loginUserId
        }
      }).then(res => {
        if(res?.data) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    showDialog(row) {
      this.dialog = true
      this.groupInfo = row
      this.getTableDataGroup()
    },
    getTableDataGroup() {
      this.instance.post(`/app/xbotCallback/groupList`,null,{
        params: {
          // ...this.searchGroup,
          current: 1,
          managerWxid: this.groupInfo.loginUserId
        }
      }).then(res => {
        if(res?.data) {
          this.tableDataGroup = JSON.parse(res.data)
          this.tableDataGroup.map((item) => {
            item.num = item.member_list.length
          })
          // this.totalGroup = res.data.total
        }
      })
    },
    cancel(isRefresh) {
      this.$emit('change', {
        type: 'List',
        isRefresh: !!isRefresh
      })
    },
    match() {
      this.instance.post(`/app/xbotCallback/automaticMatch`,null,{
        params: {
          managerWxid: this.params.loginUserId
        }
      }).then(res => {
        if(res.code == 0) {
          this.$message.success('匹配成功!')
          this.getTableData()
        }
      })
    },
    edit(row) {
      this.dialog = true
      this.editInfo = {...row}
      this.editInfo.user = [{id: row.managerTpwxid, name: row.managerTpUserName}]
    },
    onChooseUser(v) {
      this.editInfo.wxUserId = v[0].id
      this.editInfo.managerTpUserName = v[0].name
      this.editInfo.user = v
    },
    onConfirm() {
      this.$refs.editInfo.validate(v => {
        if (v) {
          this.instance.post('/app/xbotCallback/manualMatch', null, {
            params: {
              wxUserId: this.editInfo.wxUserId,
              wxid: this.editInfo.wxid
            }
          }).then(res => {
            if (res?.code == 0) {
              this.dialog = false
              this.getTableData()
              this.$message.success('编辑成功!')
            }
          })
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.GroupList {
  height: 100%;

  .time-select {
    padding: 0 16px;
    height: 32px;
    line-height: 32px;
    border: 1px solid #d0d4dc;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    .el-icon-arrow-down {
      line-height: 32px;
    }
  }

  :deep .is-error {
    .time-select {
      border: 1px solid #f46!important;
    }
  }
  .tips {
    display: inline-block;
    color: #999;
    font-size: 14px;
    margin-left: 16px;
  }
  .group-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  :deep .ai-dialog__content--wrapper {
    // height: 1000px;
    // overflow-y: scroll;
    .ai-table {
      // height: 1000px;
    }
  }
}
</style>