增加推荐位配置管理模块

src/common/menu.js

@@ -79,6 +79,9 @@ const menuData = () => {
       }, {
         name: '侧边栏目',
         path: 'tag',
+      }, {
+        name: '推荐位配置',
+        path: 'recommend',
       }],
     }, {
       name: '交易管理',

src/common/router.js

@@ -282,6 +282,15 @@ export const getRouterData = (app) => {
     '/frontend/tag/edit/:id': {
       component: dynamicWrapper(app, ['tag', 'tagGroup', 'shelves'], () => import('../routes/Frontend/Tag/TagCreate')),
     },
+    '/frontend/recommend': {
+      component: dynamicWrapper(app, ['merchant'], () => import('../routes/Frontend/Recommend')),
+    },
+    '/frontend/recommend/list': {
+      component: dynamicWrapper(app, ['merchant'], () => import('../routes/Frontend/Recommend/RecommendList')),
+    },
+    '/frontend/recommend/edit/:id': {
+      component: dynamicWrapper(app, ['merchant', 'shelves'], () => import('../routes/Frontend/Recommend/RecommendEdit')),
+    },
     // 交易管理相关路由注册
     '/trade/shopcart': {
       component: dynamicWrapper(app, [], () => import('../routes/Trade/ShopCart')),

src/models/merchant.js

@@ -27,7 +27,6 @@ export default {
     *fetchMerchantList({ payload }, { call, put }) {
       const response = yield call(queryMerchantList, payload);
       if (response.success) {
-        message.success('加载商户列表成功');
         yield put({
           type: 'querySuccess',
           payload: {
@@ -42,7 +41,6 @@ export default {
     *fetchMerchantItem({ payload }, { call, put }) {
       const response = yield call(queryMerchantItem, payload);
       if (response.success) {
-        message.success('加载商户详情成功');
         yield put({
           type: 'querySuccess',
           payload: {
@@ -107,7 +105,7 @@ export default {
       if (response.success) {
         message.success('推荐位列表更新成功');
         yield put(routerRedux.push({
-          pathname: '/merchant/list',
+          pathname: '/frontend/recommend/list',
           state: states,
         }));
       }
@@ -121,6 +119,12 @@ export default {
         ...action.payload,
       };
     },
+    fixRecommendList(state, action) {
+      return {
+        ...state,
+        recommendList: action.payload,
+      };
+    },
     cleanItemState(state) {
       return {
         ...state,

src/routes/Frontend/Recommend/RecommendEdit.js

@@ -0,0 +1,148 @@
+import React, { Component } from 'react';
+import pathToRegexp from 'path-to-regexp';
+import { connect } from 'dva';
+import { routerRedux } from 'dva/router';
+import { Card, Modal, Button } from 'antd';
+import RBDragSortTable from '../../../components/RBDragSortTable';
+import Selector from '../../../components/RBTableSelector/Selector';
+import FooterToolbar from '../../../components/FooterToolbar/index';
+
+@connect(({ loading, merchant, shelves }) => ({
+  shelves,
+  merchant,
+  sLoading: loading.models.product,
+  submitting: loading.models.merchant,
+}))
+export default class RecommendEditPage extends Component {
+  state = {
+    productSelectorDestroy: true,
+  };
+  componentDidMount() {
+    this.props.dispatch({
+      type: 'merchant/queryMerchantRecommend',
+      payload: { merchantId: this.getMerchantId() },
+    });
+  }
+  getMerchantId = () => {
+    const match = pathToRegexp('/frontend/recommend/edit/:id')
+      .exec(this.props.location.pathname);
+    return match[1];
+  }
+  handleSelectorModalShow = () => {
+    this.setState({ productSelectorDestroy: false });
+    this.props.dispatch({
+      type: 'shelves/fetchCourseItemList',
+      payload: { merchantId: this.getMerchantId() },
+    });
+  }
+  handleSelectorChange = (params) => {
+    this.props.dispatch({
+      type: 'shelves/fetchCourseItemList',
+      payload: params,
+    });
+  }
+  handleSelectorFinish = (rows) => {
+    this.setState({ productSelectorDestroy: true });
+    this.props.dispatch({
+      type: 'merchant/fixRecommendList',
+      payload: rows,
+    });
+  }
+  handleSelectorCancel = () => {
+    this.setState({ productSelectorDestroy: true });
+  }
+  handleDragSortTableChange = (rows) => {
+    this.props.dispatch({
+      type: 'merchant/fixRecommendList',
+      payload: rows,
+    });
+  }
+  handlePageBack = () => {
+    this.props.dispatch(routerRedux.push({
+      pathname: '/frontend/recommend',
+      state: this.props.location.state,
+    }));
+  }
+  handlePageSubmit = () => {
+    const { merchant } = this.props;
+    const { recommendList } = merchant;
+    const idList = recommendList.map(item => item.pid);
+    this.props.dispatch({
+      type: 'merchant/updateMerchantRecommend',
+      payload: {
+        idList,
+        merchantId: this.getMerchantId(),
+      },
+    });
+  }
+
+  render() {
+    const { productSelectorDestroy } = this.state;
+    const { merchant, shelves, sLoading, submitting } = this.props;
+    const { recommendList } = merchant;
+    const productColumns = [{
+      title: '课程编号',
+      key: 1,
+      dataIndex: 'code',
+      width: '40%',
+    }, {
+      title: '课程名称',
+      key: 2,
+      dataIndex: 'name',
+    }];
+    const getProductModal = () => {
+      return (
+        <Modal
+          visible
+          width={1100}
+          footer={null}
+          title="课程资源"
+          maskClosable={false}
+          onCancel={this.handleSelectorCancel}
+        >
+          <Selector
+            multiple
+            loading={sLoading}
+            selectorName="Course"
+            selectedRows={recommendList}
+            list={shelves.list}
+            pageNo={shelves.pageNo}
+            pageSize={shelves.pageSize}
+            totalSize={shelves.totalSize}
+            onCancel={this.handleSelectorCancel}
+            onChange={this.handleSelectorChange}
+            onFinish={this.handleSelectorFinish}
+          />
+        </Modal>
+      );
+    };
+    return (
+      <div>
+        <Card
+          title={<a onClick={this.handleSelectorModalShow}>选择课程</a>}
+          style={{ marginBottom: 70 }}
+        >
+          <RBDragSortTable
+            columns={productColumns}
+            data={recommendList}
+            onChange={this.handleDragSortTableChange}
+          />
+          {!productSelectorDestroy && getProductModal()}
+        </Card>
+        <FooterToolbar style={{ width: '100%' }}>
+          <Button
+            onClick={this.handlePageBack}
+            style={{ marginRight: 10 }}
+          >取消
+          </Button>
+          <Button
+            type="primary"
+            loading={submitting}
+            onClick={this.handlePageSubmit}
+          >提交
+          </Button>
+        </FooterToolbar>
+      </div>
+    );
+  }
+}

src/routes/Frontend/Recommend/RecommendList.js

@@ -0,0 +1,146 @@
+import React, { Component } from 'react';
+import moment from 'moment';
+import { connect } from 'dva';
+import { routerRedux } from 'dva/router';
+import { Card, Button, message } from 'antd';
+import { StandardTableList } from '../../../components/RBList';
+import { renderStatus, renderCategory, addRowKey } from '../../../utils/utils';
+
+const Message = message;
+
+@connect(({ loading, merchant }) => ({
+  merchant,
+  loading: loading.models.merchant,
+}))
+export default class MerchantListPage extends Component {
+  constructor(props) {
+    super(props);
+    const { state } = props.location;
+    this.state = {
+      UIParams: (state || {}).UIParams, // 组件的状态参数
+      Queryers: (state || {}).Queryers, // 查询的条件参数
+    };
+  }
+  componentDidMount() {
+    this.props.dispatch({
+      type: 'merchant/fetchMerchantList',
+      payload: { ...this.state.Queryers },
+    });
+  }
+  handleEditRecommend = ({ id }) => {
+    this.props.dispatch(routerRedux.push({
+      pathname: `/frontend/recommend/edit/${id}`,
+      state: this.state,
+    }));
+  }
+  handleFilterOperation = (params, states) => {
+    this.props.dispatch({
+      type: 'merchant/fetchMerchantList',
+      payload: params,
+    });
+    this.setState({
+      UIParams: states,
+      Queryers: params,
+    });
+  }
+  handleBatchOperation = () => {
+    Message.info('暂不支持批量操作!');
+  }
+
+  render() {
+    const { loading, merchant } = this.props;
+    const { list, totalSize, pageSize, pageNo } = merchant;
+
+    const renderOperation = (item) => {
+      return (
+        <div>
+          <Button
+            type="primary"
+            size="small"
+            onClick={() => this.handleEditRecommend(item)}
+          >修改推荐位
+          </Button>
+        </div>
+      );
+    };
+
+    const batchActions = [{
+      key: 'modify',
+      name: '批量修改',
+    }];
+    const basicSearch = {
+      keys: [{
+        name: '商户编号',
+        field: 'code',
+      }, {
+        name: '商户名称',
+        field: 'name',
+      }],
+    };
+    const pagination = {
+      pageNo,
+      pageSize,
+      totalSize,
+    };
+    const columns = [{
+      title: '商户编号',
+      key: 1,
+      dataIndex: 'code',
+      width: '16%',
+    }, {
+      title: '商户名称',
+      key: 2,
+      dataIndex: 'name',
+      width: '18%',
+    }, {
+      title: '商户简称',
+      key: 3,
+      dataIndex: 'simple',
+      width: '16%',
+    }, {
+      title: '商户类型',
+      key: 4,
+      dataIndex: 'domain',
+      render: text => renderCategory(text),
+      width: '12%',
+    }, {
+      title: '状态',
+      key: 5,
+      dataIndex: 'status',
+      render: text => renderStatus(text),
+      width: '12%',
+    }, {
+      title: '更新时间',
+      key: 6,
+      dataIndex: 'gmtModified',
+      render: text => moment(text).format('YYYY-MM-DD HH:mm:ss'),
+      width: '16%',
+    }, {
+      title: '操作',
+      key: 7,
+      dataIndex: 'operation',
+      render: (_, record) => renderOperation(record),
+      width: '10%',
+      align: 'right',
+    }];
+    return (
+      <Card>
+        <StandardTableList
+          columns={columns}
+          loading={loading}
+          dataSource={addRowKey(list)}
+          header={{
+            basicSearch,
+            onFilterClick: this.handleFilterOperation,
+          }}
+          footer={{
+            pagination,
+            batchActions,
+            onBatchClick: this.handleBatchOperation,
+          }}
+          keepUIState={{ ...this.state.UIParams }}
+        />
+      </Card>
+    );
+  }
+}

src/routes/Frontend/Recommend/index.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import { Redirect, Route, Switch } from 'dva/router';
+import { connect } from 'dva';
+import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
+import { getRoutes } from '../../../utils/utils';
+
+@connect()
+export default class Recommend extends Component {
+  render() {
+    const { match, routerData } = this.props;
+    const routes = getRoutes(match.path, routerData);
+
+    return (
+      <PageHeaderLayout>
+        <Switch>
+          {
+            routes.map(item =>
+              (
+                <Route
+                  key={item.key}
+                  path={item.path}
+                  component={item.component}
+                  exact={item.exact}
+                />
+              )
+            )
+          }
+          <Redirect exact from="/frontend/recommend" to="/frontend/recommend/list" />
+        </Switch>
+      </PageHeaderLayout>
+    );
+  }
+}

src/services/merchant.js

@@ -52,7 +52,7 @@ export async function queryMerchantRecommend({ merchantId }) {
 export async function updateMerchantRecommend({ merchantId, idList }) {
   const options = {
     method: 'PUT',
-    body: { idList },
+    body: idList,
   };
   return request(`${api.recommend}/${merchantId}`, options);
 }