starpivot/apps/admin/app/pages/dealers.vue

<template>
  <div>
    <!-- 列表视图 -->
    <div v-show="view === 'list'">
      <div class="flex items-center justify-between mb-5">
        <h2 class="text-lg font-semibold text-slate-800">渠道商列表</h2>
        <button v-if="!auth.isDealer" class="btn btn-primary btn-sm text-white" @click="showForm()">+ 新增渠道商</button>
      </div>

      <!-- 筛选 -->
      <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-4 mb-4">
        <div class="flex flex-wrap items-end gap-3">
          <div class="form-control">
            <label class="label py-1"><span class="label-text text-xs text-slate-500">状态</span></label>
            <select v-model.number="filters.status" class="select select-bordered select-sm w-36" @change="loadData">
              <option :value="-1">全部状态</option>
              <option :value="0">待审核</option>
              <option :value="1">启用</option>
              <option :value="2">停用</option>
              <option :value="3">驳回</option>
            </select>
          </div>
          <div class="form-control">
            <label class="label py-1"><span class="label-text text-xs text-slate-500">搜索</span></label>
            <input
              v-model="filters.keyword" type="text" class="input input-bordered input-sm w-52"
              placeholder="名称 / 渠道商ID" @keydown.enter="loadData" />
          </div>
          <button class="btn btn-sm btn-primary text-white" @click="loadData">查询</button>
          <button class="btn btn-sm btn-ghost" @click="resetFilters">重置</button>
        </div>
      </div>

      <div class="bg-white rounded-xl shadow-sm border border-slate-100">
        <div class="overflow-x-auto">
          <table class="table table-zebra">
            <thead>
              <tr>
                <th>渠道商ID</th><th>名称</th><th>生产批次</th>
                <th>联系方式</th><th>状态</th><th>创建时间</th><th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-if="loading">
                <td colspan="7" class="text-center py-8"><span class="loading loading-spinner loading-sm"></span></td>
              </tr>
              <tr v-else-if="!rows.length">
                <td colspan="7" class="text-center text-slate-400 py-8">暂无数据</td>
              </tr>
              <tr v-for="ch in rows" :key="ch.id">
                <td class="font-mono text-sm font-semibold">{{ ch.id }}</td>
                <td class="font-medium">
                  {{ ch.name }}
                  <span v-if="ch.official" class="badge badge-sm badge-primary badge-outline ml-1">官方</span>
                </td>
                <!-- 生产批次：从生产批次台账按 channelid 汇总，只读。批次归属在「MAC生成管理」里生产时定 -->
                <td class="text-sm">
                  <button
                    v-if="batchStat(ch.id).batches"
                    class="btn btn-ghost btn-xs text-indigo-600 font-normal"
                    @click="showBatches(ch)">
                    {{ batchStat(ch.id).batches }} 批 / {{ batchStat(ch.id).macs }} 个
                  </button>
                  <span v-else class="text-slate-300">-</span>
                </td>
                <td class="text-sm text-slate-500">
                  <div v-if="ch.contact">{{ ch.contact }}</div>
                  <div v-if="ch.contactmails" class="text-xs text-slate-400">{{ ch.contactmails }}</div>
                  <span v-if="!ch.contact && !ch.contactmails" class="text-slate-300">-</span>
                </td>
                <td>
                  <span class="badge badge-sm" :class="statusClass(ch.status)">{{ statusLabel(ch.status) }}</span>
                  <div v-if="ch.status === 3 && ch.auditremark" class="text-xs text-slate-400 mt-1">{{ ch.auditremark }}</div>
                </td>
                <td class="text-sm text-slate-500">{{ fmtTime(ch.createtime) }}</td>
                <td>
                  <div class="flex flex-wrap gap-1">
                    <button class="btn btn-ghost btn-xs" @click="showForm(ch)">编辑</button>
                    <template v-if="canAudit">
                      <button
                        v-if="ch.status !== 1" class="btn btn-ghost btn-xs text-emerald-600"
                        @click="audit(ch, 1)">{{ ch.status === 0 ? '通过' : '启用' }}</button>
                      <button v-if="ch.status === 1" class="btn btn-ghost btn-xs text-amber-600" @click="audit(ch, 2)">停用</button>
                      <button v-if="ch.status === 0" class="btn btn-ghost btn-xs text-red-500" @click="audit(ch, 3)">驳回</button>
                    </template>
                    <!-- 官方渠道随品牌商而生，不单独删 -->
                    <button v-if="!auth.isDealer && !ch.official" class="btn btn-ghost btn-xs text-red-500" @click="delChannel(ch)">删除</button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <p class="text-xs text-slate-400 mt-3">
        渠道商新增后需超管/管理员审核通过（状态=启用）才能用于生成 MAC；已有生产批次的渠道商不能删除，只能停用。
        标「官方」的是品牌自营渠道，随品牌商自动创建、直接启用、不可删除。
        <br />
        渠道商是<b>全局</b>实体，不归属某个品牌商；<b>产品归属与分成比例都在【MAC生成管理 → 生成MAC】里按批次定</b>——
        同一家渠道商不同批次的比例可以不同。「生产批次」列是从生产台账按渠道商汇总出来的<b>只读</b>数据。
      </p>
    </div>

    <!-- 表单视图 -->
    <div v-show="view === 'form'">
      <div class="flex items-center gap-3 mb-5">
        <button class="btn btn-ghost btn-sm" @click="showList()">&larr; 返回列表</button>
        <h2 class="text-lg font-semibold text-slate-800">{{ isEditing ? '编辑渠道商' : '新增渠道商' }}</h2>
      </div>
      <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-6 max-w-2xl">
        <form @submit.prevent="saveChannel">
          <div v-if="isEditing" class="form-control mb-4">
            <label class="label"><span class="label-text font-medium">渠道商ID</span></label>
            <input :value="form.id" type="text" class="input input-bordered w-full font-mono" disabled />
            <span class="label-text-alt text-slate-400 mt-1">短码由系统生成，创建后不可修改</span>
          </div>
          <div class="form-control mb-4">
            <label class="label"><span class="label-text font-medium">渠道商名称 *</span></label>
            <input v-model="form.name" type="text" class="input input-bordered w-full" required />
          </div>
          <div class="form-control mb-4">
            <label class="label"><span class="label-text font-medium">联系人 / 电话</span></label>
            <input v-model="form.contact" type="text" class="input input-bordered w-full" />
          </div>
          <div class="form-control mb-4">
            <label class="label"><span class="label-text font-medium">联系邮箱</span></label>
            <input v-model="form.contactmails" type="text" class="input input-bordered w-full" placeholder="多个邮箱用逗号分隔" />
          </div>
          <div class="form-control mb-6">
            <label class="label"><span class="label-text font-medium">备注</span></label>
            <textarea v-model="form.remark" class="textarea textarea-bordered w-full" rows="3"></textarea>
          </div>

          <!-- 同时创建渠道账号（超管/管理员；新增时可用） -->
          <div v-if="!isEditing && canAudit" class="form-control mb-6 border-t border-slate-100 pt-4">
            <label class="flex items-center gap-2 cursor-pointer">
              <input v-model="form.createAccount" type="checkbox" class="checkbox checkbox-sm checkbox-primary" />
              <span class="label-text font-medium">同时创建渠道账号</span>
            </label>
            <span class="label-text-alt text-slate-400 mt-1">
              建一个绑定本渠道商的「渠道商」角色登录账号，只能看到自己渠道的数据与结算单。
              用户名/密码留空则自动生成，创建后凭据会邮件发给上面填的联系邮箱。
            </span>
            <div v-if="form.createAccount" class="grid grid-cols-2 gap-3 mt-3">
              <div>
                <label class="text-xs text-slate-500">登录用户名</label>
                <input
                  v-model="form.accountUsername" type="text" class="input input-bordered input-sm w-full"
                  placeholder="留空自动生成，如 Channel-K7QM3ZTX" autocomplete="off" />
              </div>
              <div>
                <label class="text-xs text-slate-500">登录密码</label>
                <input
                  v-model="form.accountPassword" type="text" class="input input-bordered input-sm w-full font-mono"
                  placeholder="留空自动生成 12 位随机密码" autocomplete="off" />
              </div>
              <div class="col-span-2">
                <label class="text-xs text-slate-500">备注</label>
                <input v-model="form.accountRemark" type="text" class="input input-bordered input-sm w-full" placeholder="可选" />
              </div>
              <p v-if="!form.contactmails.trim()" class="col-span-2 text-xs text-amber-600">
                没填联系邮箱，凭据将无法邮件送达，只会在创建后弹窗显示一次。
              </p>
            </div>
          </div>

          <div class="flex gap-3">
            <button type="button" class="btn btn-ghost" @click="showList()">取消</button>
            <button type="submit" class="btn btn-primary text-white" :disabled="submitting">保存</button>
          </div>
          <p v-if="!isEditing && !canAudit" class="text-xs text-amber-600 mt-3">
            提交后为「待审核」状态，须超管/管理员通过后才能用于生产。
          </p>
        </form>
      </div>
    </div>

    <!-- 关联的 MAC 生产批次（只读）：归属在生产时定下，这里只做汇总与追溯 -->
    <dialog ref="batchDlg" class="modal">
      <div class="modal-box max-w-3xl">
        <h3 class="font-bold text-lg mb-1">{{ batchCtx?.name }} 的生产批次</h3>
        <p class="text-xs text-slate-400 mb-4">
          批次归属在【MAC生成管理 → 生成MAC】里生产时定下，此处只读。共
          {{ batchCtx ? batchStat(batchCtx.id).batches : 0 }} 批 /
          {{ batchCtx ? batchStat(batchCtx.id).macs : 0 }} 个 MAC。
        </p>
        <div class="overflow-x-auto max-h-96">
          <table class="table table-sm table-zebra">
            <thead><tr><th>批次号</th><th>产品</th><th>数量</th><th>MAC区间</th><th>生产时间</th></tr></thead>
            <tbody>
              <tr v-for="b in ctxBatches" :key="b.batchno">
                <td class="font-mono">{{ b.batchno }}</td>
                <td>{{ productName(b.productid) }}</td>
                <td>{{ b.devicenum }}</td>
                <td class="font-mono text-xs text-slate-500">
                  <span v-if="b.startmac">{{ b.startmac }} ~ {{ b.endmac }}</span>
                  <span v-else class="text-slate-300">-</span>
                </td>
                <td class="text-slate-500">{{ fmtTime(b.ts) }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="modal-action">
          <button class="btn btn-sm" @click="batchDlg?.close()">关闭</button>
        </div>
      </div>
      <form method="dialog" class="modal-backdrop"><button>close</button></form>
    </dialog>

    <!-- 新开渠道账号的凭据回执 -->
    <AccountCredentialDialog :info="cred" @close="cred = null" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useApi } from '~/composables/useApi'
import { useToast } from '~/composables/useToast'
import { useAuthStore } from '~/stores/auth'
import type { AccountCredential } from '~/components/AccountCredentialDialog.vue'

definePageMeta({ title: '渠道商管理' })

interface Channel {
  id: string
  // 后端仍下发这两个字段，但后台已不维护它们，界面上也不显示：
  //   brandid   0=全局渠道商；非 0 只出现在随品牌商自动创建的「官方渠道」上
  //   sharerate [遗留]渠道商级分成比例；比例已改为按生产批次设置
  brandid: number
  sharerate: number
  name: string
  contact: string
  contactmails: string
  remark: string
  status: number // 0待审核 1启用 2停用 3驳回
  applyaccount: string
  auditaccount: string
  auditremark: string
  audittime: number
  createtime: number
  updatetime: number
  official: boolean // 品牌官方渠道：随品牌商自动创建，不可删除
}
interface Product { id: number; devicename: string }
// 生产批次：渠道商的「关联批次」由它按 channelid 汇总而来，不在渠道商表里另存一份
interface Batch {
  batchno: string
  channelid: string
  productid: number
  devicenum: number
  startmac: string
  endmac: string
  ts: number
}
// addchannel 的返回：渠道商本体 + （可选）渠道账号凭据
interface AddChannelResp {
  account?: string
  account_password?: string
  mail_to?: string
  mail_error?: string
}

const { webApi } = useApi()
const { success, error } = useToast()
const auth = useAuthStore()

// 审批（顺手开渠道账号）仅超管/管理员。
const canAudit = computed(() => auth.isAdmin)

// 新开账号的凭据回执（密码只有这一次能看到）
const cred = ref<AccountCredential | null>(null)

const view = ref<'list' | 'form'>('list')
const rows = ref<Channel[]>([])
const products = ref<Product[]>([])
const batches = ref<Batch[]>([])
const batchDlg = ref<HTMLDialogElement | null>(null)
const batchCtx = ref<Channel | null>(null)
const loading = ref(false)
const submitting = ref(false)
const isEditing = ref(false)

// status 用 -1 表示「全部」：0 是合法取值（待审核），不能拿零值当全部。
const filters = reactive({ status: -1, keyword: '' })
// 表单里的比例用百分比（更直观），提交时换算成后端的万分比整数。
const form = reactive({
  id: '', name: '', contact: '', contactmails: '', remark: '',

  // 仅新增时用：顺手开一个绑定本渠道商的渠道账号
  createAccount: false,
  accountUsername: '',
  accountPassword: '',
  accountRemark: '',
})

const STATUS_LABELS: Record<number, string> = { 0: '待审核', 1: '启用', 2: '停用', 3: '驳回' }
const STATUS_CLASS: Record<number, string> = {
  0: 'badge-warning', 1: 'badge-success', 2: 'badge-ghost', 3: 'badge-error',
}
function statusLabel(s: number) { return STATUS_LABELS[s] ?? String(s) }
function statusClass(s: number) { return STATUS_CLASS[s] ?? 'badge-ghost' }
function productName(id?: number) {
  const p = products.value.find((x) => x.id === Number(id))
  return p?.devicename || (id ? '产品#' + hex4(Number(id)) : '-')
}
// 产品 id 与后台其它页面一致，按十六进制大写展示（PID）
function hex4(v?: number | null) {
  return v ? Number(v).toString(16).padStart(4, '0').toUpperCase() : ''
}
// 某渠道商的批次汇总：批次数 + MAC 总数。数据源是生产批次台账，渠道商表里不另存。
function batchStat(channelid: string) {
  let b = 0
  let m = 0
  for (const x of batches.value) {
    if (x.channelid !== channelid) continue
    b += 1
    m += Number(x.devicenum) || 0
  }
  return { batches: b, macs: m }
}
const ctxBatches = computed(() =>
  batchCtx.value ? batches.value.filter((b) => b.channelid === batchCtx.value!.id) : [],
)
function showBatches(ch: Channel) {
  batchCtx.value = ch
  batchDlg.value?.showModal()
}

function fmtTime(ts?: number) {
  if (!ts) return '-'
  const d = new Date(ts * 1000)
  const p = (n: number) => ('0' + n).slice(-2)
  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
}

// 产品不按品牌商过滤：产品建档阶段已不再要求填品牌商（brandid 可为 0），
// 按品牌过滤会让新建的产品在这里一个都选不到。
async function loadProducts() {
  try {
    const d = await webApi<{ products: Product[] }>('getproducts', {})
    products.value = d?.products ?? []
  } catch {
    products.value = []
  }
}

// 一次拉全部批次再在前端按 channelid 分组，省掉「每个渠道商一次请求」。
// 拉不到只影响「生产批次」列显示为 -，不挡主流程。
async function loadBatches() {
  try {
    const d = await webApi<{ notes: Batch[] }>('getproductionbatches', { limit: 2000 })
    batches.value = d?.notes ?? []
  } catch {
    batches.value = []
  }
}

async function loadData() {
  loading.value = true
  try {
    if (!products.value.length) await loadProducts()
    const d = await webApi<{ channels: Channel[] }>('getchannels', {
      status: Number(filters.status),
      keyword: filters.keyword.trim(),
    })
    rows.value = d?.channels ?? []
  } catch (e: any) {
    error(e?.message ?? '获取渠道商列表失败')
    rows.value = []
  } finally {
    loading.value = false
  }
  await loadBatches()
}

function resetFilters() {
  filters.status = -1
  filters.keyword = ''
  loadData()
}

function showList() {
  view.value = 'list'
  loadData()
}

function showForm(ch?: Channel) {
  if (ch) {
    isEditing.value = true
    form.id = ch.id
    form.name = ch.name || ''
    form.contact = ch.contact || ''
    form.contactmails = ch.contactmails || ''
    form.remark = ch.remark || ''
  } else {
    isEditing.value = false
    form.id = ''
    form.name = ''
    form.contact = ''
    form.contactmails = ''
    form.remark = ''
  }
  form.createAccount = false
  form.accountUsername = ''
  form.accountPassword = ''
  form.accountRemark = ''
  view.value = 'form'
}

async function saveChannel() {
  if (!form.name.trim()) { error('请填写渠道商名称'); return }
  submitting.value = true
  try {
    const channel: Record<string, unknown> = {
      // 品牌商归属与分成比例都不再由渠道商表单提交：
      // 前者已取消（渠道商是全局实体），后者按生产批次设置（见 MAC生成管理 → 生成MAC）。
      name: form.name.trim(),
      contact: form.contact,
      contactmails: form.contactmails,
      remark: form.remark,
    }
    if (isEditing.value) channel.id = form.id
    const payload: Record<string, unknown> = { channel }
    if (!isEditing.value && form.createAccount) {
      payload.create_account = true
      payload.account_username = form.accountUsername.trim()
      payload.account_password = form.accountPassword
      payload.account_remark = form.accountRemark.trim()
    }
    const d = await webApi<AddChannelResp>(isEditing.value ? 'updatechannel' : 'addchannel', payload)
    if (isEditing.value) {
      success('保存成功')
    } else {
      success(canAudit.value ? '新增成功' : '已提交，等待审核')
      if (d?.account) {
        cred.value = {
          title: `渠道账号「${d.account}」已创建`,
          username: d.account,
          password: d.account_password ?? '',
          mailTo: d.mail_to ?? '',
          mailError: d.mail_error ?? '',
        }
      }
    }
    showList()
  } catch (e: any) {
    error(e?.message ?? '保存失败')
  } finally {
    submitting.value = false
  }
}

async function audit(ch: Channel, status: number) {
  const actions: Record<number, string> = { 1: ch.status === 0 ? '通过' : '启用', 2: '停用', 3: '驳回' }
  let auditremark = ''
  if (status === 3) {
    const input = window.prompt(`驳回渠道商 "${ch.name}" 的原因：`, '')
    if (input === null) return
    auditremark = input
  } else if (!window.confirm(`确定${actions[status]}渠道商 "${ch.name}" 吗？`)) {
    return
  }
  try {
    await webApi('auditchannel', { id: ch.id, status, auditremark })
    success(actions[status] + '成功')
    loadData()
  } catch (e: any) {
    error(e?.message ?? '操作失败')
  }
}

function delChannel(ch: Channel) {
  if (!window.confirm(`确定删除渠道商 "${ch.name}" 吗？已有生产批次的渠道商不能删除。`)) return
  webApi('delchannel', { id: ch.id })
    .then(() => { success('删除成功'); loadData() })
    .catch((e: any) => error(e?.message ?? '删除失败'))
}

onMounted(loadData)
</script>