fix: 样本管理样式更改

This commit is contained in:
2026-03-02 14:55:24 +08:00
parent 95338a3ddf
commit f842dcaf14
6 changed files with 220 additions and 190 deletions

View File

@@ -35,7 +35,6 @@ function EnhancedProTable<T extends BaseRecord, U extends ParamsType = any>(
type={action.type}
danger={action.danger}
disabled={action.disabled}
// icon={action.icon ?? <PlusOutlined />}
onClick={() => action.onClick()}
>
{action.label}
@@ -55,7 +54,6 @@ function EnhancedProTable<T extends BaseRecord, U extends ParamsType = any>(
toolBarRender={toolBarRender}
manualRequest={false}
showSorterTooltip
// scroll={{ x: "max-content" }}
scroll={scroll ? scroll : { x: 1200 }}
components={components}
search={
@@ -84,6 +82,7 @@ function EnhancedProTable<T extends BaseRecord, U extends ParamsType = any>(
showSizeChanger: true,
showQuickJumper: true,
// pageSize: 10,
defaultPageSize: 10,
showTotal: formatPaginationTotal,
}
: false

View File

@@ -1,5 +1,6 @@
.uploader-card {
background-color: #fff;
padding: 10px;
:global {
.ant-upload-drag {
background-color: #fff;

View File

@@ -5,7 +5,11 @@ import type {
} from '@ant-design/pro-components';
import { Modal, message, Switch } from 'antd';
import dayjs from 'dayjs';
import { type AiModelRespVO, updateModelStatus } from '@/services/ai/model';
import {
type AiModelRespVO,
updateModel,
updateModelStatus,
} from '@/services/ai/model';
export const baseDeptColumns: ProColumns<AiModelRespVO>[] = [
{
@@ -47,9 +51,9 @@ export const baseDeptColumns: ProColumns<AiModelRespVO>[] = [
}"类目吗?`,
onOk: async () => {
console.log(checked);
await updateModelStatus({
await updateModel({
...record,
status: checked ? 1 : 0,
id: record.id,
});
message.success('修改成功');
action?.reload();

View File

@@ -175,166 +175,180 @@ const SampleTagDetail = <T extends Record<string, any>>(
};
return (
<>
<ProForm name="validate_other" formRef={formRef} submitter={false}>
{type === 'radio' && (
<ProFormGroup title="预览">
{data?.[0].sampleFilePath && (
<audio
controls
preload="true"
crossOrigin="anonymous"
style={{ marginBottom: 24 }}
>
<source src={data[0].sampleFilePath} />
<track kind="captions" />
</audio>
{data!.length > 0 ? (
<>
<ProForm name="validate_other" formRef={formRef} submitter={false}>
{type === 'radio' && (
<ProFormGroup title="预览">
{data?.[0].sampleFilePath && (
<audio
controls
preload="true"
crossOrigin="anonymous"
style={{ marginBottom: 24 }}
>
<source src={data[0].sampleFilePath} />
<track kind="captions" />
</audio>
)}
</ProFormGroup>
)}
</ProFormGroup>
)}
<ProFormGroup title="基本信息">
{type === 'radio' && (
<ProFormText
width="md"
name="sampleName"
placeholder="请输入样本名称"
fieldProps={{
onBlur: async (e) => {
if (e.target.value) {
const newData =
data?.map((sample) => {
return {
id: sample.id,
sampleName: e.target.value,
};
}) || [];
await updateSamples(newData);
props?.onRefresh?.();
message.success('更新样本名称成功');
}
},
}}
rules={[{ required: true, message: '样本名称不能为空' }]}
/>
)}
<ProFormText
width="md"
fieldProps={{
onBlur: async (e) => {
if (e.target.value) {
const newData =
data?.map((sample) => {
return {
id: sample.id,
remark: e.target.value,
};
}) || [];
await updateSamples(newData);
props?.onRefresh?.();
message.success('更新注释成功');
}
<ProFormGroup title="基本信息">
{type === 'radio' && (
<ProFormText
width="md"
name="sampleName"
placeholder="请输入样本名称"
fieldProps={{
onBlur: async (e) => {
if (e.target.value) {
const newData =
data?.map((sample) => {
return {
id: sample.id,
sampleName: e.target.value,
};
}) || [];
await updateSamples(newData);
props?.onRefresh?.();
message.success('更新样本名称成功');
}
},
}}
rules={[{ required: true, message: '样本名称不能为空' }]}
/>
)}
<ProFormText
width="md"
fieldProps={{
onBlur: async (e) => {
if (e.target.value) {
const newData =
data?.map((sample) => {
return {
id: sample.id,
remark: e.target.value,
};
}) || [];
await updateSamples(newData);
props?.onRefresh?.();
message.success('更新注释成功');
}
},
}}
name="remark"
placeholder="请输入注释"
/>
</ProFormGroup>
<ProFormGroup title="标签">
{/* <Form.Item name="tag"> */}
{forMap(value.tags || [])}
</ProFormGroup>
<Button
type="dashed"
block
style={{ marginBottom: 24 }}
onClick={handleAddTag}
>
</Button>
<ProFormGroup title="文本信息" block></ProFormGroup>
<Space size={10} style={{ width: '100%', marginBottom: 12 }}>
<span>: </span>
<span>
{dayjs(value.createTime).format('YYYY-MM-DD HH:mm:ss')}
</span>
</Space>
<Space size={10} style={{ width: '100%', marginBottom: 12 }}>
<span></span>
<span>
{dayjs(value.updateTime).format('YYYY-MM-DD HH:mm:ss')}
</span>
</Space>
<Space size={10} style={{ width: '100%', marginBottom: 12 }}>
<span>: </span>
<span>{value.sampleSize}</span>
</Space>
<Space size={10} style={{ width: '100%', marginBottom: 12 }}>
<span>: </span>
<span>{value.sampleMineType}</span>
</Space>
{type === 'checkbox' && (
<>
<ProFormGroup title="其他"></ProFormGroup>
<Button
block
style={{ marginBottom: 24 }}
onClick={handleTagManager}
>
</Button>
<Button
block
style={{ marginBottom: 24 }}
onClick={handleDownloadAll}
>
</Button>
<Button
block
color="danger"
style={{ marginBottom: 24 }}
onClick={handleDeleteAll}
>
</Button>
</>
)}
</ProForm>
<GroupTagModal
visible={modalVisible}
onCancel={() => setModalVisible(false)}
onChange={onListAddTag}
editable={false}
value={value?.tags}
request={{
groupsApi: {
get: getSampleTagGroup,
create: createSampleTagGroup,
delete: deleteSampleTagGroup,
update: updateSampleTagGroup,
},
tagsApi: {
get: getSampleTagPage,
create: createSampleTag,
delete: deleteSampleTag,
update: updateSampleTag,
},
}}
name="remark"
placeholder="请输入注释"
title="管理技术标签"
width={800}
height={500}
/>
</ProFormGroup>
<ProFormGroup title="标签">
{/* <Form.Item name="tag"> */}
{forMap(value.tags || [])}
</ProFormGroup>
<Button
type="dashed"
block
style={{ marginBottom: 24 }}
onClick={handleAddTag}
>
</Button>
<ProFormGroup title="文本信息" block></ProFormGroup>
<Space size={10} style={{ width: '100%', marginBottom: 12 }}>
<span>: </span>
<span>{dayjs(value.createTime).format('YYYY-MM-DD HH:mm:ss')}</span>
</Space>
<Space size={10} style={{ width: '100%', marginBottom: 12 }}>
<span></span>
<span>{dayjs(value.updateTime).format('YYYY-MM-DD HH:mm:ss')}</span>
</Space>
<Space size={10} style={{ width: '100%', marginBottom: 12 }}>
<span>: </span>
<span>{value.sampleSize}</span>
</Space>
<Space size={10} style={{ width: '100%', marginBottom: 12 }}>
<span>: </span>
<span>{value.sampleMineType}</span>
</Space>
{type === 'checkbox' && (
<>
<ProFormGroup title="其他"></ProFormGroup>
<Button
block
style={{ marginBottom: 24 }}
onClick={handleTagManager}
<TagManager
visible={tagManagerVisible}
files={tagNames}
onOk={onRename}
onCancel={() => setTagManagerVisible(false)}
></TagManager>
{type === 'radio' && (
<Space
style={{ width: '100%', justifyContent: 'center', padding: 12 }}
>
</Button>
<Button
block
style={{ marginBottom: 24 }}
onClick={handleDownloadAll}
>
</Button>
<Button
block
color="danger"
style={{ marginBottom: 24 }}
onClick={handleDeleteAll}
>
</Button>
</>
)}
</ProForm>
<GroupTagModal
visible={modalVisible}
onCancel={() => setModalVisible(false)}
onChange={onListAddTag}
editable={false}
value={value?.tags}
request={{
groupsApi: {
get: getSampleTagGroup,
create: createSampleTagGroup,
delete: deleteSampleTagGroup,
update: updateSampleTagGroup,
},
tagsApi: {
get: getSampleTagPage,
create: createSampleTag,
delete: deleteSampleTag,
update: updateSampleTag,
},
}}
title="管理技术标签"
width={800}
height={500}
/>
<TagManager
visible={tagManagerVisible}
files={tagNames}
onOk={onRename}
onCancel={() => setTagManagerVisible(false)}
></TagManager>
<Space style={{ width: '100%', justifyContent: 'center', padding: 12 }}>
<Button color="danger" onClick={onDownload}>
</Button>
<Button color="danger" variant="solid" onClick={handleDeleteAll}>
</Button>
</Space>
<Button color="danger" onClick={onDownload}>
</Button>
<Button color="danger" variant="solid" onClick={handleDeleteAll}>
</Button>
</Space>
)}
</>
) : (
'暂无数据-请选择样本'
)}
</>
);
};

View File

@@ -1,18 +1,28 @@
.tag-content {
display: flex;
background: #fff;
width: 100%;
overflow: auto;
:global {
.ant-pro-table {
flex: 1 auto;
.left {
padding-right: 385px;
}
.uploader-card {
padding-right: 400px;
}
.detail {
display: flex;
flex-direction: column;
border-left: 1px solid #e8e8e8;
border-top: 1px solid #e8e8e8;
width: 400px;
padding: 16px;
top: 74px;
height: calc(100vh - 80px);
overflow: auto;
background: #fff;
position: fixed;
right: 0;
form {
flex: 1;
}

View File

@@ -77,35 +77,37 @@ const SampleTag: React.FC = () => {
};
return (
<>
<UploadCard onChange={onChangeVideo} />
<div className={styles['tag-content']}>
<EnhancedProTable<AiSampleRespVO>
ref={tableRef}
columns={baseTenantColumns}
request={onFetch}
toolbarActions={toolbarActions}
headerTitle="样本列表"
showIndex={false}
enableRowClick={true}
scroll={{ x: 400 }}
rowSelection={{
type: selectTableType,
selectedRowKeys: selectedRows.map((item) => item.id) as React.Key[],
onChange: (_, selectedRows) => {
setSelectedRows(selectedRows);
},
}}
/>
<div className="left">
<UploadCard onChange={onChangeVideo} />
<EnhancedProTable<AiSampleRespVO>
ref={tableRef}
columns={baseTenantColumns}
request={onFetch}
toolbarActions={toolbarActions}
headerTitle="样本列表"
showIndex={false}
enableRowClick={true}
scroll={{ x: 400 }}
rowSelection={{
type: selectTableType,
selectedRowKeys: selectedRows.map(
(item) => item.id,
) as React.Key[],
onChange: (_, selectedRows) => {
setSelectedRows(selectedRows);
},
}}
/>
</div>
{selectedRows.length > 0 && (
<div className="detail">
<SampleTagDetail<AiSampleRespVO>
type={selectTableType}
data={selectedRows}
onRefresh={onRefresh}
/>
</div>
)}
<div className="detail">
<SampleTagDetail<AiSampleRespVO>
type={selectTableType}
data={selectedRows}
onRefresh={onRefresh}
/>
</div>
</div>
<GroupTagModal
visible={modalVisible}