dvcp_v2_webapp/packages/xbot/AppCallDetails/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"/>
              <el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="getListInit()">
            </el-date-picker>
            <!-- <span class="tips">当前机位1有效期为：{{configInfo.validity}}&nbsp;&nbsp;&nbsp;&nbsp;ip地址为：{{configInfo.xbotIp}}</span> -->
          </template>
          <template #right>
            <!-- <ai-download :instance="instance" url="/app/appepidemicbackhomerecord/export" fileName="调用明细" :disabled="tableData.length == 0">
              <el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
            </ai-download> -->
            <el-input
              v-model="search.loginUserName"
              size="small"
              v-throttle="() => { search.current = 1, getListInit() }"
              placeholder="姓名/手机号"
              clearable
              @clear="search.current = 1, search.loginUserName = '', getListInit()"
              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" width="200">
            <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="options" label="操作"  align="center" width="200px">
            <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,
        loginUserName: ''
      },
      tableData: [],
      total: 0,
      dialog: false,
      configList: [],
      configId: '',
      configInfo: {id: ''},
      groupInfo: {},
      searchGroup: {
        current: 1,
        size: 10,
      },
      tableDataGroup: [],
      totalGroup: 0,
      showArea: false,
      areaInfo: {},
      time: []
    }
  },
  created() {
    this.dict.load('yesOrNo', 'deviceStatus').then(() => {
      this.getConfigList()
    })
  },
  computed: {
    ...mapState(['user']),
    colConfigs() {
      return [
        { slot: "avatar"},
        { prop: "xbotName", label: '机位'},
        { slot: "loginUserId", label: '用户id'},
        { prop: "loginUserName", label: '姓名', align: "left"},
        { prop: "phone", label: '手机号'},
        { prop: "aiTotal", label: '累计调用'},
        { prop: "aiActive", label: '主动调用'},
        { prop: "aiPassive", label: '被动调用'},
        { prop: "areaName", label: '所属地区'},
        { slot: "option"},
      ]
    },
    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) {
      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/list2`,null,{
        params: {
          ...this.search,
          beginTime: this.time && this.time.length ? this.time[0] : '',
          endTime: this.time && this.time.length ? this.time[1] : '' ,
          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)
          tableDataGroup.map((item) => {
            item.num = item.member_list.length
            if(item.total_member > 2) {
              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>