bpa
/
BPA.KitChen.Web
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 1 Wiki Activity
Browse Source

修复富文本编辑器 回显问题

tags/小炒逻辑变更前
yangwenhua 2 years ago
parent
3494ca0d64
commit
a8134171f8
1 changed files with 370 additions and 367 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +370
    -367
      src/pages/card/gate/index.jsx

+ 370
- 367
src/pages/card/gate/index.jsx View File

@@ -15,389 +15,392 @@ import cardAPI from "../service";
* @returns
*/
const Gate = () => {
const actionRef = useRef();
const [modalForm] = Form.useForm();
const [isModalOpen, setIsModalOpen] = useState(false);
const [currentOption, setCurrentOption] = useState({ id: '' });
const [storeList, setStoreList] = useState([]);
const [selectedStore, setSelectedStore] = useState('');
const [current, setCurrent] = useState(1);
const [pageSize, setPageSize] = useState(10);
const actionRef = useRef();
const [modalForm] = Form.useForm();
const [isModalOpen, setIsModalOpen] = useState(false);
const [currentOption, setCurrentOption] = useState({ id: '' });
const [storeList, setStoreList] = useState([]);
const [selectedStore, setSelectedStore] = useState('');
const [current, setCurrent] = useState(1);
const [pageSize, setPageSize] = useState(10);

// editor 实例
const [editor, setEditor] = useState(null);
// 编辑器内容
const [html, setHtml] = useState('');
// 工具栏配置
const toolbarConfig = {};
// 编辑器配置
const editorConfig = {
placeholder: '请输入大屏横幅...',
MENU_CONF: {
fontSize: {
fontSizeList: [
'10px', '20px', '40px', '60px', '80px', '100px', '150px', '180px', '200px',
]
},
uploadImage: {
async customUpload(file, insertFn) {
// file 即选中的文件
// 自己实现上传，并得到图片 url alt href
//覆盖action 上传之前获取上传地址
let index = file.name.lastIndexOf(".");
let ext = file.name.substr(index + 1);
let fileData = null;
cardAPI.GetCosRequestURL({ directory: "kitchen", fileExtension: ext, method: "PUT" }).then((r) => {
const action = r.allUrl;
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = (e) => {
fileData = e.target.result;
axios.put(action, fileData).then(response => {
if (response.status == 200 || response.statusText == 'OK') {
// 最后插入图片
insertFn(r.seeUrl, r.seeUrl, r.seeUrl);
message.success('上传成功！');
}
});
};
});
// editor 实例
const [editor, setEditor] = useState(null);
// 编辑器内容
const [html, setHtml] = useState('');
// 工具栏配置
const toolbarConfig = {};
// 编辑器配置
const editorConfig = {
placeholder: '请输入大屏横幅...',
MENU_CONF: {
fontSize: {
fontSizeList: [
'10px', '20px', '40px', '60px', '80px', '100px', '150px', '180px', '200px',
]
},
uploadImage: {
async customUpload(file, insertFn) {
// file 即选中的文件
// 自己实现上传，并得到图片 url alt href
//覆盖action 上传之前获取上传地址
let index = file.name.lastIndexOf(".");
let ext = file.name.substr(index + 1);
let fileData = null;
cardAPI.GetCosRequestURL({ directory: "kitchen", fileExtension: ext, method: "PUT" }).then((r) => {
const action = r.allUrl;
const reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = (e) => {
fileData = e.target.result;
axios.put(action, fileData).then(response => {
if (response.status == 200 || response.statusText == 'OK') {
// 最后插入图片
insertFn(r.seeUrl, r.seeUrl, r.seeUrl);
message.success('上传成功！');
}
});
};
});

}
}
}
}
}
}
}
}

// 及时销毁 editor ，重要！
useEffect(() => {
if (editor == null) return;
editor.destroy()
setEditor(null)
setHtml('');
}, [isModalOpen])
// 及时销毁 editor ，重要！
useEffect(() => {
return () => {
if (editor == null) return
editor.destroy()
setEditor(null)
}
}, [editor])

/**
* 点击编辑按钮
* @param {*} record
*/
const onEditTableRow = (record) => {
setCurrentOption(record);
setIsModalOpen(true);
setHtml(record.remaek);
modalForm.setFieldsValue(record);
}
/**
* 点击编辑按钮
* @param {*} record
*/
const onEditTableRow = (record) => {
setCurrentOption(record);
setIsModalOpen(true);
setHtml(record.remaek);
modalForm.setFieldsValue(record);
}

/**
* 点击新建
*/
const onCreateTableRow = () => {
setIsModalOpen(true);
modalForm.resetFields();
}
/**
* 点击新建
*/
const onCreateTableRow = () => {
setIsModalOpen(true);
editor.setHtml('');
setHtml('');
modalForm.resetFields();
}


/**
* 提交表单
*/
const onFinish = async (values) => {
if (values.id) {
values.remaek = html;
const response = await cardAPI.UpdateGateInfo(values);
if (response.statusCode === 200) {
message.success('更新档口成功！');
setIsModalOpen(false);
actionRef.current.reload();
} else {
message.error(response.errors || '更新档口失败');
}
} else {
values.remaek = html;
const response = await cardAPI.AddGate(values);
if (response.statusCode === 200) {
message.success('新增档口成功！');
setIsModalOpen(false);
actionRef.current.reload();
} else {
message.error(response.errors || '新增档口失败');
}
}
}
/**
* 提交表单
*/
const onFinish = async (values) => {
if (values.id) {
values.remaek = html;
const response = await cardAPI.UpdateGateInfo(values);
if (response.statusCode === 200) {
message.success('更新档口成功！');
setIsModalOpen(false);
actionRef.current.reload();
} else {
message.error(response.errors || '更新档口失败');
}
} else {
values.remaek = html;
const response = await cardAPI.AddGate(values);
if (response.statusCode === 200) {
message.success('新增档口成功！');
setIsModalOpen(false);
actionRef.current.reload();
} else {
message.error(response.errors || '新增档口失败');
}
}
}

const columns = [
{
title: '档口名称',
dataIndex: 'name',
ellipsis: true,
},
{
title: '归属门店',
dataIndex: 'storeId',
render: (_, record) => {
const find = storeList.find(item => item.id === record.storeId);
if (find) {
return <div>{find.store_Name}</div>
}
}
},
{
title: '属性',
dataIndex: 'mode',
valueType: 'select',
valueEnum: {
1: {
text: '固定',
status: 'Success',
},
2: {
text: '自由设定',
status: 'Success',
}
},
},
{
title: '金额',
dataIndex: 'price',
},
{
title: '状态',
dataIndex: 'status',
valueType: 'select',
valueEnum: {
0: {
text: '正常',
status: 'Success',
},
1: {
text: '禁用',
status: 'Error',
},
2: {
text: '删除',
status: 'Error',
}
},
},
{
title: '操作',
valueType: 'option',
key: 'option',
render: (text, record, _, action) => [
<a onClick={() => onEditTableRow(record)}>更新</a>
],
},
];
const columns = [
{
title: '档口名称',
dataIndex: 'name',
ellipsis: true,
},
{
title: '归属门店',
dataIndex: 'storeId',
render: (_, record) => {
const find = storeList.find(item => item.id === record.storeId);
if (find) {
return <div>{find.store_Name}</div>
}
}
},
{
title: '属性',
dataIndex: 'mode',
valueType: 'select',
valueEnum: {
1: {
text: '固定',
status: 'Success',
},
2: {
text: '自由设定',
status: 'Success',
}
},
},
{
title: '金额',
dataIndex: 'price',
},
{
title: '状态',
dataIndex: 'status',
valueType: 'select',
valueEnum: {
0: {
text: '正常',
status: 'Success',
},
1: {
text: '禁用',
status: 'Error',
},
2: {
text: '删除',
status: 'Error',
}
},
},
{
title: '操作',
valueType: 'option',
key: 'option',
render: (text, record, _, action) => [
<a onClick={() => onEditTableRow(record)}>更新</a>
],
},
];

/**
* 获取店铺列表
*/
const onFetchStoreList = async () => {
const response = await cardAPI.GetAllStore();
if (response.isSuccess) {
setStoreList(response.data);
setSelectedStore(response.data[0].id);
actionRef.current.reload();
} else {
message.error(response.msg || '获取店铺列表失败');
}
}
/**
* 获取店铺列表
*/
const onFetchStoreList = async () => {
const response = await cardAPI.GetAllStore();
if (response.isSuccess) {
setStoreList(response.data);
setSelectedStore(response.data[0].id);
actionRef.current.reload();
} else {
message.error(response.msg || '获取店铺列表失败');
}
}

useEffect(() => {
onFetchStoreList();
}, []);
useEffect(() => {
onFetchStoreList();
}, []);

return (
<PageContainer>
<div className={styles.member_card_container}>
<ProTable
columns={columns}
actionRef={actionRef}
request={
async () => {
if (selectedStore) {
const response = await cardAPI.GetGateListByStorePage(selectedStore, current, pageSize);
if (response.statusCode === 200) {
return {
data: response.data.data,
success: true,
total: response.data.total
}
}
}
}
}
cardBordered
editable={{
type: 'multiple',
}}
rowKey="id"
search={false}
options={{
setting: {
listsHeight: 400,
},
}}
pagination={{
pageSize: pageSize,
onChange: (page) => setCurrent(page),
}}
dateFormatter="string"
headerTitle="档口管理"
toolBarRender={() => [
<div className={styles.table_search_item}>
<div>
当前门店：
</div>
<Select style={{ width: 300 }} value={selectedStore} onChange={(value) => {
setSelectedStore(value);
actionRef.current.reload();
}}>
{
storeList.map(item => {
return <Option value={item.id} key={item.id}>{item.store_Name}</Option>
})
}
</Select>
</div>,
<Button key="button" icon={<PlusOutlined />} type="primary" onClick={onCreateTableRow}>
新建
</Button>
]}
/>
<Drawer width={1500} title={currentOption.id ? '编辑档口' : '添加档口'} visible={isModalOpen} onClose={() => setIsModalOpen(false)}>
<Form
name="basic"
onFinish={onFinish}
form={modalForm}
labelCol={{ span: 4 }}
>
<Form.Item
label="id"
name="id"
hidden={true}
>
<Input size="large" />
</Form.Item>
return (
<PageContainer>
<div className={styles.member_card_container}>
<ProTable
columns={columns}
actionRef={actionRef}
request={
async () => {
if (selectedStore) {
const response = await cardAPI.GetGateListByStorePage(selectedStore, current, pageSize);
if (response.statusCode === 200) {
return {
data: response.data.data,
success: true,
total: response.data.total
}
}
}
}
}
cardBordered
editable={{
type: 'multiple',
}}
rowKey="id"
search={false}
options={{
setting: {
listsHeight: 400,
},
}}
pagination={{
pageSize: pageSize,
onChange: (page) => setCurrent(page),
}}
dateFormatter="string"
headerTitle="档口管理"
toolBarRender={() => [
<div className={styles.table_search_item}>
<div>
当前门店：
</div>
<Select style={{ width: 300 }} value={selectedStore} onChange={(value) => {
setSelectedStore(value);
actionRef.current.reload();
}}>
{
storeList.map(item => {
return <Option value={item.id} key={item.id}>{item.store_Name}</Option>
})
}
</Select>
</div>,
<Button key="button" icon={<PlusOutlined />} type="primary" onClick={onCreateTableRow}>
新建
</Button>
]}
/>
<Drawer width={1500} title={currentOption.id ? '编辑档口' : '添加档口'} visible={isModalOpen} onClose={() => setIsModalOpen(false)}>
<Form
name="basic"
onFinish={onFinish}
form={modalForm}
labelCol={{ span: 4 }}
>
<Form.Item
label="id"
name="id"
hidden={true}
>
<Input size="large" />
</Form.Item>

<Row>
<Col xs={12} sm={12} md={12} lg={12} xl={12}>
<Form.Item
label="档口名称"
name="name"
rules={[
{
required: true,
message: '请输入档口名称！',
},
]}
>
<Input size="large" />
</Form.Item>
</Col>
<Col xs={12} sm={12} md={12} lg={12} xl={12}>
<Form.Item
label="归属门店"
name="storeId"
rules={[
{
required: true,
message: '请输入归属门店！',
},
]}
>
<Select size="large">
{
storeList.map(store => {
return (
<Select.Option key={store.id} value={store.id}>{store.store_Name}</Select.Option>
)
})
}
</Select>
</Form.Item>
</Col>
<Col xs={12} sm={12} md={12} lg={12} xl={12}>
<Form.Item
label="属性"
name="mode"
rules={[
{
required: true,
message: '请输入选择属性！',
},
]}
>
<Select size="large">
<Select.Option value={1}>固定金额</Select.Option>
<Select.Option value={2}>自由设定</Select.Option>
</Select>
</Form.Item>
</Col>
<Col xs={12} sm={12} md={12} lg={12} xl={12}>
<Row>
<Col xs={12} sm={12} md={12} lg={12} xl={12}>
<Form.Item
label="档口名称"
name="name"
rules={[
{
required: true,
message: '请输入档口名称！',
},
]}
>
<Input size="large" />
</Form.Item>
</Col>
<Col xs={12} sm={12} md={12} lg={12} xl={12}>
<Form.Item
label="归属门店"
name="storeId"
rules={[
{
required: true,
message: '请输入归属门店！',
},
]}
>
<Select size="large">
{
storeList.map(store => {
return (
<Select.Option key={store.id} value={store.id}>{store.store_Name}</Select.Option>
)
})
}
</Select>
</Form.Item>
</Col>
<Col xs={12} sm={12} md={12} lg={12} xl={12}>
<Form.Item
label="属性"
name="mode"
rules={[
{
required: true,
message: '请输入选择属性！',
},
]}
>
<Select size="large">
<Select.Option value={1}>固定金额</Select.Option>
<Select.Option value={2}>自由设定</Select.Option>
</Select>
</Form.Item>
</Col>
<Col xs={12} sm={12} md={12} lg={12} xl={12}>

<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
prevValues.mode !== currentValues.mode
} >
{({ getFieldValue }) =>
(getFieldValue('mode') == '1') ? (
<Form.Item
label="金额"
name="price"
rules={[
{
required: true,
message: '请输入金额！',
},
]}
>
<Input size="large" />
</Form.Item>
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
prevValues.mode !== currentValues.mode
} >
{({ getFieldValue }) =>
(getFieldValue('mode') == '1') ? (
<Form.Item
label="金额"
name="price"
rules={[
{
required: true,
message: '请输入金额！',
},
]}
>
<Input size="large" />
</Form.Item>

) : null
}
</Form.Item>
) : null
}
</Form.Item>

</Col>
<Col xs={12} sm={12} md={12} lg={12} xl={12}>
<Form.Item
label="状态"
name="status"
</Col>
<Col xs={12} sm={12} md={12} lg={12} xl={12}>
<Form.Item
label="状态"
name="status"

>
<Select size="large" defaultValue={1}>
<Option value={0}>正常</Option>
<Option value={1}>禁用</Option>
</Select>
</Form.Item>
</Col>
</Row>
<div style={{ border: '1px solid #ccc', zIndex: 100 }}>
<Toolbar
editor={editor}
defaultConfig={toolbarConfig}
mode="default"
style={{ borderBottom: '1px solid #ccc' }}
/>
<Editor
defaultConfig={editorConfig}
value={html}
onCreated={setEditor}
onChange={editor => setHtml(editor.getHtml())}
mode="default"
style={{ height: '500px', overflowY: 'hidden' }}
/>
</div>
<Form.Item>
<Button type="primary" htmlType="submit" style={{ marginTop: '10px' }}>
确定
</Button>
</Form.Item>
</Form>
</Drawer>
</div>
</PageContainer>
)
>
<Select size="large" defaultValue={1}>
<Option value={0}>正常</Option>
<Option value={1}>禁用</Option>
</Select>
</Form.Item>
</Col>
</Row>
<div style={{ border: '1px solid #ccc', zIndex: 100 }}>
<Toolbar
editor={editor}
defaultConfig={toolbarConfig}
mode="default"
style={{ borderBottom: '1px solid #ccc' }}
/>
<Editor
defaultConfig={editorConfig}
value={html}
onCreated={setEditor}
onChange={editor => setHtml(editor.getHtml())}
mode="default"
style={{ height: '500px', overflowY: 'hidden' }}
/>
</div>
<Form.Item>
<Button type="primary" htmlType="submit" style={{ marginTop: '10px' }}>
确定
</Button>
</Form.Item>
</Form>
</Drawer>
</div>
</PageContainer>
)
}

export default Gate;

Write Preview
Loading…
Cancel
Save