ylrz_his_scrm_companyUI/src/views/taskStatistics/wxClient/index.vue

<template>
  <div class="app-container">
    <el-row :gutter="24" class="baseInfo">
      <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
        <el-card :bordered="false" dis-hover :padding="12">
          <div slot="header" class="acea-row row-between-wrapper">
            <span>加微记录数</span>
          </div>
          <div v-if="count" class="content">
            <span class="content-number spBlock mb15">
              <count-to :start-val="0" :end-val="totalRecordCount || 0" :duration="2600" class="card-panel-num" />
            </span>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
        <el-card :bordered="false" dis-hover :padding="12">
          <div slot="header" class="acea-row row-between-wrapper">
            <span>加微成功数</span>
          </div>
          <div v-if="count" class="content">
            <span class="content-number spBlock mb15">
              <count-to :start-val="0" :end-val="successRecordCount || 0" :duration="2600" class="card-panel-num" />
            </span>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="ivu-mb">
        <el-card :bordered="false" dis-hover :padding="12">
          <div slot="header" class="acea-row row-between-wrapper">
            <span>今日加微</span>
          </div>
          <div v-if="count" class="content">
            <span class="content-number spBlock mb15">
              <count-to :start-val="0" :end-val="todayRecordCount || 0" :duration="2600" class="card-panel-num" />
            </span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true" label-width="96px">
<!--      <el-form-item label="任务" prop="roboticId">-->
<!--        <el-select v-model="queryParams.roboticId" filterable clearable>-->
<!--          &lt;!&ndash; 默认选项 &ndash;&gt;-->
<!--          <el-option label="所有任务" :value="null" />-->
<!--          &lt;!&ndash; 动态列表 &ndash;&gt;-->
<!--          <el-option-->
<!--            v-for="item in roboticList"-->
<!--            :key="item.id"-->
<!--            :label="item.name"-->
<!--            :value="item.id"-->
<!--          />-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item prop="roboticId">
        <el-select
          v-model="queryParams.roboticId"
          filterable
          clearable
          placeholder="请选择任务"
          @change="handleQuery"
          class="task-select"
        >
          <i slot="prefix" class="el-icon-s-operation" />

          <el-option label="所有任务" :value="null" />
          <el-option
            v-for="item in roboticList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
<!--      <el-form-item label="销售" prop="wxAccountId">-->
<!--        <el-select v-model="queryParams.wxAccountId" filterable clearable>-->
<!--          <el-option-->
<!--            v-for="item in accountList"-->
<!--            :key="item.id"-->
<!--            :label="item.companyUserName + '-' + item.wxNickName"-->
<!--            :value="item.id"-->
<!--          />-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" clearable>
          <el-option label="执行中" :value="1" />
          <el-option label="执行成功" :value="2" />
          <el-option label="执行失败" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="执行时间" prop="time">
        <el-date-picker
          v-model="queryParams.time"
          type="datetimerange"
          range-separator="-"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :default-time="['00:00:00', '23:59:59']"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" 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
          v-hasPermi="['company:addwxlog:list']"
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >导出</el-button>
      </el-col>
      <right-toolbar :show-search.sync="showSearch" @queryTable="handleQuery" />
    </el-row>

    <el-table v-loading="loading" :data="companyClientList">
      <el-table-column label="记录 ID" align="center" prop="logId" width="90" />
      <el-table-column label="任务 ID" align="center" prop="roboticId" width="90" />
      <el-table-column label="企微账号" align="center" prop="wxAccountName" width="180" />
      <el-table-column label="微信昵称" align="center" prop="wxClientName" />
      <el-table-column label="手机号" align="center" prop="phone" />
<!--      <el-table-column label="话术" align="center" prop="dialogName" />-->
      <el-table-column label="加微类型" align="center" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isWeCom == 1" type="success">个微</el-tag>
          <el-tag v-else-if="scope.row.isWeCom == 2" type="primary">企微</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="客户意向度" align="center" prop="intention" />
      <el-table-column label="是否添加" align="center" prop="status" width="100">
        <template slot-scope="scope">
          <el-tag :type="getIsAddStatusType(scope.row.isAdd)">
            {{ getIsAddStatusLabel(scope.row.isAdd) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="公司" align="center" prop="companyName" />
      <el-table-column label="添加时间" align="center" prop="addTime" />

      <el-table-column label="状态" align="center" prop="status" width="100">
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ getStatusLabel(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="执行时间" align="center" prop="runTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.runTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>

<!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
<!--        <template slot-scope="scope">-->
<!--          &lt;!&ndash;          <el-button&ndash;&gt;-->
<!--          &lt;!&ndash;            size="mini"&ndash;&gt;-->
<!--          &lt;!&ndash;            type="text"&ndash;&gt;-->
<!--          &lt;!&ndash;            icon="el-icon-edit"&ndash;&gt;-->
<!--          &lt;!&ndash;            @click="handleUpdate(scope.row)"&ndash;&gt;-->
<!--          &lt;!&ndash;            v-hasPermi="['company:companyClient:edit']"&ndash;&gt;-->
<!--          &lt;!&ndash;          >修改</el-button>&ndash;&gt;-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-delete"-->
<!--            @click="handleDelete(scope.row)"-->
<!--            v-hasPermi="['company:addwxlog:remove']"-->
<!--          >删除-->
<!--          </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"
    />
  </div>
</template>

<script>
import { listAllAddWx, exportAddwx, delCompanyClient } from '@/api/company/addwx'
// import { addWxStatistics } from '@/api/company/companyClient'
import { listAll as roboticListAll } from '@/api/company/companyVoiceRobotic'
import { listAll as accountListAll } from '@/api/company/companyAccount'
import CountTo from 'vue-count-to'

export default {
  name: 'WxClientStatistics',
  components: { CountTo },
  data() {
    return {
      loading: false,
      showSearch: true,
      total: 0,
      companyClientList: [],
      roboticList: [],
      accountList: [],
      count: {},
      totalRecordCount: 0,
      successRecordCount: 0,
      todayRecordCount:0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roboticId: null,
        wxAccountId: null,
        status: null,
        time: []
      }
    }
  },
  created() {
    this.initOptions()
    this.handleQuery()
  },
  methods: {
    initOptions() {
      roboticListAll().then((res) => {
        this.roboticList = res.data || []
      })
      accountListAll().then((res) => {
        this.accountList = res.data || []
      })
    },
    getQueryData() {
      const params = JSON.parse(JSON.stringify(this.queryParams))
      if (params.time && params.time.length === 2) {
        params.beginTime = params.time[0]
        params.endTime = params.time[1]
      }
      delete params.time
      return params
    },
    getList() {
      this.loading = true
      listAllAddWx(this.getQueryData())
        .then((response) => {
          this.companyClientList = response.rows || []
          this.total = response.total || 0
          this.successRecordCount = response.successRecordCount || 0
          this.totalRecordCount = response.totalRecordCount || 0
          this.todayRecordCount = response.todayRecordCount || 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    // statis() {
    //   addWxStatistics(this.getQueryData()).then((res) => {
    //     this.count = res || {}
    //   })
    // },
    getStatusLabel(value) {
      if (value === 1) return '执行中'
      if (value === 2) return '成功'
      if (value === 3) return '失败'
      return '-'
    },
    getStatusType(value) {
      if (value === 1) return 'warning'
      if (value === 2) return 'success'
      if (value === 3) return 'danger'
      return 'info'
    },
    getIsAddStatusLabel(value) {
      if (value === 0) return '失败'
      if (value === 1) return '成功'
      if (value === 2) return '加微中'
      return '-'
    },
    getIsAddStatusType(value) {
      if (value === 0) return 'danger'
      if (value === 1) return 'success'
      if (value === 2) return 'warning'
      return 'info'
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      // this.statis()
      this.getList()
    },
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    handleExport() {
      const queryParams = this.getQueryData()
      this.$confirm('是否确认导出查询出的短链课程看课记录数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.exportLoading = true;
        return exportAddwx(queryParams)
      }).then((response) => {
        this.download(response.msg)
        this.exportLoading = false;
      }).catch(() => {})
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.logId || this.ids;
      this.$confirm('是否确认删除编号为 "' + ids + '" 的加微信日志数据项？', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delCompanyClient(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(function () {
      });
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.baseInfo {
  margin-bottom: 30px;
}

.content {
  .card-panel-num {
    display: inline-block;
    font-size: 30px;
  }

  &-time {
    font-size: 14px;
  }
}

.task-select .el-input__inner {
  background-color: #ecf5ff;
  border: 1px solid #409EFF;
  border-radius: 20px;
  height: 36px;
  padding-left: 15px;
  box-shadow: 0 2px 6px rgba(64,158,255,0.1);
  transition: all 0.2s;
}

.task-select .el-input__inner:hover {
  border-color: #66b1ff;
}

.task-select .el-input.is-focus .el-input__inner {
  border-color: #409EFF;
  box-shadow: 0 0 8px rgba(64,158,255,0.3);
  background-color: #ffffff;
}
</style>