|
@@ -0,0 +1,184 @@
|
|
|
+import React, { PureComponent } from 'react';
|
|
|
+import { routerRedux } from 'dva/router';
|
|
|
+import queryString from 'query-string';
|
|
|
+import { connect } from 'dva';
|
|
|
+import { Spin, Badge, Table, Card, Form, Input, Icon, Button, Select } from 'antd';
|
|
|
+import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
|
|
|
+import TagSortModal from './modal';
|
|
|
+import { Codes, statuses, tagType } from '../../../utils/config';
|
|
|
+
|
|
|
+@Form.create()
|
|
|
+@connect(state => ({ tagTypeDetail: state.tagTypeDetail }))
|
|
|
+export default class TagTypeDetail extends PureComponent {
|
|
|
+ handleModalShow = () => {
|
|
|
+ const { dispatch } = this.props;
|
|
|
+ dispatch({ type: 'tagTypeDetail/showModal' });
|
|
|
+ }
|
|
|
+
|
|
|
+ handleModalCancel = () => {
|
|
|
+ const { dispatch } = this.props;
|
|
|
+ dispatch({ type: 'tagTypeDetail/hideModal' });
|
|
|
+ }
|
|
|
+
|
|
|
+ handleModalOk = (data) => {
|
|
|
+ const { dispatch } = this.props;
|
|
|
+ dispatch({
|
|
|
+ type: 'tagTypeDetail/saveSortResult',
|
|
|
+ payload: { tagList: data }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ handlePageSubmit = (e) => {
|
|
|
+ e.preventDefault()
|
|
|
+ const {
|
|
|
+ dispatch,
|
|
|
+ form: {
|
|
|
+ validateFields,
|
|
|
+ getFieldsValue,
|
|
|
+ },
|
|
|
+ tagTypeDetail: {
|
|
|
+ operType,
|
|
|
+ currentItem,
|
|
|
+ filters,
|
|
|
+ }
|
|
|
+ } = this.props;
|
|
|
+ validateFields((errors) => {
|
|
|
+ if (errors) return;
|
|
|
+
|
|
|
+ let data = {};
|
|
|
+ if (operType == 'create') {
|
|
|
+ data = {
|
|
|
+ ...getFieldsValue(),
|
|
|
+ status: Codes.CODE_NORMAL
|
|
|
+ };
|
|
|
+ } else if (operType == 'update') {
|
|
|
+ const { id, status, name, code, tagList } = currentItem;
|
|
|
+ data = {
|
|
|
+ id,
|
|
|
+ status,
|
|
|
+ name,
|
|
|
+ code,
|
|
|
+ tagList: (tagList || []).map(item => item.id),
|
|
|
+ ...getFieldsValue(),
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ dispatch({
|
|
|
+ type: `tagTypeDetail/${operType}`,
|
|
|
+ payload: data,
|
|
|
+ callback: () => {
|
|
|
+ dispatch({ type: 'tagTypeDetail/initState' });
|
|
|
+ dispatch(
|
|
|
+ routerRedux.push({
|
|
|
+ pathname: '/tag/tagType',
|
|
|
+ search: queryString.stringify(filters),
|
|
|
+ })
|
|
|
+ );
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ handlePageCancel = () => {
|
|
|
+ const { dispatch, tagTypeDetail: { filters } } = this.props;
|
|
|
+ dispatch({ type: 'tagTypeDetail/initState' });
|
|
|
+ dispatch(
|
|
|
+ routerRedux.push({
|
|
|
+ pathname: '/tag/tagType',
|
|
|
+ search: queryString.stringify(filters),
|
|
|
+ })
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ const { dispatch, form, tagTypeDetail } = this.props;
|
|
|
+ const { itemLoading, currentItem, filters, modalVisible, operType } = tagTypeDetail;
|
|
|
+ const { tagList, name, code } = currentItem;
|
|
|
+ const { getFieldDecorator } = form;
|
|
|
+
|
|
|
+ const tagTableColumns = [{
|
|
|
+ title: '位置',
|
|
|
+ dataIndex: 'sort',
|
|
|
+ key: 'sort',
|
|
|
+ render: (text, record, index) => index + 1,
|
|
|
+ },{
|
|
|
+ title: '标签名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ key: 'name',
|
|
|
+ },{
|
|
|
+ title: '标签状态',
|
|
|
+ dataIndex: 'status',
|
|
|
+ key: 'status',
|
|
|
+ render: (text, record) => {
|
|
|
+ const statusMap = {[Codes.CODE_NORMAL]: 'success', [Codes.CODE_DELETE]: 'error'};
|
|
|
+ return (<Badge status={statusMap[record.status]} text={statuses[record.status]} />);
|
|
|
+ },
|
|
|
+ }];
|
|
|
+
|
|
|
+ const formItemLayout = {
|
|
|
+ labelCol: {
|
|
|
+ span: 7,
|
|
|
+ },
|
|
|
+ wrapperCol: {
|
|
|
+ span: 12,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ const submitFormLayout = {
|
|
|
+ wrapperCol: {
|
|
|
+ xs: { span: 24, offset: 0 },
|
|
|
+ sm: { span: 10, offset: 7 },
|
|
|
+ },
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <PageHeaderLayout>
|
|
|
+ <Spin spinning={itemLoading}>
|
|
|
+ <Card>
|
|
|
+ <Form layout="horizontal" onSubmit={this.handlePageSubmit}>
|
|
|
+ <Form.Item label="标签类型编号:" hasFeedback {...formItemLayout}>
|
|
|
+ {getFieldDecorator('code', {
|
|
|
+ rules: [{ required: true, type: 'string', message: "编号为必填项!" }],
|
|
|
+ initialValue: code,
|
|
|
+ })(
|
|
|
+ <Input disabled={operType === 'update' ? true : false} placeholder="请输入" />
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="标签类型名称:" hasFeedback {...formItemLayout}>
|
|
|
+ {getFieldDecorator('name', {
|
|
|
+ rules: [{ required: true, type: 'string', message: "名称为必填项!" }],
|
|
|
+ initialValue: name,
|
|
|
+ })(<Input placeholder="请输入" />)}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="标签排序" {...formItemLayout}>
|
|
|
+ <Button onClick={this.handleModalShow} disabled={!tagList || !tagList.length} type="primary" size="small" icon="edit">排序</Button>
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item wrapperCol={{ offset: 7, span: 12 }}>
|
|
|
+ <Table
|
|
|
+ locale={{
|
|
|
+ emptyText: <span style={{ color: "#C6D0D6" }}> <Icon type="frown-o"/>该标签类型下不包含任何标签,无法排序,请先去关联标签吧!</span>
|
|
|
+ }}
|
|
|
+ dataSource={tagList || []}
|
|
|
+ columns={tagTableColumns}
|
|
|
+ rowKey={record => record.id}
|
|
|
+ bordered
|
|
|
+ pagination={false}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item {...submitFormLayout} style={{ marginTop: 32 }}>
|
|
|
+ <Button onClick={this.handlePageCancel}>取消</Button>
|
|
|
+ <Button type="primary" style={{ marginLeft: 35 }} htmlType="submit">提交</Button>
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ <TagSortModal
|
|
|
+ tagList={tagList || []}
|
|
|
+ rowKeyName="id"
|
|
|
+ modalVisible={modalVisible}
|
|
|
+ onCancel={this.handleModalCancel}
|
|
|
+ onOk={this.handleModalOk}
|
|
|
+ />
|
|
|
+ </Card>
|
|
|
+ </Spin>
|
|
|
+ </PageHeaderLayout>
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|