admin_new/src/modules/openapi/CompanyAccountListView.vue

<script setup lang="ts">
/**
 * F006 集成管理 - 公司账号管理
 * W4.2:套老 vue company-account.vue 结构
 *   - 列表筛选:按客户
 *   - 列:用户名 / 姓名 / 客户名 / appName / 动态摘要 / 状态 / 创建时间
 *   - 操作:查看动态(跳审计日志) / 接管 / 解绑
 *   - 弹窗:接管弹窗(recordType/recordId/toUserId/reason)
 *
 * 后端端点 (来自 OpenApiCompanyController):
 *   GET  /sys/openapi/company/page        分页列表(userType=99 过滤)
 *   GET  /sys/openapi/company/{id}        详情
 *   POST /sys/openapi/company/takeover    接管记录(后端 TODO)
 *   POST /sys/openapi/company/unbind      解绑 app(后端 TODO)
 *   GET  /sys/openapi/customer/list       客户列表
 *   GET  /sys/user/list?customerCode=&userType=1  员工列表(接管弹窗用)
 *
 * 设计规范:§16 列表页 + §17.7 紧凑弹窗 + §17.8 主题色弹窗 + §17.9 列优化
 */
import { onMounted, ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { httpGet, httpPost } from '@/utils/request'
import PageHeader from '@/components/PageHeader/PageHeader.vue'
import SearchBar from '@/components/SearchBar/SearchBar.vue'
import DataTable from '@/components/DataTable/DataTable.vue'
import TableActions from '@/components/TableActions/TableActions.vue'

interface CompanyAccount {
  id: string
  username: string
  realName: string
  customerCode: string
  customerName: string
  appName: string
  activitySummary: string
  status: 0 | 1
  createDate: string
  raw: any
}

interface CustomerOpt { value: string; label: string }
interface EmployeeOpt { id: number; realName: string; username: string }

const router = useRouter()

const STATUS_MAP: Record<number, { label: string; type: string }> = {
  1: { label: '正常', type: 'success' },
  0: { label: '已停用', type: 'info' }
}

const list = ref<CompanyAccount[]>([])
const total = ref(0)
const loading = ref(false)
const page = ref(1)
const limit = ref(10)

const filters = reactive({
  customerCode: ''
})

const customerOptions = ref<CustomerOpt[]>([])

const takeoverVisible = ref(false)
const takeoverForm = reactive({
  fromUserId: null as number | null,
  fromUsername: '',
  recordType: '',
  recordId: '',
  toUserId: null as number | null,
  reason: ''
})
const employeeOptions = ref<EmployeeOpt[]>([])
const takeoverLoading = ref(false)

const RECORD_TYPES = [
  { value: 'inquiry', label: '询价记录' },
  { value: 'product', label: '产品记录' },
  { value: 'order', label: '订单记录' }
]

function fmtDate(ts?: string | number | null) {
  if (!ts) return '--'
  const n = typeof ts === 'string' ? Date.parse(ts) : ts
  if (!n) return '--'
  const d = new Date(n)
  if (isNaN(d.getTime())) return String(ts)
  const pad = (x: number) => String(x).padStart(2, '0')
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
}

const loadError = ref<string | null>(null)

async function load() {
  loading.value = true
  loadError.value = null
  try {
    const data = await httpGet<{ total: number; list: any[] }>('/sys/openapi/company/page', {
      page: page.value,
      limit: limit.value,
      ...(filters.customerCode ? { customerCode: filters.customerCode } : {})
    })
    list.value = (data.list || []).map((it: any) => ({
      id: String(it.id),
      username: it.username || '--',
      realName: it.realName || '--',
      customerCode: it.customerCode || '--',
      customerName: it.customerName || it.customerCode || '--',
      appName: it.appName || '--',
      activitySummary: it.activitySummary || '--',
      status: (it.status ?? 0) as 0 | 1,
      createDate: it.createDate,
      raw: it
    }))
    total.value = data.total || 0
  } catch (e: any) {
    console.error('公司账号列表加载失败', e)
    list.value = []
    total.value = 0
    loadError.value = e?.msg || e?.message || '后端接口异常(详见 console)'
  } finally {
    loading.value = false
  }
}

async function loadCustomers() {
  try {
    const data = await httpGet<any[]>('/sys/openapi/customer/list')
    if (Array.isArray(data)) {
      customerOptions.value = data.map((c: any) => ({
        value: c.customerCode,
        label: c.customerName
      }))
    }
  } catch (e) {
    console.error('客户列表加载失败', e)
  }
}

function onSearch() { page.value = 1; load() }
function onReset() {
  filters.customerCode = ''
  page.value = 1
  load()
}
function onPageChange(p: number) { page.value = p; load() }
function onLimitChange(l: number) { limit.value = l; page.value = 1; load() }

function activityHandle(row: CompanyAccount) {
  router.push({
    path: '/openapi/audit-log',
    query: {
      customerCode: row.customerCode,
      companyUserId: row.id,
      username: row.username
    }
  })
}

async function takeoverHandle(row: CompanyAccount) {
  takeoverForm.fromUserId = Number(row.id)
  takeoverForm.fromUsername = row.username
  takeoverForm.recordType = ''
  takeoverForm.recordId = ''
  takeoverForm.toUserId = null
  takeoverForm.reason = ''
  employeeOptions.value = []
  takeoverVisible.value = true
  takeoverLoading.value = true
  try {
    const res = await httpGet<any[]>('/sys/user/list', {
      customerCode: row.customerCode,
      userType: 1
    })
    employeeOptions.value = (Array.isArray(res) ? res : []).map((u: any) => ({
      id: u.id,
      realName: u.realName || u.username || '--',
      username: u.username || ''
    }))
  } catch (e) {
    console.error('员工列表加载失败', e)
    ElMessage.warning('员工列表加载失败,接管时将无法选择新发布人')
  } finally {
    takeoverLoading.value = false
  }
}

async function takeoverConfirm() {
  if (!takeoverForm.recordType) {
    ElMessage.warning('请选择记录类型')
    return
  }
  if (!takeoverForm.recordId.trim()) {
    ElMessage.warning('请输入记录 ID')
    return
  }
  if (!takeoverForm.toUserId) {
    ElMessage.warning('请选择新发布人')
    return
  }
  try {
    const res = await httpPost('/sys/openapi/company/takeover', { ...takeoverForm })
    if (res?.code !== 0) {
      ElMessage.error(res?.msg || '接管失败')
      return
    }
    ElMessage.success('接管成功')
    takeoverVisible.value = false
    load()
  } catch (e: any) {
    ElMessage.error(e?.msg || e?.message || '接管失败')
  }
}

function unbindHandle(row: CompanyAccount) {
  ElMessageBox.confirm(
    `确认解绑账号 ${row.username} 吗?解绑后将无法恢复。`,
    '解绑确认',
    { type: 'warning', confirmButtonText: '解绑', cancelButtonText: '取消' }
  )
    .then(async () => {
      try {
        const res = await httpPost('/sys/openapi/company/unbind', {
          id: Number(row.id),
          reason: '管理员解绑'
        })
        if (res?.code !== 0) {
          ElMessage.error(res?.msg || '解绑失败')
          return
        }
        ElMessage.success('解绑成功')
        load()
      } catch (e: any) {
        ElMessage.error(e?.msg || e?.message || '解绑失败')
      }
    })
    .catch(() => { /* user cancelled */ })
}

onMounted(() => { load(); loadCustomers() })
</script>

<template>
  <div class="rr-openapi-company">
    <PageHeader title="公司账号管理" :sub="`共 ${total} 个公司账号`">
      <el-button @click="onReset">重置</el-button>
    </PageHeader>

    <SearchBar
      v-model:filters="filters"
      :fields='[{
        key: "customerCode", label: "客户筛选", type: "select",
        placeholder: "选择客户筛选", clearable: true,
        options: customerOptions.map(o => ({ value: o.value, label: o.label }))
      }]'
      @search="onSearch"
      @reset="load"
    />

    <div class="rr-list-card">
      <DataTable
        :columns="[
          { prop: 'username', label: '用户名', width: 200, slot: 'username' },
          { prop: 'realName', label: '姓名', width: 120 },
          { prop: 'customerName', label: '客户名', minWidth: 160 },
          { prop: 'appName', label: '应用名称', minWidth: 180 },
          { prop: 'activitySummary', label: '动态摘要', width: 280 },
          { prop: 'status', label: '状态', width: 100, slot: 'status' },
          { prop: 'createDate', label: '创建时间', width: 170, slot: 'createDate' },
          { label: '操作', width: 140, slot: 'action' }
        ]"
        :data="list"        :borderless="true"
        :loading="loading"
        :total="total"
        :page="page"
        :limit="limit"
        :show-pagination="true"        :page-sizes="[10, 20, 50, 100]"
        :error="loadError"
        empty-text="暂无公司账号数据"
        row-key="id"
        @page-change="onPageChange"
        @limit-change="onLimitChange"
      >
        <template #username="{ row }">
          <code class="rr-username-code">{{ row.username }}</code>
        </template>

        <template #status="{ row }">
          <el-tag
            v-if="STATUS_MAP[row.status]"
            :type="STATUS_MAP[row.status].type as any"
            size="small"
            effect="light"
          >{{ STATUS_MAP[row.status].label }}</el-tag>
          <el-tag v-else type="info" size="small" effect="light">未知</el-tag>
        </template>

        <template #createDate="{ row }">
          <span class="rr-time">{{ fmtDate(row.createDate) }}</span>
        </template>

        <template #action="{ row }">
          <TableActions
            :row="row"
            :primary="[{ label: '查看动态', type: 'primary', onClick: activityHandle }]"
            :more="[
              { label: '接管', type: 'primary', onClick: takeoverHandle },
              { label: '解绑', type: 'danger', divided: true, onClick: unbindHandle }
            ]"
          />
        </template>
      </DataTable>
    </div>

    <!-- 接管弹窗 -->
    <el-dialog
      v-model="takeoverVisible"
      title="接管记录"
      width="640"
      class="rr-dialog-compact"
      align-center
      destroy-on-close
    >
      <el-form :model="takeoverForm" label-width="100px" label-position="right">
        <el-form-item label="原发布人">
          <span class="rr-takeover-source">
            <code>{{ takeoverForm.fromUsername }}</code>
            <el-tag size="small" effect="plain" class="rr-takeover-tag">AI</el-tag>
          </span>
        </el-form-item>

        <el-form-item label="记录类型" required>
          <el-select
            v-model="takeoverForm.recordType"
            placeholder="请选择记录类型"
            style="width: 100%"
            size="default"
          >
            <el-option
              v-for="opt in RECORD_TYPES"
              :key="opt.value"
              :label="opt.label"
              :value="opt.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="记录 ID" required>
          <el-input
            v-model="takeoverForm.recordId"
            placeholder="请输入要接管的记录 ID"
            size="default"
          />
        </el-form-item>

        <el-form-item label="新发布人" required>
          <el-select
            v-model="takeoverForm.toUserId"
            placeholder="请选择新发布人"
            filterable
            style="width: 100%"
            size="default"
            :loading="takeoverLoading"
            loading-text="员工加载中..."
          >
            <el-option
              v-for="u in employeeOptions"
              :key="u.id"
              :label="`${u.realName} (${u.id})`"
              :value="u.id"
            />
          </el-select>
          <div class="rr-field-tip">仅显示该客户的非 AI 员工</div>
        </el-form-item>

        <el-form-item label="接管原因">
          <el-input
            v-model="takeoverForm.reason"
            type="textarea"
            :rows="2"
            placeholder="可选:说明接管原因,便于后续审计"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="rr-dialog-footer">
          <el-button @click="takeoverVisible = false">取消</el-button>
          <el-button type="primary" @click="takeoverConfirm">确认接管</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.rr-openapi-company {
  padding: 16px;
}

/* PageHeader 接管 */

/* PageHeader 接管 */

/* PageHeader 接管 */

/* PageHeader 接管 */

/* PageHeader 接管 */

/* SearchBar 接管 */

/* SearchBar 接管 */

.rr-list-card {
  background: var(--el-bg-color);
  border-radius: 12px;
  padding: 4px;
}

.rr-username-code {
  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  padding: 2px 6px;
  background: var(--el-fill-color-light);
  border-radius: 4px;
  color: var(--el-color-primary);
}

.rr-time {
  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  color: var(--el-text-color-regular);
}

.rr-takeover-source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rr-takeover-source code {
  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  color: var(--el-color-primary);
}

.rr-takeover-tag {
  font-size: 11px;
}

.rr-field-tip {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  margin-top: 4px;
  line-height: 1.4;
}

.rr-dialog-compact :deep(.el-dialog__header) {
  padding: 14px 20px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.rr-dialog-compact :deep(.el-dialog__body) {
  padding: 16px 20px;
}

.rr-dialog-compact :deep(.el-dialog__footer) {
  padding: 12px 20px;
  border-top: 1px solid var(--el-border-color-lighter);
}

.rr-dialog-compact :deep(.el-dialog) {
  border-radius: 12px;
  overflow: hidden;
}

.rr-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
</style>