4b77d67dc2
- 33 个 ListView.vue 加 :borderless=true + :page-sizes=[10,20,50,100]
覆盖: order/inquiry/finance/operateguide/sys/Dept|Menu|File|Notice|
Params|User|Role|Post|DictType|DictData|Product|Schedule|RoleGroup
user/Enterprise|enterpriselevel|enterprisescore|enterpriserating
supplier/promoter|couponscope|historylog|logistics|ordercomment|Activity
other/goodunit|label|textconfig
api/feedback|help|lunbo
openapi/AuditLog|CompanyAccount
- OrderListView: columns 抽到 script setup (computed) + :borderless +
:page-sizes + sub 动态显示选中数
- router/index.ts: /product/shop → redirect /supplier/good
(删 src/modules/product/shop/ShopListView.vue 旧占位, 后端 404 无意义)
- 沿用 W17 设计规范 v2 (PageHeader+SearchBar+DataTable+ListTabs)
125 lines
3.6 KiB
Vue
125 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* F006 商品单位 - W10 A4 标准化
|
|
*
|
|
* W10 A4: 套 PageHeader/SearchBar 标准化模板 (前端筛选转 SearchBar)
|
|
* 走 /other/goodunit/list 真 API (返 data: [...] 数组, 共 112 行)
|
|
* 字段: id/name/type/supplierId/enterpriseId/createTime
|
|
*/
|
|
import { onMounted, ref, computed, reactive } from 'vue'
|
|
import { httpGet } from '@/utils/request'
|
|
import DataTable from '@/components/DataTable/DataTable.vue'
|
|
import PageHeader from '@/components/PageHeader/PageHeader.vue'
|
|
import SearchBar from '@/components/SearchBar/SearchBar.vue'
|
|
|
|
interface GoodUnit {
|
|
id: string
|
|
name: string
|
|
type: number | null
|
|
supplierId: string | null
|
|
enterpriseId: string | null
|
|
createTime: string
|
|
raw: any
|
|
}
|
|
|
|
const list = ref<GoodUnit[]>([])
|
|
const loading = ref(false)
|
|
const error = ref<string | null>(null)
|
|
const filterKw = ref('')
|
|
const filters = reactive({ kw: filterKw })
|
|
|
|
const TYPE_MAP: Record<number, string> = {
|
|
1: '系统',
|
|
2: '自定义'
|
|
}
|
|
|
|
async function load() {
|
|
loading.value = true
|
|
error.value = null
|
|
try {
|
|
const data: any = await httpGet<GoodUnit[]>('/other/goodunit/list')
|
|
list.value = (Array.isArray(data) ? data : []).map((it: any) => ({
|
|
id: String(it.id),
|
|
name: it.name || '--',
|
|
type: it.type ?? null,
|
|
supplierId: it.supplierId,
|
|
enterpriseId: it.enterpriseId,
|
|
createTime: it.createTime || '--',
|
|
raw: it
|
|
}))
|
|
} catch (e: any) {
|
|
error.value = e?.msg || e?.message || '加载失败'
|
|
list.value = []
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const filtered = computed(() => {
|
|
const kw = (filters.kw || "").trim().toLowerCase()
|
|
if (!kw) return list.value
|
|
return list.value.filter(it => it.name.toLowerCase().includes(kw))
|
|
})
|
|
|
|
function fmtTime(s?: string | null) {
|
|
if (!s) return '--'
|
|
return s
|
|
}
|
|
|
|
onMounted(load)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="rr-page">
|
|
<PageHeader title="商品单位" :sub="`商品计量单位管理 (共 ${list.length} 个, 筛选后 ${filtered.length} 个)`" />
|
|
|
|
<SearchBar
|
|
v-model:filters="filters"
|
|
:fields="[
|
|
{ key: 'kw', label: '名称', type: 'text', placeholder: '按名称筛选' }
|
|
]"
|
|
:show-reset="false"
|
|
@search="() => {}"
|
|
@reset="() => { filterKw = '' }"
|
|
/>
|
|
|
|
<div class="rr-card">
|
|
<DataTable
|
|
:columns="[
|
|
{ prop: 'id', label: 'ID', width: 80 },
|
|
{ prop: 'name', label: '单位名称', minWidth: 200 },
|
|
{ prop: 'type', label: '类型', width: 100, slot: 'type' },
|
|
{ prop: 'supplierId', label: '供应商ID', width: 120 },
|
|
{ prop: 'enterpriseId', label: '企业ID', width: 120 },
|
|
{ prop: 'createTime', label: '创建时间', width: 180, slot: 'createTime' }
|
|
]"
|
|
:data="filtered"
|
|
:loading="loading"
|
|
:total="filtered.length"
|
|
:page="1"
|
|
:limit="filtered.length || 1"
|
|
:show-pagination="list.length > 20" :page-sizes="[10, 20, 50, 100]"
|
|
:error="error"
|
|
empty-text="暂无单位"
|
|
borderless
|
|
row-key="id"
|
|
>
|
|
<template #type="{ row }">
|
|
<el-tag v-if="row.type !== null" :type="row.type === 1 ? 'primary' : 'info'" size="small" effect="light">
|
|
{{ TYPE_MAP[row.type] || `类型${row.type}` }}
|
|
</el-tag>
|
|
<span v-else>--</span>
|
|
</template>
|
|
<template #createTime="{ row }">
|
|
<span class="rr-time">{{ fmtTime(row.createTime) }}</span>
|
|
</template>
|
|
</DataTable>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.rr-page { max-width: 1400px; }
|
|
.rr-time { font-family: 'SF Mono', Menlo, monospace; font-size: 12px; color: var(--ink-2); }
|
|
</style>
|