saasadminui/src/views/lobster/optimization/index.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="所属租户" prop="companyId">
        <el-select v-model="queryParams.companyId" placeholder="全部租户" clearable size="small" @change="handleQuery">
          <el-option v-for="item in companyList" :key="item.id" :label="item.companyName" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="工作流ID" prop="workflowId">
        <el-input v-model="queryParams.workflowId" placeholder="请输入工作流ID" clearable size="small" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" 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 type="success" plain icon="el-icon-check" size="mini" @click="handleBatchAudit(true)">批量通过</el-button></el-col>
      <el-col :span="1.5"><el-button type="danger" plain icon="el-icon-close" size="mini" @click="handleBatchAudit(false)">批量驳回</el-button></el-col>
      <el-col :span="1.5"><el-button type="primary" plain icon="el-icon-data-analysis" size="mini" @click="handleAnalyze">触发分析</el-button></el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <!-- 统计卡片 -->
    <el-row :gutter="16" class="mb8">
      <el-col :span="6"><el-card shadow="hover"><div class="stat-card"><div class="stat-value">{{ stats.totalOptimizations || 0 }}</div><div class="stat-label">总优化数</div></div></el-card></el-col>
      <el-col :span="6"><el-card shadow="hover"><div class="stat-card"><div class="stat-value" style="color:#E6A23C">{{ stats.pendingCount || 0 }}</div><div class="stat-label">待审核</div></div></el-card></el-col>
      <el-col :span="6"><el-card shadow="hover"><div class="stat-card"><div class="stat-value" style="color:#67C23A">{{ stats.appliedCount || 0 }}</div><div class="stat-label">已应用</div></div></el-card></el-col>
      <el-col :span="6"><el-card shadow="hover"><div class="stat-card"><div class="stat-value" style="color:#F56C6C">{{ stats.rejectedCount || 0 }}</div><div class="stat-label">已驳回</div></div></el-card></el-col>
    </el-row>
    <el-table border v-loading="loading" :data="list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="优化ID" align="center" prop="optimizationId" width="80" />
      <el-table-column label="优化原因" align="center" prop="optimizationReason" show-overflow-tooltip />
      <el-table-column label="原始话术" align="center" prop="originalContent" show-overflow-tooltip />
      <el-table-column label="优化话术" align="center" prop="optimizedContent" show-overflow-tooltip />
      <el-table-column label="置信度" align="center" prop="confidence" width="80" />
      <el-table-column label="状态" align="center" prop="status" width="80">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status==='pending'?'warning':scope.row.status==='applied'?'success':'danger'" size="small">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="120">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status==='pending'" size="mini" type="text" @click="handleAuditSingle(scope.row, true)">通过</el-button>
          <el-button v-if="scope.row.status==='pending'" size="mini" type="text" style="color:#F56C6C" @click="handleAuditSingle(scope.row, false)">驳回</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { listAllCompanies } from '@/api/workflow/lobster-admin'
import { listPendingAudit, batchAuditOptimization, auditSingleOptimization, getOptimizationStats, analyzeEvolution } from '@/api/workflow/lobster'
export default {
  name: 'LobsterOptimization',
  data() {
    return { loading: false, showSearch: true, list: [], stats: {}, ids: [],
      queryParams: { page: 1, pageSize: 20, workflowId: null } }
  },
  created() { this.getCompanyList()
    this.getList(); this.getStats() },
  methods: {
    getCompanyList() {
      listAllCompanies().then(res => { this.companyList = res.data || [] })
    },
    getList() { this.loading = true; listPendingAudit(this.queryParams).then(res => { this.list = res.data || []; this.loading = false }).catch(() => { this.loading = false }) },
    getStats() { getOptimizationStats().then(res => { this.stats = res.data || {} }) },
    handleQuery() { this.queryParams.page = 1; this.getList() },
    resetQuery() { this.resetForm('queryForm'); this.handleQuery() },
    handleSelectionChange(sel) { this.ids = sel.map(s => s.optimizationId) },
    handleAuditSingle(row, approved) { auditSingleOptimization(row.optimizationId, approved, '').then(() => { this.$message.success(approved?'已通过':'已驳回'); this.getList(); this.getStats() }) },
    handleBatchAudit(approved) {
      if (this.ids.length===0) { this.$message.warning('请先选择要审核的项'); return }
      let items = this.ids.map(id => ({ optimizationId: id, approved, remark: '' }))
      batchAuditOptimization({ auditItems: items, auditRemark: approved?'批量通过':'批量驳回' }).then(() => { this.$message.success('批量审核完成'); this.getList(); this.getStats() })
    },
    handleAnalyze() {
      if (!this.queryParams.workflowId) { this.$message.warning('请输入工作流ID'); return }
      analyzeEvolution(this.queryParams.workflowId).then(() => {
        this.$message.success('进化分析已触发')
        this.getList(); this.getStats()
      })
    }
  }
}
</script>
<style scoped>
.stat-card { text-align: center; padding: 10px 0; }
.stat-value { font-size: 24px; font-weight: bold; color: #409EFF; }
.stat-label { font-size: 12px; color: #909399; margin-top: 4px; }
</style>