kevisual/kevisual-center
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add container publish

Browse Source
This commit is contained in:
xion 2024-10-24 09:24:43 +08:00
parent a6a47be45f
commit ce3c29ca0d
2 changed files with 122 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
src/pages/container/edit/List.tsx
View File

@ -16,6 +16,7 @@ import {
MessageOutlined,
PlusOutlined,
DashboardOutlined,
CloudUploadOutlined,
} from '@ant-design/icons';
import clsx from 'clsx';
import { isObjectNull } from '@/utils/is-null';
@ -97,6 +98,85 @@ const FormModal = () => {
</Modal>
);
};
const PublishFormModal = () => {
const [form] = Form.useForm();
const containerStore = useContainerStore(
useShallow((state) => {
return {
showEdit: state.showPublish,
setShowEdit: state.setShowPublish,
formData: state.formData,
updateData: state.publishData,
};
}),
);
useEffect(() => {
const open = containerStore.showEdit;
if (open) {
if (open) {
const isNull = isObjectNull(containerStore.formData);
if (isNull) {
form.setFieldsValue({});
} else form.setFieldsValue(containerStore.formData);
}
}
}, [containerStore.showEdit]);
const onFinish = async (values: any) => {
containerStore.updateData(values);
};
const onClose = () => {
containerStore.setShowEdit(false);
form.resetFields();
};
const isEdit = containerStore.formData.id;
return (
<Modal
title={'Publish'}
open={containerStore.showEdit}
onClose={() => containerStore.setShowEdit(false)}
destroyOnClose
footer={false}
width={800}
onCancel={onClose}>
<Form
form={form}
onFinish={onFinish}
labelCol={{
span: 4,
}}
wrapperCol={{
span: 20,
}}>
<Form.Item name='id' hidden>
<Input />
</Form.Item>
<Form.Item name={['publish', 'title']} label='title'>
<Input />
</Form.Item>
<Form.Item name={['publish', 'description']} label='description'>
<Input.TextArea rows={4} />
</Form.Item>
<Form.Item name={['publish', 'version']} label='version' required>
<Input />
</Form.Item>
<Form.Item name={['publish', 'key']} label='key' required>
<Input />
</Form.Item>
<Form.Item name={['publish', 'fileName']} label='file name' required>
<Input />
</Form.Item>
<Form.Item label=' ' colon={false}>
<Button type='primary' htmlType='submit'>
Submit
</Button>
<Button className='ml-2' htmlType='reset' onClick={onClose}>
Cancel
</Button>
</Form.Item>
</Form>
</Modal>
);
};
export const ContainerList = () => {
const navicate = useNewNavigate();
const containerStore = useContainerStore(
@ -108,7 +188,8 @@ export const ContainerList = () => {
deleteData: state.deleteData,
getList: state.getList,
loading: state.loading,
publishData: state.publishData,
// publishData: state.publishData,
setShowPublish: state.setShowPublish,
updateData: state.updateData,
formData: state.formData,
};
@ -189,26 +270,40 @@ export const ContainerList = () => {
e.stopPropagation();
}}
icon={<EditOutlined />}></Button>
<Button
onClick={(e) => {
// navicate('/container/preview/' + item.id);
window.open('/container/preview/' + item.id);
e.stopPropagation();
}}
icon={<LinkOutlined />}></Button>
<Button
onClick={(e) => {
e.stopPropagation();
Modal.confirm({
title: 'Delete',
content: 'Are you sure delete this data?',
onOk: () => {
containerStore.deleteData(item.id);
},
});
e.stopPropagation();
}}
icon={<DeleteOutlined />}></Button>
<Tooltip title='预览'>
<Button
onClick={(e) => {
// navicate('/container/preview/' + item.id);
window.open('/container/preview/' + item.id);
e.stopPropagation();
}}
icon={<LinkOutlined />}></Button>
</Tooltip>
<Tooltip title='publish'>
<Button
onClick={(e) => {
// containerStore.publishData(item);
containerStore.setFormData(item);
containerStore.setShowPublish(true);
e.stopPropagation();
}}
icon={<CloudUploadOutlined />}></Button>
</Tooltip>
<Tooltip title='删除'>
<Button
onClick={(e) => {
e.stopPropagation();
Modal.confirm({
title: 'Delete',
content: 'Are you sure delete this data?',
onOk: () => {
containerStore.deleteData(item.id);
},
});
e.stopPropagation();
}}
icon={<DeleteOutlined />}></Button>
</Tooltip>
</Button.Group>
</div>
</div>
@ -273,6 +368,7 @@ export const ContainerList = () => {
</div>
</div>
<FormModal />
<PublishFormModal />
</div>
);
};

19
src/pages/container/store/index.ts
View File

@ -4,6 +4,8 @@ import { message } from 'antd';
type ContainerStore = {
showEdit: boolean;
setShowEdit: (showEdit: boolean) => void;
showPublish: boolean;
setShowPublish: (showPublish: boolean) => void;
formData: any;
setFormData: (formData: any) => void;
loading: boolean;
@ -18,6 +20,8 @@ export const useContainerStore = create<ContainerStore>((set, get) => {
return {
showEdit: false,
setShowEdit: (showEdit) => set({ showEdit }),
showPublish: false,
setShowPublish: (showPublish) => set({ showPublish }),
formData: {},
setFormData: (formData) => set({ formData }),
loading: false,
@ -25,7 +29,6 @@ export const useContainerStore = create<ContainerStore>((set, get) => {
list: [],
getList: async () => {
set({ loading: true });
const res = await query.post({
path: 'container',
key: 'list',
@ -67,22 +70,10 @@ export const useContainerStore = create<ContainerStore>((set, get) => {
}
},
publishData: async (data) => {
const hasPublish = !!data.publish?.name;
const publish = {
name: 'test-import',
};
if (!hasPublish) {
console.error('need publish.name');
return;
}
const res = await query.post({
path: 'container',
key: 'publish',
data: {
id: data.id,
publish: publish,
type: 'patch',
},
data,
});
if (res.code === 200) {
message.success('Success');