1.新增
<Form.Item
label="会议室指引图名称"
className="panel-li-title"
labelCol={{
span: 7,
}}
wrapperCol={{
span: 17,
}}
>
{getFieldDecorator("name", {
initialValue: data.name,
rules: [
{
required: true,
message: "会议室指引图名称不为空",
},
],
})(<Input placeholder="请输入会议室指引图名称" />)}
</Form.Item>
<Form.Item
label="大厦"
className="panel-li-title"
labelCol={{
span: 6,
}}
wrapperCol={{
span: 18,
}}
>
{/* build_floor_ids是一个数组里面包含着大厦id 和楼层id */}
{getFieldDecorator("build_floor_ids", {
initialValue: data.build_floor_ids,
rules: [
{
type: "array",
required: true,
message: "大厦不为空",
},
{
validator: (rule, value, callback) => {
let record = getFieldValue("build_floor_obj");
// console.error("-11--", value, record);
if (record.type === "b") {
callback("未配置楼层");
}
callback();
},
},
],
})(
// 新增编辑 -大厦下拉框列表
<SearchInput
disabled={type === "edit"}
style={{ width: "100%" }}
placeholder="请选择大厦"
showSearch
// 大厦展示的id 和名称
fieldNames={{
label: "cn_name",
value: "id",
children: "children",
}}
onChange={(value, selectedOptions) => {
// 把选择完的大厦-楼层的楼层id给了 record ,selectedOptions.length - 1减一代表只传一个楼层id
let record = selectedOptions[selectedOptions.length - 1];
// ==b代表 代表已经选了楼层
if (record.type !== "b") {
// console.error(record, record?.id);
// 请求接口的时候把楼层id给了original_id record?.id这种是高级写法,代表着从record中拿到id
FloorguideAction.floorGuideList({
original_id: record?.id,
}).then((results) => {
if (!results.success) {
message.error(results.err_msg || "接口错误", 0.5);
return;
}
// 最后判断有图片就展示图片没有就继续展示默认icon
this.props.toggleBackUrl &&
this.props.toggleBackUrl(results?.data?.photo_url);
});
}
setFieldsValue({
build_floor_obj: record,
build_floor_id: record?.id,
});
}}
/>
)}
</Form.Item>
2.编辑
state = { data: {} };
componentDidMount() {
this.init();
}
init = () => {
let { location = {} } = this.props;
let { query = {} } = location;
let { id } = query;
if (id) {
FloorguideAction.floorGuideMeetingFindById({
id,
}).then((results) => {
if (!results.success) {
message.error(results.err_msg || "接口错误", 0.5);
return;
}
let { data = {} } = results;
if (_.isEmpty(data)) {
return;
}
this.setState({
data: {
// id,
...data,
// 这是回显的两个联动的下拉框组建的数据 大厦id 楼层id
build_floor_ids: [
data.build_id, //接口获取的大厦id
data.build_floor_id, //接口获取的楼层id build_floor_id
],
},
});
});
}
};
render() {
let { data = {} } = this.state;
return <Add location={this.props.location} type="edit" data={data} />;
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。