极客观点
项目管理
HarmonyOS
antd的UI 通过弹出框以编辑相应数据 => 确认添加 => table更新添加数据中无name数据
// 新建
const CollectionCreateForm = Form.create()(
(props) => {
const {visible, onCancel, onCreate, form} = props;
const {getFieldDecorator} = form;
function onChange(checkedValues) {
console.log('checked = ', checkedValues);
}
const userRights = ['读', '写', '执行'];
const userGroupPermissions = [
{label: '读', value: '读'},
{label: '写', value: '写'},
{label: '执行', value: '执行'},
];
const otherAuthority = [
{label: '读', value: '读'},
{label: '写', value: '写'},
{label: '执行', value: '执行'},
];
const Padding = {
padding: '0 20px'
}
return (
<Modal
visible={visible}
title="创建一个文件"
okText="Create"
onCancel={onCancel}
onOk={onCreate}
>
<Form layout="horizontal" style={Padding}>
<FormItem label="目录名称" id="dirName">
{getFieldDecorator('label', {
rules: [{required: true, message: '请输入文件名称！'}],
})(
<Input/>
)}
</FormItem>
<Form layout="horizontal" className="create-action">
<FormItem
label="配额"
>
{getFieldDecorator('input-number', {
initialValue: 3
})(
<InputNumber min={1} max={10}/>
)}
<span className="ant-form-text">文件数量</span>
</FormItem>
<FormItem
label="容量"
>
{getFieldDecorator('slider', {})(
<Slider marks={{0: '0', 20: '20', 40: '40', 60: '60', 80: '80', 100: '100'}}/>
)}
</FormItem>
</Form>
<Form
label="权限管理"
layout="inline" className="create-action">
<FormItem
label="用户权限"
>
{getFieldDecorator('CheckboxGroup', {
rules: [{required: true, message: '请选择权限'}]
})(
<CheckboxGroup options={userRights} defaultValue={['读']} onChange={onChange}/>
)}
</FormItem>
<FormItem
label="用户组权限"
>
{getFieldDecorator('CheckboxGroup2', {
rules: [{required: true, message: '请选择权限'}]
})(
<CheckboxGroup options={userGroupPermissions} defaultValue={['读']} onChange={onChange}/>
)}
</FormItem>
<FormItem
label="其他权限"
>
{getFieldDecorator('CheckboxGroup3', {
rules: [{required: true, message: '请选择权限'}]
})(
<CheckboxGroup options={otherAuthority} defaultValue={['读']} onChange={onChange}/>
)}
</FormItem>
</Form>
</Form>
</Modal>
);
}
);
class FileSync extends Component {
constructor(props) {
super(props);
this.columns = [{
title: 'Name',
dataIndex: 'name',
render: name => `${name}`,
width: '20%',
sorter: (a, b) => a.name.length - b.name.length,
}, {
title: 'Size',
dataIndex: 'size',
width: '20%',
sorter: (a, b) => a.size - b.size,
}, {
title: 'Action',
dataIndex: 'action',
render() {
return (
<Dropdown overlay={menu}>
<Button>
more <Icon type="down"/>
</Button>
</Dropdown>
)
},
}];
}
// 初始化
state = {
dirName: [],
selectedRowKeys: [],
rowSelection: [],
visible: false,
key: "",
file_attr:
[
{"type": 1, "key": 1, "name": "zhangzhengyan", "size": 12288},
{"type": 1, "key": 2, "name": "nfs_export", "size": 4100},
{"type": 2, "key": 3, "name": "a.txt", "size": 0},
{"type": 1, "name": "ceph", "size": 1447880072},
{"type": 1, "key": 4, "name": ".ganesha", "size": 24576},
{"type": 1, "key": 5, "name": ".ctdb", "size": 4096},
{"type": 1, "name": "cifs_test", "size": 4096}, {
"type": 1, "key": 6, "name": "cifs_share", "size": 4106
}],
};
// 选项变更时
onSelectChange = (selectedRowKeys) => {
console.log('selectedRowKeys changed: ', selectedRowKeys);
this.setState({
selectedRowKeys,
});
};
// 新建展示界面
showModal = () => {
this.setState({visible: true});
}
// 返回
handleCancel = () => {
this.setState({visible: false});
}
// create
handleCreate = () => {
const form = this.form;
const count = this.state.file_attr.length;
const file_attr = this.state.file_attr;
const dir_Name = this.state.dirName;
// const details = this.details;
const newData = {
key: count,
// `` 以引入相应数据
name: `${dir_Name}`,
size: `${count}`,
};
form.validateFields((err, values) => {
if (err) {
return;
}
console.log('Received values of form: ', values);
form.resetFields();
this.setState({
dirName: values.label,
file_attr: [...file_attr, newData],
count: count + 1,
visible: false,
});
});
}
saveFormRef = (form) => {
this.form = form;
}
// 渲染页面
render() {
const {selectedRowKeys} = this.state;
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange,
};
const columns = this.columns;
return (
<Content style={{margin: '0 16px'}}>
<Breadcrumb style={{margin: '12px 0'}}>
<Breadcrumb.Item>概览</Breadcrumb.Item>
<Breadcrumb.Item> </Breadcrumb.Item>
</Breadcrumb>
<div style={{background: '#fff', minHeight: 360, overflow: 'hidden'}}>
<div>
<div className="button-group">
<Row>
<Col span={2}>
<div>
<Button type="primary" onClick={this.showModal}>创建</Button>
<CollectionCreateForm
ref={this.saveFormRef}
visible={this.state.visible}
onCancel={this.handleCancel}
onCreate={this.handleCreate}
/>
</div>
</Col>
<Col span={2}>
</Col>
<Col span={2} offset={18}>
</Col>
</Row>
</div>
<div className="file-list">
{/*列表*/}
<Table
onRowDoubleClick={record => console.log(String({record}))}
style={{textAlign: 'center'}}
columns={columns}
rowKey={record => record.registered}
// 数据
dataSource={this.state.file_attr}
/>
</div>
</div>
</div>
</Content>
);
}
}
export default FileSync连接了Chrome但未得到期望的答案，笨的有点怀疑人生啦｡ﾟヽ(ﾟ´Д`)ﾉﾟ｡
解决了，没注意新建时的赋值……