|
@@ -1,564 +0,0 @@
|
|
|
-import React, { Component } from 'react';
|
|
|
-import pathToRegexp from 'path-to-regexp';
|
|
|
-import { connect } from 'dva';
|
|
|
-import { routerRedux } from 'dva/router';
|
|
|
-import { Card, Table, Modal, Popconfirm, Switch, Button, Input, Icon } from 'antd';
|
|
|
-import Selector from '../../../components/AXTableSelector/Selector';
|
|
|
-import FooterToolbar from '../../../components/FooterToolbar';
|
|
|
-import { boolToStatus, renderStatus, statusToBool } from '../../../utils/utils';
|
|
|
-import styles from './ConfigTag.less';
|
|
|
-
|
|
|
-@connect(({ loading, merchant, shelves, resource, configUser, tagType, tag }) => ({
|
|
|
- shelves,
|
|
|
- merchant,
|
|
|
- resource,
|
|
|
- configUser,
|
|
|
- tagType,
|
|
|
- tag,
|
|
|
- loading: loading.models.tagType,
|
|
|
- rLoading: loading.models.resource,
|
|
|
- sLoading: loading.models.shelves,
|
|
|
- mLoading: loading.models.merchant,
|
|
|
-}))
|
|
|
-export default class ConfigTag extends Component {
|
|
|
- state = {
|
|
|
- productSelectorDestroy: true,
|
|
|
- resourceSelectorDestroy: true,
|
|
|
- allTagSelectorDestroy: true,
|
|
|
- productType: 'Course',
|
|
|
- currentEditTagId: '',
|
|
|
- };
|
|
|
- componentDidMount() {
|
|
|
- this.props.dispatch({
|
|
|
- type: 'configUser/fetchUserTags',
|
|
|
- payload: { configUserId: this.getConfigUserId() },
|
|
|
- });
|
|
|
- this.props.dispatch({
|
|
|
- type: 'tagType/fetchTagTypeList',
|
|
|
- payload: {},
|
|
|
- });
|
|
|
- this.props.dispatch({
|
|
|
- type: 'tagType/fetchMerchantPoster',
|
|
|
- payload: { merchantId: this.getConfigUserId() },
|
|
|
- });
|
|
|
- }
|
|
|
- /**
|
|
|
- * 1.从URL中提取configUserId
|
|
|
- * @returns {String}
|
|
|
- */
|
|
|
- getConfigUserId = () => {
|
|
|
- const match = pathToRegexp('/frontend/ConfigUser/tag/:id')
|
|
|
- .exec(this.props.location.pathname);
|
|
|
- return match[1];
|
|
|
- };
|
|
|
- /**
|
|
|
- * 2.终端用户新建标签
|
|
|
- */
|
|
|
- handleTagItemCreate = () => {
|
|
|
- const newData = [...this.props.configUser.userTagLists];
|
|
|
- newData.push({
|
|
|
- id: `new-poster-${newData.length + 1}`,
|
|
|
- isNew: true,
|
|
|
- isEdit: true,
|
|
|
- });
|
|
|
- this.props.dispatch({
|
|
|
- type: 'configUser/fixUserTagLists',
|
|
|
- payload: newData,
|
|
|
- });
|
|
|
- };
|
|
|
- /**
|
|
|
- * 3.删除一跳标签信息
|
|
|
- * @param TagId
|
|
|
- * @param isNew
|
|
|
- */
|
|
|
- handleTagItemDelete = (TagId, isNew) => {
|
|
|
- if (isNew) {
|
|
|
- const originalData = [...this.props.configUser.userTagLists];
|
|
|
- const newData = originalData.filter(data => data.id !== TagId);
|
|
|
- this.props.dispatch({
|
|
|
- type: 'configUser/fixUserTagLists',
|
|
|
- payload: newData,
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
- this.props.dispatch({
|
|
|
- type: 'configUser/deleteConfigUserTagItem',
|
|
|
- payload: TagId,
|
|
|
- });
|
|
|
- }
|
|
|
- /**
|
|
|
- * 4.编辑一条标签
|
|
|
- * @param TagId
|
|
|
- */
|
|
|
- handleTagItemEdit = (TagId) => {
|
|
|
- const newData = [...this.props.configUser.userTagLists];
|
|
|
- for (const index in newData) {
|
|
|
- if (newData[index].id === TagId) {
|
|
|
- newData[index].isEdit = true;
|
|
|
- }
|
|
|
- }
|
|
|
- this.props.dispatch({
|
|
|
- type: 'configUser/fixUserTagLists',
|
|
|
- payload: newData,
|
|
|
- });
|
|
|
- };
|
|
|
- /**
|
|
|
- * 5.根据flag,控制模态框的展现
|
|
|
- * @param flag
|
|
|
- * @param TagId
|
|
|
- */
|
|
|
- handleSelectorModalShow = (flag, TagId) => {
|
|
|
- this.setState({
|
|
|
- [`${flag}SelectorDestroy`]: false,
|
|
|
- currentEditTagId: TagId,
|
|
|
- });
|
|
|
- if (flag === 'product') {
|
|
|
- this.props.dispatch({
|
|
|
- type: 'configUser/fetchTagDetail',
|
|
|
- payload: TagId,
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
- if (flag === 'resource') {
|
|
|
- this.props.dispatch({
|
|
|
- type: 'tagType/fetchTagTypeList',
|
|
|
- payload: {},
|
|
|
- });
|
|
|
- }
|
|
|
- if (flag === 'allTag') {
|
|
|
- this.props.dispatch({
|
|
|
- type: 'tag/fetchTagList',
|
|
|
- });
|
|
|
- }
|
|
|
- };
|
|
|
- /**
|
|
|
- * 6.控制模态框的销毁
|
|
|
- */
|
|
|
- handleSelectorCancel = (flag) => {
|
|
|
- this.setState({ [`${flag}SelectorDestroy`]: true });
|
|
|
- };
|
|
|
- /**
|
|
|
- * 7.模态框内的查询操作 完成
|
|
|
- * @param {String} flag
|
|
|
- * @param {Object} params
|
|
|
- */
|
|
|
- handleSelectorChange = (flag, params) => {
|
|
|
- if (flag === 'product') {
|
|
|
- const { productType } = this.state;
|
|
|
- this.props.dispatch({
|
|
|
- type: `shelves/fetch${productType}ItemList`,
|
|
|
- payload: { ...params, merchantId: this.getConfigUserId() },
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
- if (flag === 'allTag') {
|
|
|
- this.props.dispatch({
|
|
|
- type: 'tag/fetchTagList',
|
|
|
- payload: params,
|
|
|
- });
|
|
|
- }
|
|
|
- if (flag === 'resource') {
|
|
|
- this.props.dispatch({
|
|
|
- type: 'tagType/fetchTagTypeList',
|
|
|
- payload: params,
|
|
|
- });
|
|
|
- }
|
|
|
- };
|
|
|
- /**
|
|
|
- * 8.响应选择完成操作 数据的回显 模态框的处理
|
|
|
- * @param {String} flag
|
|
|
- * @param {Array} rows
|
|
|
- */
|
|
|
- handleSelectorFinish = (flag, rows) => {
|
|
|
- this.setState({ [`${flag}SelectorDestroy`]: true });
|
|
|
- const { currentEditTagId } = this.state;
|
|
|
- const originalData = [...this.props.configUser.userTagLists];
|
|
|
- if (flag !== 'allTag') {
|
|
|
- const newData = originalData.map((data) => {
|
|
|
- if (flag === 'resource' && data.id === currentEditTagId) {
|
|
|
- return { ...data, typeCode: rows[0].code };
|
|
|
- }
|
|
|
- return { ...data };
|
|
|
- });
|
|
|
- this.props.dispatch({
|
|
|
- type: 'configUser/fixUserTagLists',
|
|
|
- payload: newData,
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.props.dispatch({
|
|
|
- type: 'configUser/copyTag',
|
|
|
- payload: {
|
|
|
- userTagId: currentEditTagId,
|
|
|
- tagId: rows[0].id,
|
|
|
- },
|
|
|
- });
|
|
|
- }
|
|
|
- };
|
|
|
- /**
|
|
|
- * 9.修改排序值
|
|
|
- * @param e
|
|
|
- * @param TagId
|
|
|
- */
|
|
|
- handleSortInputChange = (e, TagId) => {
|
|
|
- const originalData = [...this.props.configUser.userTagLists];
|
|
|
- const newData = originalData.map((data) => {
|
|
|
- if (data.id === TagId) {
|
|
|
- return { ...data, sort: parseInt(e.target.value, 10) || 0 };
|
|
|
- }
|
|
|
- return { ...data };
|
|
|
- });
|
|
|
- this.props.dispatch({
|
|
|
- type: 'configUser/fixUserTagLists',
|
|
|
- payload: newData,
|
|
|
- });
|
|
|
- };
|
|
|
- /**
|
|
|
- * 10.修改标签名称
|
|
|
- * @param e
|
|
|
- * @param TagId
|
|
|
- */
|
|
|
- handleNameInputChange = (e, TagId) => {
|
|
|
- const originalData = [...this.props.configUser.userTagLists];
|
|
|
- const newData = originalData.map((data) => {
|
|
|
- if (data.id === TagId) {
|
|
|
- return { ...data, name: e.target.value };
|
|
|
- }
|
|
|
- return { ...data };
|
|
|
- });
|
|
|
- this.props.dispatch({
|
|
|
- type: 'configUser/fixUserTagLists',
|
|
|
- payload: newData,
|
|
|
- });
|
|
|
- };
|
|
|
- /**
|
|
|
- * 11.修改状态
|
|
|
- * @param checked
|
|
|
- * @param TagId
|
|
|
- */
|
|
|
- handleStatusSwitchChange = (checked, TagId) => {
|
|
|
- const originalData = [...this.props.configUser.userTagLists];
|
|
|
- const newData = originalData.map((data) => {
|
|
|
- if (data.id === TagId) {
|
|
|
- return { ...data, status: boolToStatus(checked) };
|
|
|
- }
|
|
|
- return { ...data };
|
|
|
- });
|
|
|
- this.props.dispatch({
|
|
|
- type: 'configUser/fixUserTagLists',
|
|
|
- payload: newData,
|
|
|
- });
|
|
|
- };
|
|
|
- /**
|
|
|
- * 12.提交标签的内容
|
|
|
- * @param TagId
|
|
|
- */
|
|
|
- handleSaveOperation = (TagId) => {
|
|
|
- const originalData = [...this.props.configUser.userTagLists];
|
|
|
- const targetData = originalData.filter(data => data.id === TagId)[0];
|
|
|
- const { id, sort, name, typeCode, status, isNew } = targetData;
|
|
|
- if (isNew) {
|
|
|
- this.props.dispatch({
|
|
|
- type: 'configUser/createConfigUserTagItem',
|
|
|
- payload: {
|
|
|
- name, typeCode, sort, status: boolToStatus(status), uid: this.getConfigUserId(),
|
|
|
- },
|
|
|
- TagId: id,
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
- this.props.dispatch({
|
|
|
- type: 'configUser/updateConfigUserTagItem',
|
|
|
- payload: {
|
|
|
- id, name, typeCode, sort, status: boolToStatus(status), uid: this.getConfigUserId(),
|
|
|
- },
|
|
|
- TagId: id,
|
|
|
- });
|
|
|
- };
|
|
|
- /**
|
|
|
- * 13.返回上一页 finished
|
|
|
- */
|
|
|
- handlePageBack = () => {
|
|
|
- this.props.dispatch(routerRedux.push({
|
|
|
- pathname: '/frontend/ConfigUser/list',
|
|
|
- state: this.props.location.state,
|
|
|
- }));
|
|
|
- };
|
|
|
- render() {
|
|
|
- const { productSelectorDestroy, resourceSelectorDestroy, allTagSelectorDestroy } = this.state;
|
|
|
- const { configUser, tagType, tag, loading } = this.props;
|
|
|
- const { userTagLists } = configUser;
|
|
|
- /* 海报列表格式设定 */
|
|
|
- const userTagColumns = [{
|
|
|
- title: '位置',
|
|
|
- key: 1,
|
|
|
- dataIndex: 'sort',
|
|
|
- width: '10%',
|
|
|
- render: (text, record) => {
|
|
|
- const { id, isEdit } = record;
|
|
|
- if (isEdit) {
|
|
|
- return (
|
|
|
- <Input
|
|
|
- value={text}
|
|
|
- onChange={e => this.handleSortInputChange(e, id)}
|
|
|
- placeholder="必填项"
|
|
|
- style={{ width: 100 }}
|
|
|
- />
|
|
|
- );
|
|
|
- }
|
|
|
- return text;
|
|
|
- },
|
|
|
- align: 'center',
|
|
|
- }, {
|
|
|
- title: '标签名称',
|
|
|
- key: 2,
|
|
|
- dataIndex: 'name',
|
|
|
- width: '15%',
|
|
|
- render: (text, record) => {
|
|
|
- const { id, isEdit } = record;
|
|
|
- if (isEdit) {
|
|
|
- return (
|
|
|
- <Input
|
|
|
- value={text}
|
|
|
- onChange={e => this.handleNameInputChange(e, id)}
|
|
|
- placeholder="必填项"
|
|
|
- style={{ width: 100 }}
|
|
|
- />
|
|
|
- );
|
|
|
- }
|
|
|
- return text;
|
|
|
- },
|
|
|
- align: 'center',
|
|
|
- }, {
|
|
|
- title: '标签类型',
|
|
|
- key: 3,
|
|
|
- dataIndex: 'typeCode',
|
|
|
- width: '15%',
|
|
|
- render: (text, record) => {
|
|
|
- // 将标签类型更换,编辑状态下可更换
|
|
|
- const { id, isNew, isEdit, typeCode = '标签类型选择(必选项)' } = record;
|
|
|
- return (
|
|
|
- <div className={styles.product}>
|
|
|
- {isEdit && (
|
|
|
- <div className={styles.mongolian}>
|
|
|
- <a onClick={() => this.handleSelectorModalShow('resource', id)}>{isNew ? '选择' : '更换'}</a>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- {typeCode}
|
|
|
- </div>
|
|
|
- );
|
|
|
- },
|
|
|
- align: 'center',
|
|
|
- }, {
|
|
|
- title: '标签状态',
|
|
|
- key: 4,
|
|
|
- dataIndex: 'status',
|
|
|
- width: '15%',
|
|
|
- render: (text, record) => {
|
|
|
- const { id, isEdit } = record;
|
|
|
- if (isEdit) {
|
|
|
- return (
|
|
|
- <Switch
|
|
|
- checked={statusToBool(text)}
|
|
|
- checkedChildren="正常"
|
|
|
- unCheckedChildren="删除"
|
|
|
- onChange={checked => this.handleStatusSwitchChange(checked, id)}
|
|
|
- />
|
|
|
- );
|
|
|
- }
|
|
|
- return renderStatus(text);
|
|
|
- },
|
|
|
- align: 'center',
|
|
|
- }, {
|
|
|
- title: '标签关联产品',
|
|
|
- key: 5,
|
|
|
- render: (_, record) => {
|
|
|
- const { id, isEdit } = record;
|
|
|
- if (isEdit) {
|
|
|
- return (
|
|
|
- <div>
|
|
|
- <p>此处暂时无法编辑,只做查看</p>
|
|
|
- </div>
|
|
|
- );
|
|
|
- }
|
|
|
- return (
|
|
|
- <div>
|
|
|
- <a onClick={() => this.handleSelectorModalShow('product', id)}>
|
|
|
- <Icon type="double-right" />查看详情
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- );
|
|
|
- },
|
|
|
- width: '20%',
|
|
|
- align: 'center',
|
|
|
- }, {
|
|
|
- title: '操作',
|
|
|
- key: 6,
|
|
|
- width: '30%',
|
|
|
- render: (_, record) => {
|
|
|
- const { id, isNew, isEdit } = record;
|
|
|
- const getPopconfirmBtn = () => {
|
|
|
- return (
|
|
|
- <Popconfirm
|
|
|
- placement="top"
|
|
|
- title="确定要删除该标签?"
|
|
|
- okText="确定"
|
|
|
- cancelText="取消"
|
|
|
- onConfirm={() => this.handleTagItemDelete(id, isNew)}
|
|
|
- >
|
|
|
- <Button
|
|
|
- size="small"
|
|
|
- className="delBtn"
|
|
|
- >删除
|
|
|
- </Button>
|
|
|
- </Popconfirm>
|
|
|
- );
|
|
|
- };
|
|
|
- if (isEdit) {
|
|
|
- return (
|
|
|
- <div>
|
|
|
- <Button
|
|
|
- size="small"
|
|
|
- className="editBtn"
|
|
|
- onClick={() => this.handleSaveOperation(id)}
|
|
|
- >保存
|
|
|
- </Button>
|
|
|
- {getPopconfirmBtn()}
|
|
|
- <Button
|
|
|
- size="small"
|
|
|
- className="depositBtn"
|
|
|
- onClick={() => this.handleSelectorModalShow('allTag', id)}
|
|
|
- >复制
|
|
|
- </Button>
|
|
|
- </div>
|
|
|
- );
|
|
|
- }
|
|
|
- return (
|
|
|
- <div>
|
|
|
- <Button
|
|
|
- size="small"
|
|
|
- className="editBtn"
|
|
|
- onClick={() => this.handleTagItemEdit(id)}
|
|
|
- >编辑
|
|
|
- </Button>
|
|
|
- {getPopconfirmBtn()}
|
|
|
- <Button
|
|
|
- size="small"
|
|
|
- className="depositBtn"
|
|
|
- onClick={() => this.handleSelectorModalShow('allTag', id)}
|
|
|
- >复制
|
|
|
- </Button>
|
|
|
- </div>
|
|
|
- );
|
|
|
- },
|
|
|
- align: 'right',
|
|
|
- }];
|
|
|
- const getProductModal = () => {
|
|
|
- const columns = [
|
|
|
- {
|
|
|
- title: '产品编号',
|
|
|
- dataIndex: 'code',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '产品名称',
|
|
|
- dataIndex: 'name',
|
|
|
- },
|
|
|
- ];
|
|
|
- const { productList = [] } = this.props.configUser.TagDetails;
|
|
|
- return (
|
|
|
- <Modal
|
|
|
- visible
|
|
|
- width={1100}
|
|
|
- title="关联产品详情"
|
|
|
- footer={null}
|
|
|
- maskClosable={false}
|
|
|
- onCancel={() => this.handleSelectorCancel('product')}
|
|
|
- >
|
|
|
- <Table
|
|
|
- columns={columns}
|
|
|
- dataSource={productList}
|
|
|
- fixedName="Product"
|
|
|
- onCancel={() => this.handleSelectorCancel('product')}
|
|
|
- />
|
|
|
- </Modal>
|
|
|
- );
|
|
|
- };
|
|
|
- /* 标签模态框选择器 */
|
|
|
- const getResourceModal = () => {
|
|
|
- return (
|
|
|
- <Modal
|
|
|
- width={1100}
|
|
|
- footer={null}
|
|
|
- visible
|
|
|
- title="标签类型"
|
|
|
- maskClosable={false}
|
|
|
- onCancel={() => this.handleSelectorCancel('resource')}
|
|
|
- >
|
|
|
- <Selector
|
|
|
- multiple={false}
|
|
|
- loading={loading}
|
|
|
- selectorName="TagType"
|
|
|
- list={tagType.list}
|
|
|
- pageNo={tagType.pageNo}
|
|
|
- pageSize={tagType.pageSize}
|
|
|
- totalSize={tagType.totalSize}
|
|
|
- onCancel={() => this.handleSelectorCancel('resource')}
|
|
|
- onChange={data => this.handleSelectorChange('resource', data)}
|
|
|
- onFinish={rows => this.handleSelectorFinish('resource', rows)}
|
|
|
- />
|
|
|
- </Modal>
|
|
|
- );
|
|
|
- };
|
|
|
- /* 选择标签的对应的模态框 */
|
|
|
- const getAllTagModal = () => {
|
|
|
- return (
|
|
|
- <Modal
|
|
|
- width={1100}
|
|
|
- footer={null}
|
|
|
- visible
|
|
|
- title="可选择的标签"
|
|
|
- maskClosable={false}
|
|
|
- onCancel={() => this.handleSelectorCancel('allTag')}
|
|
|
- >
|
|
|
- <Selector
|
|
|
- multiple={false}
|
|
|
- loading={loading}
|
|
|
- selectorName="allTag"
|
|
|
- list={tag.list}
|
|
|
- pageNo={tag.pageNo}
|
|
|
- pageSize={tag.pageSize}
|
|
|
- totalSize={tag.totalSize}
|
|
|
- onCancel={() => this.handleSelectorCancel('allTag')}
|
|
|
- onChange={data => this.handleSelectorChange('allTag', data)}
|
|
|
- onFinish={rows => this.handleSelectorFinish('allTag', rows)}
|
|
|
- />
|
|
|
- </Modal>
|
|
|
- );
|
|
|
- };
|
|
|
- return (
|
|
|
- <div>
|
|
|
- <Card style={{ marginBottom: 70 }}>
|
|
|
- <Table
|
|
|
- pagination={false}
|
|
|
- dataSource={userTagLists}
|
|
|
- columns={userTagColumns}
|
|
|
- rowKey={record => record.id}
|
|
|
- className={styles.posterTable}
|
|
|
- />
|
|
|
- <Button
|
|
|
- type="dashed"
|
|
|
- icon="plus"
|
|
|
- style={{ width: '100%', marginTop: 16, marginBottom: 8 }}
|
|
|
- onClick={this.handleTagItemCreate}
|
|
|
- >新建
|
|
|
- </Button>
|
|
|
- {!resourceSelectorDestroy && getResourceModal()}
|
|
|
- {!productSelectorDestroy && getProductModal()}
|
|
|
- {!allTagSelectorDestroy && getAllTagModal()}
|
|
|
- </Card>
|
|
|
- <FooterToolbar style={{ width: '100%' }}>
|
|
|
- <Button type="primary" onClick={this.handlePageBack}>返回上一页</Button>
|
|
|
- </FooterToolbar>
|
|
|
- </div>
|
|
|
- );
|
|
|
- }
|
|
|
-}
|