Skip to content

M
merchant-manage-ui
Commit 54561eaa authored by beisir's avatar beisir
Browse files
Options

Merge branch 'feature/service-product' of... 

Merge branch 'feature/service-product' of git.quantgroup.cn:ui/merchant-manage-ui into feature/service-product
parents caa5bb44 5da27ef2
Show whitespace changes
Inline Side-by-side
Showing with 179 additions and 31 deletions
src/pages/chainStoreManage/components/storeModal.jsx
View file @ 54561eaa
...@@ -187,6 +187,7 @@ const StoreModal = props => { ...@@ -187,6 +187,7 @@ const StoreModal = props => {
getLazyAddr(info); getLazyAddr(info);
} else { } else {
getAreaAddr(0); getAreaAddr(0);
setFormData({});
} }
} }
}, [visible]); }, [visible]);
...@@ -247,7 +248,13 @@ const StoreModal = props => { ...@@ -247,7 +248,13 @@ const StoreModal = props => {
rules: [{ required: true, type: 'array', message: '请选择店铺区域!' }], rules: [{ required: true, type: 'array', message: '请选择店铺区域!' }],
initialValue: formData.addr, initialValue: formData.addr,
})( })(
<Cascader ref={divDom} options={areaAddr} loadData={e => loadData(e)} changeOnSelect />, <Cascader
ref={divDom}
options={areaAddr}
placeholder="请选择店铺区域"
loadData={e => loadData(e)}
changeOnSelect
/>,
)} )}
</FormItem> </FormItem>
<FormItem label="详细地址"> <FormItem label="详细地址">
......
src/pages/chainStoreManage/data.js
View file @ 54561eaa
// import { Tag, Badge } from 'antd';
import React from 'react';
export const weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六', '周日']; export const weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六', '周日'];
export const stateDesc = { 1: '启用', 0: '禁用' }; export const stateDesc = { 1: '启用', 0: '禁用' };
......
src/pages/chainStoreManage/index.jsx
View file @ 54561eaa
import React, { useState, useRef } from 'react'; import React, { useState, useRef, useEffect } from 'react';
import { notification, Button, Modal, Statistic } from 'antd'; import { notification, Button, Form, Input, Cascader, Col, Row, Table, Pagination } from 'antd';
import ProTable from '@ant-design/pro-table';
import _ from 'lodash'; import _ from 'lodash';
import { searchList, apiEnableStore } from './services'; import { searchList, apiEnableStore, apiAddrArea } from './services';
import { stateDesc, weeks } from './data'; import { stateDesc, weeks, layout } from './data';
import StoreModal from './components/storeModal'; import StoreModal from './components/storeModal';
import style from './style.less';
export default () => { export default () => {
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const [storeInfo, setStoreInfo] = useState({}); const [storeInfo, setStoreInfo] = useState({});
const [areaAddr, setAreaAddr] = useState([]);
const [dataList, setDataList] = useState([]);
const [pageNo, setPageNo] = useState(1);
const [totalNum, setTotalNum] = useState(0);
const [pageSize, setPageSize] = useState(20);
const table = useRef(); const table = useRef();
const refSearch = useRef();
const divDom = useRef();
const onEnableState = async ({ id, state }) => { const onEnableState = async ({ id, state }) => {
const enable = +state === 1 ? 0 : 1; const enable = +state === 1 ? 0 : 1;
const res = await apiEnableStore({ id, state: enable }); const res = await apiEnableStore({ id, state: enable });
...@@ -34,6 +41,92 @@ export default () => { ...@@ -34,6 +41,92 @@ export default () => {
} }
setVisible(false); setVisible(false);
}; };
// 获取市区街道
const loadData = async selectedOptions => {
const targetOption = selectedOptions[selectedOptions.length - 1];
targetOption.loading = true;
const res = await apiAddrArea({
parentId: targetOption.value,
});
if (res) {
const children = res.map(item => ({
isLeaf: +item.addrLevel === 4,
loading: false,
label: item.addrName,
value: item.addrId,
}));
targetOption.loading = false;
if (children.length > 0) {
targetOption.children = children;
} else {
targetOption.isLeaf = true;
if (selectedOptions.length === 3) {
divDom.current.blur();
}
}
setAreaAddr([...areaAddr]);
}
};
const getAreaAddr = async id => {
const params = {};
if (id) {
params.parentId = id;
}
const res = await apiAddrArea(params);
if (res) {
const arr = res.map(item => ({
isLeaf: false,
loading: false,
label: item.addrName,
value: item.addrId,
}));
setAreaAddr(arr);
return arr;
}
return [];
};
const getList = async (params = {}) => {
const res = await searchList(Object.assign({ current: pageNo, pageSize }, params));
if (res && res.data && res.data.length) {
setDataList(res.data);
} else {
setDataList([]);
}
setTotalNum(res.total);
};
// 搜索
const onSearch = async val => {
const params = {};
if (val.name) {
params.name = val.name;
}
if (val.addr && val.addr.length) {
const ids = ['provinceId', 'cityId', 'countyId', 'townId'];
val.addr.forEach((item, i) => {
params[ids[i]] = item;
});
}
getList(params);
};
const onReset = () => {
if (refSearch.current && refSearch.current.resetFields) {
refSearch.current.resetFields();
}
};
const onPageChange = (e, size) => {
setPageNo(e);
setPageSize(size);
};
useEffect(() => {
getList();
getAreaAddr();
}, []);
const columns = [ const columns = [
{ {
title: '门店名称', title: '门店名称',
...@@ -55,12 +148,12 @@ export default () => { ...@@ -55,12 +148,12 @@ export default () => {
<div> <div>
<div> <div>
{businessHours.weeks.map(item => ( {businessHours.weeks.map(item => (
<span>{weeks[item]}</span> <span key={item}>{weeks[item]}</span>
))} ))}
</div> </div>
<div> <div>
{businessHours.hoursItems.map(item => ( {businessHours.hoursItems.map(item => (
<div> <div key={item.begin}>
<span>{item.begin}</span>-<span>{item.end}</span> <span>{item.begin}</span>-<span>{item.end}</span>
</div> </div>
))} ))}
...@@ -72,6 +165,7 @@ export default () => { ...@@ -72,6 +165,7 @@ export default () => {
title: '地区', title: '地区',
dataIndex: 'addr', dataIndex: 'addr',
width: 200, width: 200,
hideInSearch: true,
render: (addr, r) => ( render: (addr, r) => (
<span>{`${r.provinceName}${r.cityName}${r.countyName}${r.townName || ''}`}</span> <span>{`${r.provinceName}${r.cityName}${r.countyName}${r.townName || ''}`}</span>
), ),
...@@ -109,10 +203,10 @@ export default () => { ...@@ -109,10 +203,10 @@ export default () => {
width: 170, width: 170,
fixed: 'right', fixed: 'right',
render: (val, r) => [ render: (val, r) => [
<Button onClick={() => onEnableState(r)} type="primary"> <Button key="enable1" onClick={() => onEnableState(r)} type="primary">
{+r.state ? '禁用' : '启用'} {+r.state ? '禁用' : '启用'}
</Button>, </Button>,
<Button style={{ marginLeft: '10px' }} onClick={() => onShowInfo(r)}> <Button key="seek" style={{ marginLeft: '10px' }} onClick={() => onShowInfo(r)}>
查看 查看
</Button>, </Button>,
], ],
...@@ -120,27 +214,62 @@ export default () => { ...@@ -120,27 +214,62 @@ export default () => {
]; ];
return ( return (
<div> <div>
<ProTable <div className={style.serachForm}>
columns={columns} <Form {...layout} ref={refSearch} onFinish={e => onSearch(e)} name="formData">
request={params => searchList(params, 1)} <Row gutter={24}>
rowKey={r => r.serviceNo} <Col span={8}>
pagination={{ <Form.Item label="门店名称" name="name">
pagesSize: 20, <Input placeholder="请输入门店名称" allowClear maxLength={20} />
}} </Form.Item>
</Col>
<Col span={8}>
<Form.Item label="地区" name="addr">
<Cascader
ref={divDom}
options={areaAddr}
loadData={e => loadData(e)}
changeOnSelect
/>
</Form.Item>
</Col>
<Col span={8}>
<Button type="primary" htmlType="submit" size="middle">
搜索
</Button>
<Button size="middle" className={style.searchBtn} onClick={() => onReset()}>
重置
</Button>
<Button type="primary" size="middle" onClick={() => onCreate()}>
新建
</Button>
</Col>
</Row>
</Form>
</div>
<Table
dataSource={dataList}
bordered bordered
actionRef={table} columns={columns}
rowKey={record => record.id}
pagination={false}
// className={styles.tabletop}
scroll={{ x: '100%' }} scroll={{ x: '100%' }}
search={{ // rowSelection={rowSelection}
collapsed: false,
collapseRender: () => null,
}}
headerTitle="连锁门店管理"
toolBarRender={() => [
<Button key="button" type="primary" onClick={() => onCreate()}>
新建
</Button>,
]}
/> />
{dataList && dataList.length && (
<div className={style.pageBox}>
<Pagination
style={{ marginBottom: 10 }}
onChange={onPageChange}
total={totalNum}
showTotal={total => `共${total}条`}
current={pageNo}
pageSize={pageSize}
showSizeChanger
onShowSizeChange={onPageChange}
/>
</div>
)}
<StoreModal visible={visible} onCancel={closeModal} formInfo={storeInfo} /> <StoreModal visible={visible} onCancel={closeModal} formInfo={storeInfo} />
</div> </div>
); );
......
src/pages/chainStoreManage/style.less 0 → 100644
View file @ 54561eaa
.serachForm {
margin-bottom: 20px;
padding: 20px 50px 0 10px;
background-color: #fff;
}
.searchBtn {
margin: 0 10px;
}
.pageBox {
padding: 20px 20px 15px;
text-align: right;
background-color: #fff;
border: 1px solid #f0f0f0;
border-top: 0;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment