warehouse-web/src/views/Master.vue

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { api } from '../api'
import type { Master, MasterKind } from '../api/indexType'
import type { WmsBasicDataSaveRequest } from '../api/indexType'
import { fieldErrors, relativeDay, report, refreshAfterWrite } from '../utils/ui'

const dataTypes = { category: 1, sport: 2, brand: 3 } satisfies Record<MasterKind, NonNullable<WmsBasicDataSaveRequest['dataType']>>
const masters = ref<Master[]>([])
const pendingLoads = ref<Record<MasterKind, number>>({ category: 0, sport: 0, brand: 0 })
const pages = ref<Record<MasterKind, number>>({ category: 1, sport: 1, brand: 1 })
const totals = ref<Record<MasterKind, number>>({ category: 0, sport: 0, brand: 0 })
const pageSize = 10
const listLoadVersions: Record<MasterKind, number> = { category: 0, sport: 0, brand: 0 }
async function loadData(masterKind: MasterKind = kind.value) {
  const version = ++listLoadVersions[masterKind]
  pendingLoads.value[masterKind] = 1
  try {
    while (true) {
      const response = await api.wmsApi.basicData.list({ dataType: dataTypes[masterKind], pageNo: pages.value[masterKind], pageSize })
      if (version !== listLoadVersions[masterKind]) return
      const records = response.rows
      totals.value[masterKind] = response.total
      const lastPage = Math.max(1, Math.ceil(response.total / pageSize))
      if (!records.length && pages.value[masterKind] > lastPage) {
        pages.value[masterKind] = lastPage
        continue
      }
      const loadedMasters = records.map(item => {
        return { id: String(item.id ?? ''), kind: masterKind, name: item.dataName || '', enabled: item.status === 1, order: item.sortOrder ?? 99, operator: item.updateUser || item.createUser || '', card: masterKind === 'category' && item.dataName === '球星卡', skuCount: item.skuCount ?? 0, updatedAt: item.updateTime || item.createTime || '' }
      })
      masters.value = [...masters.value.filter(item => item.kind !== masterKind), ...loadedMasters]
      return
    }
  }
  catch (error) { if (version === listLoadVersions[masterKind]) throw error }
  finally { if (version === listLoadVersions[masterKind]) pendingLoads.value[masterKind] = 0 }
}
const router = useRouter()
const kind = ref<MasterKind>('category')
const titles = { category: '产品种类', sport: '产品运动类型', brand: '产品品牌' }
const dialog = ref(false)
const busy = ref(false)
const errors = ref<Record<string, string>>({})
const master = ref<Master>(emptyMaster())
const formRef = ref<FormInstance>()
const rules: FormRules<Master> = {
  name: [{ required: true, whitespace: true, message: '请填写名称', trigger: 'blur' }],
  enabled: [{ required: true, type: 'boolean', message: '请选择状态', trigger: 'change' }],
}
const rows = computed(() => masters.value.filter((item: Master) => item.kind === kind.value).sort((first, second) => first.order - second.order))
onMounted(() => loadData().catch(report))
watch(kind, masterKind => {
  pages.value[masterKind] = 1
  loadData(masterKind).catch(report)
})
function emptyMaster(): Master {
  return { id: '', kind: kind.value, name: '', enabled: true, order: 99, operator: '' }
}
function viewLinkedSkus(item: Master) {
  router.push({ path: '/sku', query: { kind: item.kind, id: item.id } })
}
function open(item?: Master) {
  errors.value = {}
  master.value = item ? { ...item } : emptyMaster()
  dialog.value = true
}
async function save() {
  if (busy.value) return
  busy.value = true
  errors.value = {}
  try {
    const valid = await formRef.value?.validate().catch(() => false)
    if (!valid) return
    const savedKind = master.value.kind
    const payload: WmsBasicDataSaveRequest = { dataName: master.value.name.trim(), dataType: dataTypes[savedKind], status: master.value.enabled ? 1 : 0, sortOrder: master.value.order }
    if (master.value.id) payload.id = Number(master.value.id)
    await api.wmsApi.basicData.save(payload)
    dialog.value = false
    ElMessage.success('保存成功')
    await refreshAfterWrite(() => loadData(savedKind))
  } catch (error) {
    await fieldErrors(error, errors)
  } finally {
    busy.value = false
  }
}
async function toggle(item: Master) {
  try {
    await ElMessageBox.confirm(`确认${item.enabled ? '停用' : '启用'} ${item.name}？`, '状态变更', { type: 'warning', confirmButtonText: '确认', cancelButtonText: '取消' })
    await api.wmsApi.basicData.updateStatus({ id: Number(item.id), status: item.enabled ? 0 : 1 })
    ElMessage.success('状态已更新')
    await refreshAfterWrite(() => loadData())
  } catch (error) {
    if (error !== 'cancel' && error !== 'close') report(error)
  }
}
async function remove(item: Master) {
  try {
    await ElMessageBox.confirm(`确认删除 ${item.name}？`, '删除基础资料', { type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消' })
    await api.wmsApi.basicData.delete({ id: Number(item.id) })
    ElMessage.success('删除成功')
    await refreshAfterWrite(() => loadData())
  } catch (error) {
    if (error !== 'cancel' && error !== 'close') report(error)
  }
}
</script>

<template>
  <div class="master-page">
    <div class="page-heading master-heading">
      <div><h1>基础资料管理</h1></div>
      <el-button type="primary" :icon="Plus" @click="open()">新增{{ titles[kind] }}</el-button>
    </div>
    <div class="master-notice">产品种类初始预置为「球星卡、周边、其他」。选择球星卡后，SKU 页面才显示并要求选择产品运动类型、产品品牌。</div>
    <el-tabs v-model="kind" class="master-tabs" aria-label="基础资料类型">
      <el-tab-pane v-for="(title, key) in titles" :key="key" :name="key" :label="title" />
    </el-tabs>
    <el-table v-loading="pendingLoads[kind] > 0" :data="rows" class="master-table" empty-text="暂无资料" row-key="id">
      <el-table-column label="名称" min-width="160">
        <template #default="{ row }"><span class="master-name">{{ row.name }}</span><span v-if="row.card" class="master-note">（球星卡联动）</span></template>
      </el-table-column>
      <el-table-column label="状态">
        <template #default="{ row }"><span class="master-status" :class="{ disabled: !row.enabled }"><i />{{ row.enabled ? '启用' : '停用' }}</span></template>
      </el-table-column>
      <el-table-column prop="order" label="排序" />
      <el-table-column label="已关联 SKU">
        <template #default="{ row }"><button v-if="row.skuCount" type="button" class="master-count master-count-link" :aria-label="`查看 ${row.name} 已关联的 ${row.skuCount} 个 SKU`" @click="viewLinkedSkus(row)">{{ row.skuCount }} 个</button><span v-else class="master-count master-count-empty">0 个</span></template>
      </el-table-column>
      <el-table-column label="最近操作人" min-width="120">
        <template #default="{ row }">
          <span v-if="row.operator">{{ row.operator }}<span v-if="relativeDay(row.updatedAt)"> · {{ relativeDay(row.updatedAt) }}</span></span>
          <span v-else>—</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="210" fixed="right">
        <template #default="{ row }">
          <el-button link type="primary" @click="open(row)">编辑</el-button>
          <el-button link :type="row.enabled ? 'info' : 'primary'" @click="toggle(row)">{{ row.enabled ? '停用' : '启用' }}</el-button>
          <el-button v-if="!row.skuCount" link type="danger" @click="remove(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="pages[kind]" :total="totals[kind]" :page-size="pageSize" layout="total, prev, pager, next" @current-change="loadData().catch(report)" />
    <el-dialog v-model="dialog" class="master-dialog" modal-class="master-overlay" width="480px" align-center :close-on-click-modal="false" :close-on-press-escape="!busy" :show-close="!busy" @closed="formRef?.clearValidate()">
      <template #header="{ titleId, titleClass }">
        <h2 :id="titleId" :class="titleClass">{{ master.id ? '编辑' : '新增' }}{{ titles[master.kind] }}</h2>
        <p class="master-dialog-subtitle">保存后可在 SKU 下拉选项中使用。</p>
      </template>
      <el-alert v-if="errors.form" :title="errors.form" type="error" :closable="false" show-icon />
      <el-form ref="formRef" :model="master" :rules="rules" label-position="top" :disabled="busy" @submit.prevent="save">
        <el-form-item label="名称" prop="name" required :error="errors.name"><el-input v-model="master.name" placeholder="填写名称" autofocus /></el-form-item>
        <div class="master-form-row">
          <el-form-item label="状态" prop="enabled" required :error="errors.enabled"><el-select v-model="master.enabled" aria-label="状态"><el-option :value="true" label="启用" /><el-option :value="false" label="停用" /></el-select></el-form-item>
          <el-form-item label="排序" :error="errors.order"><el-input-number v-model="master.order" :min="1" :precision="0" controls-position="right" aria-label="排序" /></el-form-item>
		  <!-- <el-form-item label="排序" :error="errors.order"><el-input-number v-model="master.order" :min="1" :precision="0" controls="true" aria-label="排序" /></el-form-item> -->
        </div>
      </el-form>
      <template #footer><el-button :disabled="busy" @click="dialog = false">取消</el-button><el-button type="primary" :loading="busy" @click="save">保存</el-button></template>
    </el-dialog>
  </div>
</template>

<style scoped>
.master-heading { margin-bottom: 22px; }
.master-heading h1 { font-size: 24px; letter-spacing: 0; }
.master-heading p { color: #7b8885; margin-top: 8px; font-size: 13px; }
.master-heading > .el-button { min-height: 38px; padding: 0 17px; border-radius: 7px; }
.master-notice { padding: 13px 16px; border-left: 3px solid #e4b949; background: #fff9e9; color: #806b31; font-size: 12px; line-height: 1.8; border-radius: 4px; margin-bottom: 22px; }
.master-tabs { width: fit-content; max-width: 100%; margin-bottom: 18px; }
.master-tabs :deep(.el-tabs__header) { margin: 0; }
.master-tabs :deep(.el-tabs__nav-wrap::after), .master-tabs :deep(.el-tabs__active-bar) { display: none; }
.master-tabs :deep(.el-tabs__nav) { background: #fff; border-radius: 8px; }
.master-tabs :deep(.el-tabs__item) { padding: 0 20px !important; height: 34px; color: #6b7875; font-size: 13px; }
.master-tabs :deep(.el-tabs__item.is-active) { background: #e8f3ec; color: #277452; border-radius: 5px; font-weight: 600; }
.master-table { --el-table-header-bg-color: #f3f6f4; --el-table-border-color: #edf1ef; --el-table-header-text-color: #77847f; --el-table-text-color: #46564f; border: 1px solid #e5ebe7; border-radius: 8px; box-shadow: 0 3px 12px #233b2d05; }
.master-table :deep(th.el-table__cell) { height: 45px; font-size: 12px; font-weight: 500; }
.master-table :deep(td.el-table__cell) { height: 59px; font-size: 13px; }
.master-table :deep(.cell) { padding-left: 20px; padding-right: 20px; }
.master-name { font-weight: 600; color: #30483c; }
.master-note { font-size: 11px; color: #96a09b; margin-left: 6px; }
.master-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; background: #eaf5ed; color: #3d8059; font-size: 11px; line-height: 18px; white-space: nowrap; }
.master-status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.master-status.disabled { background: #f0f2f1; color: #8b9590; }
.master-count { color: #44845e; }
.master-count-link { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: #277452; font-weight: 600; }
.master-count-link:hover { color: #1c5d3e; }
.master-count-link:focus-visible { outline: 2px solid #277452; outline-offset: 2px; border-radius: 3px; }
.master-count-empty { color: #aab2ae; }
.master-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.master-form-row .el-input-number { width: 100%; }
.master-dialog-subtitle { margin: 8px 0 0; color: #8d9792; font-size: 12px; }
@media (max-width: 600px) {
  .master-heading { align-items: flex-start; gap: 14px; flex-direction: column; }
  .master-heading h1 { font-size: 22px; }
  .master-tabs :deep(.el-tabs__item) { padding: 0 12px !important; font-size: 12px; }
}
</style>

<style>
.master-overlay { backdrop-filter: blur(3px); background: #18282066; }
.el-dialog.master-dialog { max-width: calc(100vw - 32px); padding: 0; border-radius: 16px; overflow: hidden; background: #fefefd; box-shadow: 0 24px 70px #10281b33; }
.master-dialog .el-dialog__header { padding: 23px 26px 21px; margin: 0; border-bottom: 1px solid #edf0ed; }
.master-dialog .el-dialog__title { margin: 0; font-size: 19px; font-weight: 600; line-height: 26px; color: #30443a; padding-right: 30px; }
.master-dialog .el-dialog__headerbtn { top: 22px; right: 22px; width: 28px; height: 28px; border-radius: 7px; background: #f1f4f1; }
.master-dialog .el-dialog__body { padding: 24px 26px 10px; }
.master-dialog .el-form-item { margin-bottom: 22px; }
.master-dialog .el-form-item__label { color: #526158; font-size: 12px; margin-bottom: 8px; }
.master-dialog .el-input__wrapper, .master-dialog .el-select__wrapper { min-height: 39px; border-radius: 7px; box-shadow: 0 0 0 1px #dfe6df inset; background: #fff; }
.master-dialog .el-input-number .el-input__inner { text-align: left; }
.master-dialog .el-input-number.is-controls-right .el-input__wrapper { padding-left: 12px; padding-right: 32px; }
.master-dialog .el-input-number.is-controls-right .el-input-number__increase,
.master-dialog .el-input-number.is-controls-right .el-input-number__decrease { right: 7px; width: 20px; height: 12px; line-height: 12px; border: 0; border-radius: 3px; background: transparent; color: #8d9792; }
.master-dialog .el-input-number.is-controls-right .el-input-number__increase { top: calc(50% - 12px); bottom: auto; }
.master-dialog .el-input-number.is-controls-right .el-input-number__decrease { top: 50%; bottom: auto; }
.master-dialog .el-input-number.is-controls-right .el-input-number__increase .el-icon,
.master-dialog .el-input-number.is-controls-right .el-input-number__decrease .el-icon { width: 10px; height: 10px; font-size: 10px; }
.master-dialog .el-input-number.is-controls-right .el-input-number__increase:hover,
.master-dialog .el-input-number.is-controls-right .el-input-number__decrease:hover { background: #edf5ef; color: #277452; }
.master-dialog .el-input-number.is-controls-right .is-disabled,
.master-dialog .el-input-number.is-controls-right .is-disabled:hover { background: transparent; color: #d0d7d2; }
.master-dialog .el-dialog__footer { padding: 16px 26px; border-top: 1px solid #edf0ed; }
.master-dialog .el-dialog__footer .el-button { min-width: 68px; height: 36px; border-radius: 7px; }
.master-dialog .el-alert { margin-bottom: 16px; }
</style>