feat(ms): 管理端材料库排序依据/分组 + 健康档标签
- Material 类型新增 ypt/health_tier 字段 - material.ts search() 查询参数补 group_by_tier - material-card 新增排序依据 Select（手动排序/综合 Ypt/五种污染物释放量）与按健康档分组 Switch， 健康档 Tag 列，分组时按档打分区标题 - 顶部排序依据 Select 为唯一排序权威来源：移除旧筛选区排序下拉对 searchParams 第三参数的驱动， 避免其静默覆盖新排序请求（对齐用户端 iapip-web 同一修复） - 经核查 ms 端不存在手动拖动/位置输入重排 sort_order 的既有功能，故无需像 web 端那样额外加 sortKey==='sort_order' && !groupByTier 门控 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01VCShKevM5prWZhp1kk1iGh
This commit is contained in:
parent
c7134f4332
commit
fb033ada28
|
|
@ -0,0 +1,298 @@
|
||||||
|
export type AnyObj = {
|
||||||
|
[key: string]: any
|
||||||
|
}
|
||||||
|
|
||||||
|
export type Arrayable<T> = T | T[]
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Server Types
|
||||||
|
*/
|
||||||
|
|
||||||
|
export type Admin = {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
password: string
|
||||||
|
username: string
|
||||||
|
status: number
|
||||||
|
type: ADMIN_TYPE
|
||||||
|
authz_hist_mgmt: number
|
||||||
|
authz_tmpl_mgmt: number
|
||||||
|
authz_mtrl_mgmt: number
|
||||||
|
authz_audit_mgmt: number
|
||||||
|
authz_acct_mgmt: number
|
||||||
|
authz_sys_cfg: number
|
||||||
|
creator_id: string
|
||||||
|
creator_name: string
|
||||||
|
created_at: string
|
||||||
|
updated_at: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum ADMIN_TYPE {
|
||||||
|
SUPER_ADMIN = 1,
|
||||||
|
ADMIN = 2
|
||||||
|
}
|
||||||
|
|
||||||
|
export type User = {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
password: string
|
||||||
|
username: string
|
||||||
|
status: number
|
||||||
|
creator_id: string
|
||||||
|
creator_name: string
|
||||||
|
created_at: string
|
||||||
|
updated_at: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export type AdminCert = {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
username: string
|
||||||
|
status: number
|
||||||
|
type: ADMIN_TYPE
|
||||||
|
authz_hist_mgmt: number
|
||||||
|
authz_tmpl_mgmt: number
|
||||||
|
authz_mtrl_mgmt: number
|
||||||
|
authz_audit_mgmt: number
|
||||||
|
authz_acct_mgmt: number
|
||||||
|
authz_sys_cfg: number
|
||||||
|
ip: string
|
||||||
|
login_at: Date
|
||||||
|
expire_at: Date
|
||||||
|
iat?: number
|
||||||
|
exp?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export type Creator = {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
username: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export type Project = {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
category?: string
|
||||||
|
province?: string
|
||||||
|
city?: string
|
||||||
|
climatic_zone?: string
|
||||||
|
constr_area?: number
|
||||||
|
usage_area?: number
|
||||||
|
spaces?: Space[]
|
||||||
|
status?: number
|
||||||
|
display?: number
|
||||||
|
predicted_at?: string
|
||||||
|
score?: number
|
||||||
|
grade?: number
|
||||||
|
collectors?: { user_id: string; project_id: string }[]
|
||||||
|
from?: FROM_TYPE
|
||||||
|
creator_id?: string
|
||||||
|
creator_name: string
|
||||||
|
creator?: Creator
|
||||||
|
related_user?: Creator
|
||||||
|
related_admin?: Creator
|
||||||
|
created_at: string
|
||||||
|
updated_at: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export type Space = {
|
||||||
|
id: string
|
||||||
|
project_id: string
|
||||||
|
name: string
|
||||||
|
category?: string
|
||||||
|
layout: number
|
||||||
|
height?: number
|
||||||
|
area?: number
|
||||||
|
volume?: number
|
||||||
|
env_temp?: number
|
||||||
|
env_hum?: number
|
||||||
|
env_vent_rate?: number
|
||||||
|
apc_lmt_std_id?: string
|
||||||
|
apc_lmt_std?: ApcLimitStandard
|
||||||
|
materials?: Material[]
|
||||||
|
methanal_c?: number
|
||||||
|
tvoc_c?: number
|
||||||
|
benzene_c?: number
|
||||||
|
toluene_c?: number
|
||||||
|
p_xylene_c?: number
|
||||||
|
methanal_c_exceed?: number
|
||||||
|
tvoc_c_exceed?: number
|
||||||
|
benzene_c_exceed?: number
|
||||||
|
toluene_c_exceed?: number
|
||||||
|
p_xylene_c_exceed?: number
|
||||||
|
creator_id: string
|
||||||
|
creator_name: string
|
||||||
|
created_at: string
|
||||||
|
updated_at: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export type Material = {
|
||||||
|
id?: number
|
||||||
|
material_id: string
|
||||||
|
project_id?: string
|
||||||
|
space_id?: string
|
||||||
|
name?: string
|
||||||
|
category?: string
|
||||||
|
brand?: string
|
||||||
|
factory?: string
|
||||||
|
spec?: string
|
||||||
|
eco_level?: ECO_LEVEL
|
||||||
|
unit?: MTRL_UNIT
|
||||||
|
qty?: number
|
||||||
|
display?: number
|
||||||
|
ypt?: number | null
|
||||||
|
health_tier?: 'A' | 'B' | 'C' | null
|
||||||
|
collectors?: { user_id: string; project_id: string }[]
|
||||||
|
methanal?: number
|
||||||
|
methanal_min_be?: number
|
||||||
|
methanal_be_area?: number
|
||||||
|
methanal_be_roc?: number
|
||||||
|
tvoc?: number
|
||||||
|
tvoc_min_be?: number
|
||||||
|
tvoc_be_area?: number
|
||||||
|
tvoc_be_roc?: number
|
||||||
|
benzene?: number
|
||||||
|
benzene_min_be?: number
|
||||||
|
benzene_be_area?: number
|
||||||
|
benzene_be_roc?: number
|
||||||
|
toluene?: number
|
||||||
|
toluene_min_be?: number
|
||||||
|
toluene_be_area?: number
|
||||||
|
toluene_be_roc?: number
|
||||||
|
p_xylene?: number
|
||||||
|
p_xylene_min_be?: number
|
||||||
|
p_xylene_be_area?: number
|
||||||
|
p_xylene_be_roc?: number
|
||||||
|
methanal_cr?: number
|
||||||
|
tvoc_cr?: number
|
||||||
|
benzene_cr?: number
|
||||||
|
toluene_cr?: number
|
||||||
|
p_xylene_cr?: number
|
||||||
|
methanal_cr_exceed?: number
|
||||||
|
tvoc_cr_exceed?: number
|
||||||
|
benzene_cr_exceed?: number
|
||||||
|
toluene_cr_exceed?: number
|
||||||
|
p_xylene_cr_exceed?: number
|
||||||
|
is_methanal_ps?: number
|
||||||
|
is_tvoc_ps?: number
|
||||||
|
is_benzene_ps?: number
|
||||||
|
is_toluene_ps?: number
|
||||||
|
is_p_xylene_ps?: number
|
||||||
|
from?: FROM_TYPE
|
||||||
|
user_id: string
|
||||||
|
user_name: string
|
||||||
|
creator_id?: string
|
||||||
|
creator_name: string
|
||||||
|
creator?: Creator
|
||||||
|
related_user?: Creator
|
||||||
|
related_admin?: Creator
|
||||||
|
created_at: string
|
||||||
|
updated_at: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export type AuditRequest = {
|
||||||
|
id: string
|
||||||
|
status: AUDIT_REQ_STATUS
|
||||||
|
source_id?: string
|
||||||
|
source_creator_id?: string
|
||||||
|
source: AUDIT_REQ_SRC
|
||||||
|
type: AUDIT_REQ_TYPE
|
||||||
|
desc?: string
|
||||||
|
remark?: string
|
||||||
|
details: AuditRequestDetails[]
|
||||||
|
auditor_id?: string
|
||||||
|
auditor_name?: string
|
||||||
|
auditor?: Creator
|
||||||
|
audited_at?: string
|
||||||
|
creator_id?: string
|
||||||
|
creator_name: string
|
||||||
|
creator?: Creator
|
||||||
|
created_at: string
|
||||||
|
updated_at: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export type AuditRequestDetails = {
|
||||||
|
id: number
|
||||||
|
audit_request_id: number
|
||||||
|
content: AnyObj
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum ECO_LEVEL {
|
||||||
|
E0 = 'E0',
|
||||||
|
E1 = 'E1',
|
||||||
|
E2 = 'E2'
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum MTRL_UNIT {
|
||||||
|
AREA = 'AREA',
|
||||||
|
LEN = 'LEN'
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum FROM_TYPE {
|
||||||
|
CREATE = 'CREATE',
|
||||||
|
IMPORT = 'IMPORT',
|
||||||
|
COLLECT = 'COLLECT'
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum AUDIT_REQ_SRC {
|
||||||
|
PUB_TEMP = 'PUB_TEMP',
|
||||||
|
SELF_TEMP = 'SELF_TEMP',
|
||||||
|
PUB_MTRL = 'PUB_MTRL',
|
||||||
|
SELF_MTRL = 'SELF_MTRL',
|
||||||
|
HIS_PROJ = 'HIS_PROJ'
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum AUDIT_REQ_TYPE {
|
||||||
|
CREATE = 'CREATE',
|
||||||
|
IMPORT = 'IMPORT',
|
||||||
|
UPDATE = 'UPDATE',
|
||||||
|
DELETE = 'DELETE',
|
||||||
|
COLLECT = 'COLLECT',
|
||||||
|
EXPORT = 'EXPORT'
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum AUDIT_REQ_STATUS {
|
||||||
|
REJECT = -1,
|
||||||
|
HOLD = 0,
|
||||||
|
PASS = 1
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ProjectSpaceCategory = {
|
||||||
|
pry_no_1: number
|
||||||
|
project_category: string
|
||||||
|
space_categories: {
|
||||||
|
pry_no_2: number
|
||||||
|
space_category: string
|
||||||
|
}[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export type MaterialCategory = {
|
||||||
|
pry_no_1: number
|
||||||
|
first_category: string
|
||||||
|
second_categories: {
|
||||||
|
pry_no_2: number
|
||||||
|
second_category: string
|
||||||
|
unit?: MTRL_UNIT
|
||||||
|
}[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export type CityInformation = {
|
||||||
|
pry_no_1: number
|
||||||
|
province: string
|
||||||
|
cities: {
|
||||||
|
pry_no_2: number
|
||||||
|
city: string
|
||||||
|
climatic_zone?: string
|
||||||
|
env_temp: number
|
||||||
|
env_hum: number
|
||||||
|
}[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ApcLimitStandard = {
|
||||||
|
id: string
|
||||||
|
methanal_c_lmt: number
|
||||||
|
tvoc_c_lmt: number
|
||||||
|
benzene_c_lmt: number
|
||||||
|
toluene_c_lmt: number
|
||||||
|
p_xylene_c_lmt: number
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,546 @@
|
||||||
|
import { DATA_TYPE } from '@/common/constants'
|
||||||
|
import { AnyObj, ECO_LEVEL, Material } from '@/common/types'
|
||||||
|
import { searchParams } from '@/common/utils'
|
||||||
|
import api from '@/services/api'
|
||||||
|
import {
|
||||||
|
ActionType,
|
||||||
|
LightFilter,
|
||||||
|
ProFormCascader,
|
||||||
|
ProFormSelect,
|
||||||
|
ProFormText,
|
||||||
|
ProTable
|
||||||
|
} from '@ant-design/pro-components'
|
||||||
|
import { Badge, Button, Form, Modal, Select, Switch, Tag } from 'antd'
|
||||||
|
import { useRef, useState } from 'react'
|
||||||
|
import OperateMaterial from '../apply-request-modal/operate-material'
|
||||||
|
import ImportMaterialsModal from '../import-file-modal/materials'
|
||||||
|
import MaterialModalForm from '../material-modal-form'
|
||||||
|
import PageCard from '../page-card'
|
||||||
|
|
||||||
|
const MaterialCard: React.FC<{
|
||||||
|
title?: string
|
||||||
|
modal?: boolean
|
||||||
|
modalProps?: {
|
||||||
|
open?: boolean
|
||||||
|
onCancel?: () => void
|
||||||
|
}
|
||||||
|
defaultSelected?: Material[]
|
||||||
|
onAdd?: (addedMtrls?: Material[]) => void
|
||||||
|
}> = ({ title, modal, modalProps, defaultSelected, onAdd }) => {
|
||||||
|
const [tab, setTab] = useState(DATA_TYPE.PUBLIC)
|
||||||
|
const tableRef = useRef<ActionType>()
|
||||||
|
const [filterForm] = Form.useForm()
|
||||||
|
const [filterConditions, setFilterConditions] = useState<AnyObj>()
|
||||||
|
const [openCreateModal, setOpenCreateModal] = useState(false)
|
||||||
|
const [details, setDetails] = useState<Material>()
|
||||||
|
const [selected, setSelected] = useState<Material[] | undefined>()
|
||||||
|
const [content, setContent] = useState<AnyObj>()
|
||||||
|
// 材料排序依据（默认综合 Ypt 升序）与是否按健康档分组显示
|
||||||
|
const [sortKey, setSortKey] = useState<string>('ypt')
|
||||||
|
const [groupByTier, setGroupByTier] = useState<boolean>(false)
|
||||||
|
const page = (
|
||||||
|
<PageCard
|
||||||
|
title={title}
|
||||||
|
defActTabKey={!modal ? DATA_TYPE.PUBLIC : undefined}
|
||||||
|
tabItems={
|
||||||
|
!modal
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
key: DATA_TYPE.PUBLIC,
|
||||||
|
label: '公共库'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: DATA_TYPE.PRIVATE,
|
||||||
|
label: '自建库'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
onTabChange={!modal ? (key) => setTab(key as DATA_TYPE) : undefined}
|
||||||
|
extra={
|
||||||
|
!modal && tab === DATA_TYPE.PUBLIC
|
||||||
|
? [
|
||||||
|
<ImportMaterialsModal
|
||||||
|
key="import-modal"
|
||||||
|
title="导入公共材料"
|
||||||
|
trigger={<Button>导入材料</Button>}
|
||||||
|
/>,
|
||||||
|
<>
|
||||||
|
<Button type="primary" onClick={() => setOpenCreateModal(true)}>
|
||||||
|
新建材料
|
||||||
|
</Button>
|
||||||
|
<MaterialModalForm
|
||||||
|
key="create-modal-form"
|
||||||
|
title="新建公共材料"
|
||||||
|
displayStatus
|
||||||
|
displayDetails
|
||||||
|
open={openCreateModal}
|
||||||
|
onCancel={() => setOpenCreateModal(false)}
|
||||||
|
onFinish={async (data) => setContent(data)}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
]
|
||||||
|
: []
|
||||||
|
}
|
||||||
|
cardStyle={
|
||||||
|
modal
|
||||||
|
? {
|
||||||
|
borderBottomWidth: 0
|
||||||
|
}
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className="flex mb-4">
|
||||||
|
<div style={{ width: 'calc(100% - 80px)' }}>
|
||||||
|
<LightFilter form={filterForm} onFinish={async (data) => setFilterConditions(data)}>
|
||||||
|
<ProFormText name="material_id" label="材料ID" />
|
||||||
|
<ProFormText name="name" label="材料名称" />
|
||||||
|
<ProFormCascader
|
||||||
|
name="category"
|
||||||
|
label="材料类别"
|
||||||
|
fieldProps={{
|
||||||
|
placeholder: '',
|
||||||
|
multiple: true,
|
||||||
|
showSearch: true
|
||||||
|
}}
|
||||||
|
request={async () => {
|
||||||
|
const cats = await api.config.getMtrlCatList()
|
||||||
|
return cats.map((item) => ({
|
||||||
|
value: item.first_category,
|
||||||
|
label: item.first_category,
|
||||||
|
children: item.second_categories.map((c) => ({
|
||||||
|
value: c.second_category,
|
||||||
|
label: c.second_category
|
||||||
|
}))
|
||||||
|
}))
|
||||||
|
}}
|
||||||
|
transform={(val) => ({ category: val.map((v: string[]) => v.join('/')) })}
|
||||||
|
/>
|
||||||
|
<ProFormText name="brand" label="材料品牌" />
|
||||||
|
<ProFormText name="factory" label="材料厂家" />
|
||||||
|
<ProFormText name="spec" label="材料规格" />
|
||||||
|
<ProFormSelect
|
||||||
|
name="eco_level"
|
||||||
|
label="环保级别"
|
||||||
|
options={[{ value: ECO_LEVEL.E0 }, { value: ECO_LEVEL.E1 }, { value: ECO_LEVEL.E2 }]}
|
||||||
|
mode="multiple"
|
||||||
|
/>
|
||||||
|
{tab === DATA_TYPE.PRIVATE ? (
|
||||||
|
<ProFormText name="creator_name" label="创建用户" />
|
||||||
|
) : (
|
||||||
|
<ProFormSelect
|
||||||
|
name="display"
|
||||||
|
label="状态"
|
||||||
|
options={[
|
||||||
|
{ label: '展示', value: 1 },
|
||||||
|
{ label: '隐藏', value: 0 }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<ProFormSelect
|
||||||
|
name="sort"
|
||||||
|
label="排序"
|
||||||
|
options={[
|
||||||
|
{
|
||||||
|
label: '材料类别A-Z',
|
||||||
|
value: 'category'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '最近更新时间由近到远',
|
||||||
|
value: 'updated_at'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '甲醛释放量由低到高',
|
||||||
|
value: 'methanal_be_area'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'TVOC释放量由低到高',
|
||||||
|
value: 'tvoc_be_area'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '苯释放量由低到高',
|
||||||
|
value: 'benzene_be_area'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '甲苯释放量由低到高',
|
||||||
|
value: 'toluene_be_area'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '二甲苯释放量由低到高',
|
||||||
|
value: 'p_xylene_be_area'
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</LightFilter>
|
||||||
|
</div>
|
||||||
|
<div style={{ width: 80 }} className="flex justify-center">
|
||||||
|
<Button
|
||||||
|
key="reset"
|
||||||
|
onClick={() => {
|
||||||
|
setFilterConditions(undefined)
|
||||||
|
filterForm.resetFields()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
重置
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-4 mb-4">
|
||||||
|
<span>
|
||||||
|
排序依据{' '}
|
||||||
|
<Select
|
||||||
|
size="small"
|
||||||
|
style={{ width: 160 }}
|
||||||
|
value={sortKey}
|
||||||
|
onChange={(v) => {
|
||||||
|
setSortKey(v)
|
||||||
|
tableRef.current?.reload()
|
||||||
|
}}
|
||||||
|
options={[
|
||||||
|
{ value: 'sort_order', label: '手动排序' },
|
||||||
|
{ value: 'ypt', label: '综合 Ypt' },
|
||||||
|
{ value: 'methanal_be_area', label: '甲醛 Yp' },
|
||||||
|
{ value: 'tvoc_be_area', label: 'TVOC Yp' },
|
||||||
|
{ value: 'benzene_be_area', label: '苯 Yp' },
|
||||||
|
{ value: 'toluene_be_area', label: '甲苯 Yp' },
|
||||||
|
{ value: 'p_xylene_be_area', label: '二甲苯 Yp' }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
按健康等级分组{' '}
|
||||||
|
<Switch
|
||||||
|
size="small"
|
||||||
|
checked={groupByTier}
|
||||||
|
onChange={(c) => {
|
||||||
|
setGroupByTier(c)
|
||||||
|
tableRef.current?.reload()
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<ProTable<Material>
|
||||||
|
cardProps={{
|
||||||
|
bodyStyle: {
|
||||||
|
padding: 0
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
size="small"
|
||||||
|
search={false}
|
||||||
|
options={false}
|
||||||
|
actionRef={tableRef}
|
||||||
|
scroll={modal ? { y: 'calc(100vh - 400px)' } : { y: 'calc(100vh - 360px)' }}
|
||||||
|
rowSelection={
|
||||||
|
modal
|
||||||
|
? {
|
||||||
|
type: 'checkbox',
|
||||||
|
selectedRowKeys: selected?.map((m) => m.material_id),
|
||||||
|
// onSelect: (mtrl, slct) => {
|
||||||
|
// setSelected((pre) => {
|
||||||
|
// if (slct) {
|
||||||
|
// const nxt = pre ? [...pre] : []
|
||||||
|
// nxt.push(mtrl)
|
||||||
|
// return nxt
|
||||||
|
// } else {
|
||||||
|
// return pre?.filter((m) => m.material_id !== mtrl.material_id)
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
onChange: (_, mtrls) => setSelected(mtrls),
|
||||||
|
getCheckboxProps: (mtrl) => ({
|
||||||
|
disabled:
|
||||||
|
defaultSelected &&
|
||||||
|
defaultSelected.findIndex((m) => m.material_id === mtrl.material_id) !== -1
|
||||||
|
})
|
||||||
|
}
|
||||||
|
: false
|
||||||
|
}
|
||||||
|
onRow={(mtrl) => ({
|
||||||
|
onClick: () => {
|
||||||
|
if (!defaultSelected?.find((m) => m.material_id === mtrl.material_id)) {
|
||||||
|
setSelected((pre) => {
|
||||||
|
if (pre) {
|
||||||
|
if (pre.find((m) => m.material_id === mtrl.material_id)) {
|
||||||
|
return pre.filter((m) => m.material_id !== mtrl.material_id)
|
||||||
|
} else {
|
||||||
|
const nxt = [...pre]
|
||||||
|
nxt.push(mtrl)
|
||||||
|
return nxt
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return [mtrl]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
rowKey={(data) => data.material_id}
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
title: '材料ID',
|
||||||
|
dataIndex: 'material_id',
|
||||||
|
width: 120,
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '材料名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
align: 'center',
|
||||||
|
render: (_, m) => {
|
||||||
|
const tierHead = (m as Material & { __tierHead?: string }).__tierHead
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{tierHead && (
|
||||||
|
<div style={{ fontWeight: 600, color: '#888', margin: '4px 0' }}>
|
||||||
|
{'档位 ' + tierHead}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<span>{m.name}</span>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '材料类别',
|
||||||
|
dataIndex: 'category',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '材料品牌',
|
||||||
|
dataIndex: 'brand',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '材料厂家',
|
||||||
|
dataIndex: 'factory',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '材料规格',
|
||||||
|
dataIndex: 'spec',
|
||||||
|
align: 'center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '环保等级',
|
||||||
|
dataIndex: 'eco_level',
|
||||||
|
align: 'center',
|
||||||
|
width: 90,
|
||||||
|
render: (_, { eco_level }) => (eco_level ? <Tag>{eco_level}</Tag> : '-')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '健康档',
|
||||||
|
dataIndex: 'health_tier',
|
||||||
|
align: 'center',
|
||||||
|
width: 70,
|
||||||
|
render: (_, m) => {
|
||||||
|
const color =
|
||||||
|
m.health_tier === 'A'
|
||||||
|
? 'green'
|
||||||
|
: m.health_tier === 'B'
|
||||||
|
? 'gold'
|
||||||
|
: m.health_tier === 'C'
|
||||||
|
? 'red'
|
||||||
|
: 'default'
|
||||||
|
return <Tag color={color}>{m.health_tier ?? '—'}</Tag>
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
dataIndex: 'display',
|
||||||
|
align: 'center',
|
||||||
|
width: 80,
|
||||||
|
hideInTable: modal || tab === DATA_TYPE.PRIVATE,
|
||||||
|
render: (_, { display }) =>
|
||||||
|
display === 1 ? (
|
||||||
|
<Badge status="success" text="展示" />
|
||||||
|
) : (
|
||||||
|
<Badge status="error" text="隐藏" />
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建用户',
|
||||||
|
dataIndex: 'creator_name',
|
||||||
|
align: 'center',
|
||||||
|
hideInTable: modal || tab === DATA_TYPE.PUBLIC,
|
||||||
|
renderText: (_, { creator }) => creator?.username
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '最近更新时间',
|
||||||
|
dataIndex: 'updated_at',
|
||||||
|
align: 'center',
|
||||||
|
width: 160,
|
||||||
|
renderText: (dt) => new Date(dt).toLocaleString('zh-CN')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
valueType: 'option',
|
||||||
|
align: 'center',
|
||||||
|
width: 100,
|
||||||
|
render: (_, item) => (
|
||||||
|
<div className="flex justify-center space-x-2">
|
||||||
|
<Button
|
||||||
|
type="link"
|
||||||
|
style={{ padding: 0 }}
|
||||||
|
onClick={(e) => {
|
||||||
|
setDetails(item)
|
||||||
|
e.stopPropagation()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
详情
|
||||||
|
</Button>
|
||||||
|
{!modal && tab === DATA_TYPE.PUBLIC ? (
|
||||||
|
<Button
|
||||||
|
type="link"
|
||||||
|
style={{ padding: 0 }}
|
||||||
|
onClick={(e) => {
|
||||||
|
setContent({ delete_id: item.material_id })
|
||||||
|
e.stopPropagation()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</Button>
|
||||||
|
) : !modal && tab === DATA_TYPE.PRIVATE ? (
|
||||||
|
<Button
|
||||||
|
type="link"
|
||||||
|
style={{ padding: 0 }}
|
||||||
|
onClick={(e) => {
|
||||||
|
setContent({ collect_id: item.material_id, creator_id: item.creator_id })
|
||||||
|
e.stopPropagation()
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
收录
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
''
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
]}
|
||||||
|
params={{ type: tab, conditions: filterConditions, sortKey, groupByTier }}
|
||||||
|
request={async ({ type, conditions, sortKey: skParam, groupByTier: gbtParam, ...other }) => {
|
||||||
|
try {
|
||||||
|
// 旧筛选区「排序」下拉已被顶部「排序依据」Select 取代：
|
||||||
|
// 从 conditions 里剔除 sort，不让它随 otherConditions 传给后端，
|
||||||
|
// 也不再把它转成 searchParams() 的第三个参数（那会覆盖 query.sort_key/sort_val，
|
||||||
|
// 导致新 Select 选的排序字段被静默忽略）。'category' 仍保留为纯前端排序。
|
||||||
|
const { sort, ...otherConditions } = conditions ?? {}
|
||||||
|
const sortByCategory = sort === 'category'
|
||||||
|
const data = await api.material.search(
|
||||||
|
type,
|
||||||
|
searchParams(
|
||||||
|
{
|
||||||
|
...otherConditions,
|
||||||
|
...other,
|
||||||
|
display: modal ? 1 : undefined,
|
||||||
|
with_cltrs: 1,
|
||||||
|
// 顶部「排序依据」Select 始终是排序字段的唯一来源，不会被旧筛选区排序覆盖
|
||||||
|
sort_key: skParam,
|
||||||
|
sort_val: 'asc',
|
||||||
|
group_by_tier: gbtParam ? 1 : 0
|
||||||
|
},
|
||||||
|
false
|
||||||
|
)
|
||||||
|
)
|
||||||
|
if (sortByCategory) {
|
||||||
|
data.sort((a, b) => (a.category ?? '').localeCompare(b.category ?? ''))
|
||||||
|
}
|
||||||
|
if (gbtParam) {
|
||||||
|
// 分组开时后端已按档排序；为每档第一条打标，供「材料名称」列渲染分区小标题
|
||||||
|
let last: string | null | undefined = undefined
|
||||||
|
data.forEach((m) => {
|
||||||
|
if (m.health_tier !== last) {
|
||||||
|
;(m as Material & { __tierHead?: string }).__tierHead = m.health_tier ?? '数据不全'
|
||||||
|
last = m.health_tier
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
return {
|
||||||
|
success: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
pagination={
|
||||||
|
!modal
|
||||||
|
? {
|
||||||
|
position: ['bottomRight'],
|
||||||
|
defaultPageSize: 10,
|
||||||
|
showSizeChanger: true
|
||||||
|
}
|
||||||
|
: false
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<MaterialModalForm
|
||||||
|
title={`${tab === DATA_TYPE.PUBLIC ? '公共' : '自建'}材料详情`}
|
||||||
|
initialValues={details}
|
||||||
|
displayId
|
||||||
|
displayCreator={!modal && tab === DATA_TYPE.PRIVATE}
|
||||||
|
displayStatus={!modal && tab === DATA_TYPE.PUBLIC}
|
||||||
|
displayDetails
|
||||||
|
readonly={modal || tab === DATA_TYPE.PRIVATE}
|
||||||
|
open={details !== undefined}
|
||||||
|
submitText="保存"
|
||||||
|
onFinish={tab === DATA_TYPE.PUBLIC ? async (data) => setContent(data) : undefined}
|
||||||
|
onCancel={() => setDetails(undefined)}
|
||||||
|
/>
|
||||||
|
</PageCard>
|
||||||
|
)
|
||||||
|
return modal ? (
|
||||||
|
<Modal
|
||||||
|
style={{
|
||||||
|
top: 65
|
||||||
|
}}
|
||||||
|
styles={{
|
||||||
|
content: {
|
||||||
|
padding: 0
|
||||||
|
},
|
||||||
|
footer: {
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
width="calc(100% - 100px)"
|
||||||
|
footer={
|
||||||
|
<div className="space-x-4 pb-4 pr-[20px]">
|
||||||
|
<Button style={{ width: 64 }} onClick={modalProps?.onCancel}>
|
||||||
|
取消
|
||||||
|
</Button>
|
||||||
|
<Button type="primary" style={{ width: 64 }} onClick={() => onAdd?.(selected)}>
|
||||||
|
添加
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
maskClosable={false}
|
||||||
|
destroyOnClose
|
||||||
|
open={modalProps?.open}
|
||||||
|
afterClose={() => {
|
||||||
|
setFilterConditions(undefined)
|
||||||
|
filterForm.resetFields()
|
||||||
|
setSelected(undefined)
|
||||||
|
}}
|
||||||
|
onCancel={modalProps?.onCancel}
|
||||||
|
>
|
||||||
|
{page}
|
||||||
|
</Modal>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{page}
|
||||||
|
<OperateMaterial
|
||||||
|
type={tab}
|
||||||
|
content={content}
|
||||||
|
open={content !== undefined}
|
||||||
|
onCancel={() => setContent(undefined)}
|
||||||
|
onFinish={() => {
|
||||||
|
setOpenCreateModal(false)
|
||||||
|
setDetails(undefined)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MaterialCard
|
||||||
|
|
@ -0,0 +1,156 @@
|
||||||
|
import { DATA_TYPE, HTTP_HEADER } from '@/common/constants'
|
||||||
|
import { AnyObj, Arrayable, ECO_LEVEL, FROM_TYPE, MTRL_UNIT, Material } from '@/common/types'
|
||||||
|
import { getLocalToken } from '@/common/utils'
|
||||||
|
import { request } from '@umijs/max'
|
||||||
|
|
||||||
|
export async function createPub(
|
||||||
|
body: {
|
||||||
|
name?: string
|
||||||
|
category?: string
|
||||||
|
brand?: string
|
||||||
|
factory?: string
|
||||||
|
spec?: string
|
||||||
|
eco_level?: ECO_LEVEL
|
||||||
|
display?: number
|
||||||
|
methanal_min_be?: number
|
||||||
|
methanal_be_area?: number
|
||||||
|
methanal_be_roc?: number
|
||||||
|
tvoc_min_be?: number
|
||||||
|
tvoc_be_area?: number
|
||||||
|
tvoc_be_roc?: number
|
||||||
|
benzene_min_be?: number
|
||||||
|
benzene_be_area?: number
|
||||||
|
benzene_be_roc?: number
|
||||||
|
toluene_min_be?: number
|
||||||
|
toluene_be_area?: number
|
||||||
|
toluene_be_roc?: number
|
||||||
|
p_xylene_min_be?: number
|
||||||
|
p_xylene_be_area?: number
|
||||||
|
p_xylene_be_roc?: number
|
||||||
|
from?: FROM_TYPE
|
||||||
|
},
|
||||||
|
options?: AnyObj
|
||||||
|
) {
|
||||||
|
return request<Material>(`/api/mtrl/pub`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
[HTTP_HEADER.AUTHORIZATION]: getLocalToken()
|
||||||
|
},
|
||||||
|
data: body,
|
||||||
|
...(options || {})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function collectSelf(
|
||||||
|
body: {
|
||||||
|
material_id: string
|
||||||
|
creator_id: string
|
||||||
|
display?: number
|
||||||
|
},
|
||||||
|
options?: AnyObj
|
||||||
|
) {
|
||||||
|
return request<Material>(`/api/mtrl/pub/self`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
[HTTP_HEADER.AUTHORIZATION]: getLocalToken()
|
||||||
|
},
|
||||||
|
data: body,
|
||||||
|
...(options || {})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function patchPub(
|
||||||
|
query: {
|
||||||
|
material_id: string
|
||||||
|
},
|
||||||
|
body: {
|
||||||
|
name?: string
|
||||||
|
category?: string
|
||||||
|
brand?: string
|
||||||
|
factory?: string
|
||||||
|
spec?: string
|
||||||
|
eco_level?: ECO_LEVEL
|
||||||
|
display?: number
|
||||||
|
methanal_min_be?: number
|
||||||
|
methanal_be_area?: number
|
||||||
|
methanal_be_roc?: number
|
||||||
|
tvoc_min_be?: number
|
||||||
|
tvoc_be_area?: number
|
||||||
|
tvoc_be_roc?: number
|
||||||
|
benzene_min_be?: number
|
||||||
|
benzene_be_area?: number
|
||||||
|
benzene_be_roc?: number
|
||||||
|
toluene_min_be?: number
|
||||||
|
toluene_be_area?: number
|
||||||
|
toluene_be_roc?: number
|
||||||
|
p_xylene_min_be?: number
|
||||||
|
p_xylene_be_area?: number
|
||||||
|
p_xylene_be_roc?: number
|
||||||
|
},
|
||||||
|
options?: AnyObj
|
||||||
|
) {
|
||||||
|
return request<Material>(`/api/mtrl/pub`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
headers: {
|
||||||
|
[HTTP_HEADER.AUTHORIZATION]: getLocalToken()
|
||||||
|
},
|
||||||
|
params: query,
|
||||||
|
data: body,
|
||||||
|
...(options || {})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function removePub(
|
||||||
|
query: {
|
||||||
|
material_id: Arrayable<string>
|
||||||
|
},
|
||||||
|
options?: AnyObj
|
||||||
|
) {
|
||||||
|
return request<{ count: number }>('/api/mtrl/pub', {
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: {
|
||||||
|
[HTTP_HEADER.AUTHORIZATION]: getLocalToken()
|
||||||
|
},
|
||||||
|
params: query,
|
||||||
|
...(options || {})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function search(
|
||||||
|
type: DATA_TYPE,
|
||||||
|
query?: {
|
||||||
|
material_id?: Arrayable<string>
|
||||||
|
name?: Arrayable<string>
|
||||||
|
category?: Arrayable<string>
|
||||||
|
brand?: Arrayable<string>
|
||||||
|
factory?: Arrayable<string>
|
||||||
|
spec?: Arrayable<string>
|
||||||
|
eco_level?: Arrayable<ECO_LEVEL>
|
||||||
|
unit?: Arrayable<MTRL_UNIT>
|
||||||
|
display?: number
|
||||||
|
collected?: number
|
||||||
|
creator_id?: Arrayable<string>
|
||||||
|
creator_name?: Arrayable<string>
|
||||||
|
with_cltrs?: number
|
||||||
|
sort_key?: Arrayable<string>
|
||||||
|
sort_val?: Arrayable<string>
|
||||||
|
group_by_tier?: 0 | 1
|
||||||
|
page?: number
|
||||||
|
size?: number
|
||||||
|
},
|
||||||
|
options?: AnyObj
|
||||||
|
) {
|
||||||
|
if (type === DATA_TYPE.PRIVATE) {
|
||||||
|
delete query?.display
|
||||||
|
delete query?.collected
|
||||||
|
delete query?.with_cltrs
|
||||||
|
}
|
||||||
|
return request<Material[]>(`/api/mtrl/${type}`, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
[HTTP_HEADER.AUTHORIZATION]: getLocalToken()
|
||||||
|
},
|
||||||
|
params: query,
|
||||||
|
...(options || {})
|
||||||
|
})
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue