dvcp_v2_webapp/packages/xbot/AppSeatManagementXbot/components/List.vue

<template>
  <section class="List">
    <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" clearable>
              <el-option
                v-for="item in configList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <ai-area-get
              style="width: 180px;"
              placeholder="所属地区"
              :instance="instance"
              v-model="search.areaId"
              @change="getListInit"/>
            <span class="tips">当前机位1有效期为：{{configInfo.validity}}&nbsp;&nbsp;&nbsp;&nbsp;ip地址为：{{configInfo.xbotIp}}</span>
          </template>
          <template #right>
            <el-button size="small" v-if="configInfo.validity" :type="configInfo.status != 1 ? 'info' : 'primary'" @click="openWechat()" :disabled="configInfo.status != 1">{{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="avatar" label="头像 "  align="left" width="100">
            <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="loginUserName" label="姓名"  align="left" width="180" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <p>{{row.loginUserName}}   ({{row.loginUserId}})</p>
            </template>
          </el-table-column>
          <el-table-column slot="groupCount" label="监控群聊"  align="center">
            <template slot-scope="{ row }">
              <div @click="showDialog(row)" style="cursor: pointer;color:#26f">{{row.monitorGroupCount}}</div>
            </template>
          </el-table-column>
          <el-table-column slot="areaName" label="所属地区"  align="center">
            <template slot-scope="{ row }">
              <div @click="changeArea(row)" style="cursor: pointer;color:#26f">{{row.areaName || '请选择'}}</div>
            </template>
          </el-table-column>
          <el-table-column slot="num" label="群匹配"  align="center">
            <template slot-scope="{ row }">
              <div>{{row.matchGroupCount}}/{{row.groupCount}}</div>
            </template>
          </el-table-column>
          <el-table-column slot="options" label="操作"  align="center" width="150px">
            <template slot-scope="{ row }">
              <el-button type="text" @click="toGroup(row)">群匹配</el-button>
              <!-- <el-button type="text" @click="toAnnouce(row)">推送任务</el-button> -->
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <ai-dialog
      title="监控群聊"
      :visible.sync="dialog"
      :destroyOnClose="true"
      width="720px"
      :customFooter="true">
        <ai-table :tableData="tableDataGroup" :isShowPagination="false"
          @getList="getTableDataGroup()" :col-configs="colConfigsGroup">
          <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>
        </ai-table>
        <div class="dialog-footer" slot="footer">
          <el-button @click="dialog=false">关闭</el-button>
        </div>
    </ai-dialog>
    <ai-dialog
      title="所属地区设置"
      :visible.sync="showArea"
      :destroyOnClose="true"
      width="720px"
      @onConfirm="areaConfirm"
      >
      <el-form class="ai-form" :model="areaInfo" label-width="120px" ref="form">
        <el-form-item prop="areaId" style="width: 100%;" label="所属地区" :rules="[{required: true, message: '请选择所属地区地区', trigger: 'change'}]">
          <ai-area-get style="width: 400px;" placeholder="所属地区" :instance="instance" v-model="areaInfo.areaId" :name.sync="areaInfo.areaName" />
        </el-form-item>
      </el-form>
    </ai-dialog>
  </section>

</template>

<script>
import { mapState } from "vuex";
export default {
  name: "List",
  props: {
    instance: Function,
    dict: Object
  },
  data() {
    return {
      search: {
        areaId: '',
        current: 1,
        size: 10,
      },
      tableData: [],
      total: 0,
      dialog: false,
      configList: [],
      configId: '',
      configInfo: {id: ''},
      groupInfo: {},
      searchGroup: {
        current: 1,
        size: 10,
      },
      tableDataGroup: [],
      totalGroup: 0,
      showArea: false,
      areaInfo: {}
    }
  },
  created() {
    this.dict.load('yesOrNo', 'deviceStatus', 'xbotType').then(() => {
      this.getConfigList()
    })
  },
  computed: {
    ...mapState(['user']),
    colConfigs() {
      return [
        { prop: "type", label: '类型', dict: 'xbotType', width: 150},
        { slot: "avatar"},
        { prop: "xbotName", label: '机位'},
        // { slot: "loginUserId", label: '用户id'},
        { slot: "loginUserName"},
        { prop: "phone", label: '手机号'},
        // { prop: "girdNames", label: '管辖区域'},
        { slot: "groupCount", label: '监控群聊'},
        { slot: "areaName"},
        { slot: "num", label: '群匹配'},
        { prop: "status", label: '状态', dict: 'deviceStatus', align: "center"},
        { slot: "option"},
      ]
    },
    colConfigsGroup() {
      return [
        { slot: "avatar", label: '群聊头像'},
        { prop: "nickname", label: '群聊名称', align: 'center'},
        { prop: "is_manager", label: '是否管理员', dict: 'yesOrNo', align: 'center'},
        { prop: "total", 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) {
      if(e) {
        this.configList.map((item) => {
          if(item.id == e) {
            this.configInfo = {...item}
          }
        })
      }else {
        this.configInfo = {id: ''}
      }
      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 = 0
          this.$message.success('启动成功!')
        }
      })
    },
    getListInit() {
      this.search.current = 1
      this.getTableData()
    },
    getTableData() {
      this.instance.post(`/app/xbotCallback/list`,null,{
        params: {
          ...this.search,
          xbotId: this.configInfo.id ? this.configInfo.id : ''
        }
      }).then(res => {
        if(res?.data) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    showDialog(row) {
      if(row.status == 1) {
        this.dialog = true
        this.groupInfo = row
        this.getTableDataGroup()
      }
    },
    changeArea(row) {
      this.showArea = true
      this.areaInfo = {...row}
      this.$refs['form'].clearValidate();
    },
    areaConfirm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.instance.post(`app/xbotCallback/updateArea?id=${this.areaInfo.id}&areaId=${this.areaInfo.areaId}&areaName=${this.areaInfo.areaName}`).then(res => {
            if (res.code == 0) {
              this.$message.success('所属地区设置成功')
              this.showArea = false
              this.getListInit()
            }
          })
        } else {
          return false
        }
      });
    },
    getTableDataGroup() {
      this.tableDataGroup = []
      this.instance.post(`/app/xbotCallback/groupList`,null,{
        params: {
          // ...this.searchGroup,
          current: 1,
          managerWxid: this.groupInfo.loginUserId,
          xbotId: this.groupInfo.xbotId
        }
      }).then(res => {
        if(res?.data) {
          var tableDataGroup = JSON.parse(res.data)
          console.log(tableDataGroup)
          tableDataGroup.map((item) => {  // 0企微 1个微
            if(this.groupInfo.type == 1 && item.total_member > 2) {
              this.tableDataGroup.push(item)
            }
            if(this.groupInfo.type == 0) {
              item.is_manager = item.is_admin
              this.tableDataGroup.push(item)
            }
          })
        }
      })
    },
    toGroup(row) {
      this.$emit('change', {
        type: 'GroupList',
        params:row
      })
    },
    toAnnouce(row) {
      this.$emit('change', {
        type: 'AnnounceList',
        params: row,
        isRefresh: true
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.List {
  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>