dvcp_v2_webapp/project/pidu/app/AppSeatManagement/AppSeatManagement.vue

<template>
  <section class="AppSeatManagement">
    <ai-list>
      <template slot="title">
        <ai-title title="席位管理" isShowBottomBorder></ai-title>
      </template>
      <template #content>
        <ai-search-bar>
          <template #left>
            <el-select v-model="configInfo.id" filterable placeholder="请选择机位" size="small" @change="configChange">
              <el-option
                v-for="item in configList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <span class="tips">当前机位1有效期为：{{configInfo.validity}}&nbsp;&nbsp;&nbsp;&nbsp;ip地址为：{{configInfo.xbotIp}}</span>
          </template>
          <template #right>
            <el-button size="small" :type="configInfo.status == 1 ? 'info' : 'primary'" @click="openWechat()" :disabled="configInfo.status == 1">启动</el-button>
          </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="groupCount" label="监控群聊"  align="center">
            <template slot-scope="{ row }">
              <div @click="showDialog(row)" style="cursor: pointer;color:#26f">{{row.groupCount}}</div>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <ai-dialog
      title="监控群聊"
      :visible.sync="dialog"
      :destroyOnClose="true"
      width="720px"
      @closed="dialog=false" :customFooter="false">
        <ai-table :tableData="tableDataGroup" :total="totalGroup" :current.sync="searchGroup.current" :size.sync="searchGroup.size"
          @getList="getTableDataGroup()" :col-configs="colConfigsGroup">
          <el-table-column slot="avatar" label="群聊头像"  align="left">
            <template slot-scope="{ row }">
              <img :src="row.avatar" alt="" class="group-avatar">
            </template>
          </el-table-column>
        </ai-table>
    </ai-dialog>
  </section>

</template>

<script>
import { mapState } from "vuex";
export default {
  name: "AppSeatManagement",
  label: '席位管理',
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    menuName:String
  },
  data() {
    return {
      search: {
        current: 1,
        size: 10,
      },
      tableData: [],
      total: 0,
      dialog: false,
      configList: [],
      configId: '',
      configInfo: {id: ''},
      groupInfo: {},
      searchGroup: {
        current: 1,
        size: 10,
      },
      tableDataGroup: [],
      totalGroup: 0,
    }
  },
  created() {
    this.dict.load('yesOrNo').then(() => {
      this.getConfigList()
    })
  },
  computed: {
    ...mapState(['user']),
    colConfigs() {
      return [
        { slot: "loginUserId", label: '用户id'},
        { prop: "loginUserName", label: '姓名', align: "left"},
        { prop: "phone", label: '手机号'},
        { prop: "girdNames", label: '管辖区域'},
        { slot: "groupCount", label: '监控群聊'},
        // { prop: "status", label: '状态'},
      ]
    },
    colConfigsGroup() {
      return [
        { slot: "avatar", label: '群聊头像'},
        { prop: "nickname", label: '群聊名称', align: 'center'},
        { prop: "is_manager", label: '是否管理员', dict: 'yesOrNo', align: 'center'},
        { prop: "num", label: '群聊成员（人数）', align: 'center'},
        // { prop: "phone", label: '群主'},
      ]
    },
  },
  methods: {
    getConfigList() {
      this.instance.post(`/app/appxbotconfig/list?size=1000`).then(res => {
        if(res?.data) {
          res.data.records.map((item) => {
            item.label = item.xbotName
            item.value = item.id
          })
          this.configList = res.data.records
          this.configInfo = this.configList[0]
          this.getTableData()
        }
      })
    },
    configChange(e) {
      this.configInfo = this.configList.filter(item => item.id == e)[0]
      this.search.current = 1
      this.getTableData()
    },
    openWechat() {
      this.instance.post(`/app/appxbotconfig/openWechat?id=${this.configInfo.id}`).then(res => {
        if(res.code === 0) {
          this.configInfo.status = 1
          this.$message.success('启动成功!')
        }
      })
    },
    getTableData() {
      this.instance.post(`/app/xbotCallback/list`,null,{
        params: {
          ...this.search,
          xbotId: this.configInfo.id
        }
      }).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,
          managerWxid: this.groupInfo.loginUserId
        }
      }).then(res => {
        if(res?.data) {
          console.log(JSON.parse(res.data))
          this.tableDataGroup = JSON.parse(res.data)
          this.tableDataGroup.map((item) => {
            item.num = item.member_list.length
          })
          this.totalGroup = res.data.total
        }
      })
      
    },
  },
}
</script>

<style lang="scss" scoped>
.AppSeatManagement {
  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%;
  }
}
</style>