tuonina преди 5 години
родител
ревизия
acd6580116

+ 1 - 0
.gitignore

@@ -1,5 +1,6 @@
 # Logs
 logs
+.idea/
 *.log
 npm-debug.log*
 yarn-debug.log*

+ 0 - 28
.idea/codeStyles/Project.xml

@@ -1,28 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <code_scheme name="Project" version="173">
-    <JSCodeStyleSettings version="0">
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="USE_DOUBLE_QUOTES" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </JSCodeStyleSettings>
-    <TypeScriptCodeStyleSettings version="0">
-      <option name="FORCE_SEMICOLON_STYLE" value="true" />
-      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
-      <option name="USE_DOUBLE_QUOTES" value="false" />
-      <option name="FORCE_QUOTE_STYlE" value="true" />
-      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
-      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
-      <option name="SPACES_WITHIN_IMPORTS" value="true" />
-    </TypeScriptCodeStyleSettings>
-    <codeStyleSettings language="JavaScript">
-      <option name="SOFT_MARGINS" value="100" />
-    </codeStyleSettings>
-    <codeStyleSettings language="TypeScript">
-      <option name="SOFT_MARGINS" value="100" />
-    </codeStyleSettings>
-  </code_scheme>
-</component>

+ 0 - 5
.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
-  </state>
-</component>

+ 0 - 9
.idea/inspectionProfiles/Project_Default.xml

@@ -1,9 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-    <inspection_tool class="RequiredAttributes" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="myAdditionalRequiredHtmlAttributes" value="align,htmlType" />
-    </inspection_tool>
-  </profile>
-</component>

+ 0 - 6
.idea/misc.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="JavaScriptSettings">
-    <option name="languageLevel" value="JSX" />
-  </component>
-</project>

+ 0 - 8
.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/tuonq-admin.iml" filepath="$PROJECT_DIR$/.idea/tuonq-admin.iml" />
-    </modules>
-  </component>
-</project>

+ 0 - 12
.idea/tuonq-admin.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

+ 0 - 6
.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>

+ 0 - 96
.idea/workspace.xml

@@ -1,96 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ChangeListManager">
-    <list default="true" id="b7e901bb-e3ab-40ed-88b1-9826ce061ad5" name="Default Changelist" comment="">
-      <change beforePath="$PROJECT_DIR$/.idea/inspectionProfiles/Project_Default.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/inspectionProfiles/Project_Default.xml" afterDir="false" />
-    </list>
-    <ignored path="$PROJECT_DIR$/node_modules/" />
-    <ignored path="$PROJECT_DIR$/.tmp/" />
-    <ignored path="$PROJECT_DIR$/temp/" />
-    <ignored path="$PROJECT_DIR$/tmp/" />
-    <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
-    <option name="SHOW_DIALOG" value="false" />
-    <option name="HIGHLIGHT_CONFLICTS" value="true" />
-    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
-    <option name="LAST_RESOLUTION" value="IGNORE" />
-  </component>
-  <component name="Git.Settings">
-    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
-  </component>
-  <component name="ProjectFrameBounds" extendedState="6">
-    <option name="x" value="85" />
-    <option name="y" value="25" />
-    <option name="width" value="1750" />
-    <option name="height" value="980" />
-  </component>
-  <component name="ProjectLevelVcsManager" settingsEditedManually="true" />
-  <component name="ProjectView">
-    <navigator proportions="" version="1">
-      <foldersAlwaysOnTop value="true" />
-    </navigator>
-    <panes>
-      <pane id="ProjectPane" />
-      <pane id="Scope" />
-    </panes>
-  </component>
-  <component name="PropertiesComponent">
-    <property name="WebServerToolWindowFactoryState" value="false" />
-    <property name="prettierjs.PrettierConfiguration.Package" value="H:\Projects\tuonq\tuonq-admin\node_modules\prettier" />
-  </component>
-  <component name="RunDashboard">
-    <option name="ruleStates">
-      <list>
-        <RuleState>
-          <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
-        </RuleState>
-        <RuleState>
-          <option name="name" value="StatusDashboardGroupingRule" />
-        </RuleState>
-      </list>
-    </option>
-  </component>
-  <component name="SvnConfiguration">
-    <configuration />
-  </component>
-  <component name="TaskManager">
-    <task active="true" id="Default" summary="Default task">
-      <changelist id="b7e901bb-e3ab-40ed-88b1-9826ce061ad5" name="Default Changelist" comment="" />
-      <created>1565658744805</created>
-      <option name="number" value="Default" />
-      <option name="presentableId" value="Default" />
-      <updated>1565658744805</updated>
-      <workItem from="1565658761280" duration="1150000" />
-    </task>
-    <servers />
-  </component>
-  <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="1150000" />
-  </component>
-  <component name="ToolWindowManager">
-    <frame x="-7" y="-7" width="1550" height="838" extended-state="6" />
-    <layout>
-      <window_info id="npm" side_tool="true" />
-      <window_info id="Favorites" side_tool="true" />
-      <window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.24966975" />
-      <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
-      <window_info anchor="bottom" id="Docker" show_stripe_button="false" />
-      <window_info anchor="bottom" id="Version Control" />
-      <window_info anchor="bottom" id="RNConsole" />
-      <window_info active="true" anchor="bottom" id="Terminal" visible="true" weight="0.3286119" />
-      <window_info anchor="bottom" id="Event Log" side_tool="true" />
-      <window_info anchor="bottom" id="Message" order="0" />
-      <window_info anchor="bottom" id="Find" order="1" />
-      <window_info anchor="bottom" id="Run" order="2" />
-      <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
-      <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
-      <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
-      <window_info anchor="bottom" id="TODO" order="6" />
-      <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
-      <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
-      <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
-    </layout>
-  </component>
-  <component name="TypeScriptGeneratedFilesManager">
-    <option name="version" value="1" />
-  </component>
-</project>

+ 4 - 182
README.md

@@ -1,185 +1,7 @@
-# react-admin([尝试一下](https://codesandbox.io/s/react-admin-u9kdb))
-react-admin system solution
+# 后台管理系统前端
 
-<img src="https://raw.githubusercontent.com/yezihaohao/react-admin/master/screenshots/logo.png" alt="logo" width="150" height="53" />
+## 问题集中
+### 2019-8-14
+- 搜索应该按照标签的path搜索
 
-![travis-ci](https://travis-ci.org/yezihaohao/react-admin.svg?branch=master)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 
-### 文档地址:[wiki](https://github.com/yezihaohao/react-admin/wiki)
-
-### 问题和方案汇总:[issue](https://github.com/yezihaohao/react-admin/issues/12)
-
-### 更新日志迁移至[CHANGELOG.md](https://github.com/yezihaohao/react-admin/blob/master/CHANGELOG.md)😁(重要!对于了解项目部分功能和代码很有用!)
-
-### 前言
-> 网上react后台管理开源免费的完整版项目比较少,所以利用空余时间集成了一个版本出来,已放到GitHub
-  启动和打包的时间都稍长,请耐心等待两分钟
-
-- [GitHub地址](https://github.com/yezihaohao/react-admin)
-- [预览地址](https://admiring-dijkstra-34cb29.netlify.com)(已增加响应式,可手机预览😄)
-
-### 依赖模块
-<span style="color: rgb(184,49,47);">项目是用create-react-app创建的,主要还是列出新加的功能依赖包</span>
-
-<span style="color: rgb(184,49,47);">点击名称可跳转相关网站😄😄</span>
-
-- [react](https://facebook.github.io/react/)
-- [react-router](https://react-guide.github.io/react-router-cn/)(<span style="color: rgb(243,121,52);">react路由,4.x的版本,如果还使用3.x的版本,请切换分支(ps:分支不再维护)</span>)
-- [redux](https://redux.js.org/)(基础用法,但是封装了通用action和reducer,demo中主要用于权限控制(ps:目前可以用16.x的context api代替),可以简单了解下)
-- [antd](https://ant.design/index-cn)(<span style="color: rgb(243,121,52);">蚂蚁金服开源的react ui组件框架</span>)
-- [axios](https://github.com/mzabriskie/axios)(<span style="color: rgb(243,121,52);">http请求模块,可用于前端任何场景,很强大👍</span>)
-- [echarts-for-react](https://github.com/hustcc/echarts-for-react)(<span style="color: rgb(243,121,52);">可视化图表,别人基于react对echarts的封装,足够用了</span>)
-- [recharts](http://recharts.org/#/zh-CN/)(<span style="color: rgb(243,121,52);">另一个基于react封装的图表,个人觉得是没有echarts好用</span>)
-- [nprogress](https://github.com/rstacruz/nprogress)(<span style="color: rgb(243,121,52);">顶部加载条,蛮好用👍</span>)
-- [react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg)(<span style="color: rgb(243,121,52);">别人基于react的富文本封装,如果找到其他更好的可以替换</span>)
-- [react-draggable](https://github.com/mzabriskie/react-draggable)(<span style="color: rgb(243,121,52);">拖拽模块,找了个简单版的</span>)
-- [screenfull](https://github.com/sindresorhus/screenfull.js/)(<span style="color: rgb(243,121,52);">全屏插件</span>)
-- [photoswipe](https://github.com/dimsemenov/photoswipe)(<span style="color: rgb(243,121,52);">图片弹层查看插件,不依赖jQuery,还是蛮好用👍</span>)
-- [animate.css](http://daneden.me/animate)(<span style="color: rgb(243,121,52);">css动画库</span>)
-- [react-loadable](https://github.com/jamiebuilds/react-loadable)(代码拆分,按需加载,预加载,样样都行,具体见其文档,推荐使用)
-- [redux-alita](https://github.com/yezihaohao/redux-alita) 极简的redux2react工具
-- 其他小细节省略
-
-### 功能模块
-<span style="color: rgb(184,49,47);">备注:项目只引入了ant-design的部分组件,其他的组件antd官网有源码,可以直接复制到项目中使用,后续有时间补上全部组件。</span>
-
-<span style="color: rgb(184,49,47);">项目使用了antd的自定义主题功能-->黑色,若想替换其他颜色,具体操作请查看antd官网</span>
-<!--more-->
-
-- 首页
-    - 完整布局
-    - 换肤(全局功能,暂时只实现了顶部导航的换肤,后续加上其他模块)
-- 导航菜单
-    - 顶部导航(菜单伸缩,全屏功能)
-    - 左边菜单(增加滚动条以及适配路由的active操作)
-- UI模块
-    - 按钮(antd组件)
-    - 图标(antd组件并增加彩色表情符)
-    - 加载中(antd组件并增加顶部加载条)
-    - 通知提醒框(antd组件)
-    - 标签页(antd组件)
-    - 轮播图(ant动效组件)
-    - 富文本
-    - 拖拽
-    - 画廊
-- 动画
-    - 基础动画(animate.css所有动画)
-    - 动画案例
-- 表格
-    - 基础表格(antd组件)
-    - 高级表格(antd组件)
-    - 异步表格(数据来自掘金酱的接口)
-- 表单
-    - 基础表单(antd组件)
-- 图表
-    - echarts图表
-    - recharts图表
-- 页面
-    - 登录页面(包括GitHub第三方登录)
-    - 404页面
-
-### 功能截图
-#### 首页
-![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd1.gif)
-#### 按钮图标等
-![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd2.gif)
-#### 轮播图
-![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd3.gif)
-#### 富文本
-![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd4.gif)
-#### 拖拽
-![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd5.gif)
-#### 画廊
-![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd6.gif)
-#### 动画
-![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd7.gif)
-#### 表格
-![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd8.gif)
-#### 表单
-![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd9.gif)
-#### 图表
-![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd10.gif)
-#### 页面
-![截图](https://raw.githubusercontent.com/yezihaohao/yezihaohao.github.io/master/imgs/rd11.gif)
-#### 菜单拖拽
-![截图](https://raw.githubusercontent.com/yezihaohao/react-admin/master/screenshots/menu_draggable.gif)
-
-### 代码目录
-```js
-+-- build/                                  ---打包的文件目录
-+-- config/                                 ---npm run eject 后的配置文件目录
-+-- node_modules/                           ---npm下载文件目录
-+-- public/
-|   --- index.html							---首页入口html文件
-|   --- npm.json							---echarts测试数据
-|   --- weibo.json							---echarts测试数据
-+-- src/                                    ---核心代码目录
-|   +-- axios                               ---http请求存放目录
-|   |    --- index.js
-|   +-- components                          ---各式各样的组件存放目录
-|   |    +-- animation                      ---动画组件
-|   |    |    --- ...
-|   |    +-- charts                         ---图表组件
-|   |    |    --- ...
-|   |    +-- dashboard                      ---首页组件
-|   |    |    --- ...
-|   |    +-- forms                          ---表单组件
-|   |    |    --- ...
-|   |    +-- pages                          ---页面组件
-|   |    |    --- ...
-|   |    +-- tables                         ---表格组件
-|   |    |    --- ...
-|   |    +-- ui                             ---ui组件
-|   |    |    --- ...
-|   |    --- BreadcrumbCustom.jsx           ---面包屑组件
-|   |    --- HeaderCustom.jsx               ---顶部导航组件
-|   |    --- Page.jsx                       ---页面容器
-|   |    --- SiderCustom.jsx                ---左边菜单组件
-|   +-- style                               ---项目的样式存放目录,主要采用less编写
-|   +-- utils                               ---工具文件存放目录
-|   --- App.js                              ---组件入口文件
-|   --- index.js                            ---项目的整体js入口文件,包括路由配置等
---- .env                                    ---启动项目自定义端口配置文件
---- .eslintrc                               ---自定义eslint配置文件,包括增加的react jsx语法限制
---- package.json
-```
-### 安装运行
-##### 1.下载或克隆项目源码
-##### 2.yarn 或者 npm安装相关包文件(首先推荐使用yarn,国内建议增加淘宝镜像源,不然很慢,你懂的😁)
-> 有些老铁遇到运行时报错,首先确定下是不是最新稳定版的nodejs和npm或者yarn(推荐用yarn),切记不要用cnpn
-
-```js
-// 首推荐使用yarn装包
-yarn or npm i
-```
-##### 3.启动项目
-```js
-yarn start or npm start
-```
-##### 4.打包项目
-```js
-yarn build or npm run build
-```
-
-### Q&A(点击问题查看答案)
-#### 1.[create-react-app 打包项目run build 增加进度条信息?](https://github.com/yezihaohao/react-admin/issues/12#issuecomment-325383346)
-#### 2.[接口跨域了,怎么在本地开发时配置代理?](https://github.com/yezihaohao/react-admin/issues/12#issuecomment-326169055)
-#### 3.[在使用hashRouter的情况下怎么实现类似锚点跳转?](https://github.com/yezihaohao/react-admin/issues/12#issuecomment-345127221)
-#### 4.[怎么添加多页面配置?](https://github.com/yezihaohao/react-admin/issues/12#issuecomment-348088852)
-#### 5.[路由传参数接问号怎么传?](https://github.com/yezihaohao/react-admin/issues/12#issuecomment-375583089)
-#### 6.[如何兼容IE浏览器?](https://github.com/yezihaohao/react-admin/issues/12#issuecomment-510295292)
-
-### 结尾
-该项目会不定时更新,后续时间会添加更多的模块
-
-欢迎和感谢大家PR~~👏👏
-
-若有问题,可加QQ群与我交流
-
-- 1群:264591039(已满)
-- 2群:592688854(已满)
-- 3群:743490497 (已满)
-- 4群:150131600
-
-如果对你有帮助,给个star哟~~❤️❤️❤️❤️

+ 7 - 2
src/axios/tools.js

@@ -27,6 +27,7 @@ export const get = ({ url, headers, params, msg = '接口异常' }) =>
         .catch(err => {
             console.log(err);
             message.warn(msg);
+            return Promise.reject(err);
         });
 
 /**
@@ -43,6 +44,7 @@ export const post = ({ url, data, msg = '接口异常', headers }) =>
         .catch(err => {
             console.log(err);
             message.warn(msg);
+            return Promise.reject(err);
         });
 
 
@@ -59,10 +61,13 @@ export const put = ({ url, data, msg = '接口异常', headers }) =>
         .then(resp => resp.data)
         .catch(err => {
             console.log('err : ', url, ' err: ', err);
-            return err;
+            return Promise.reject(err);
         });
 
 
 export const del = ({ url, data, headers }) =>
     axios.delete(checkURL(url), { data, headers })
-        .then(resp => resp.data);
+        .then(resp => resp.data)
+        .catch(err => {
+            return Promise.reject(err);
+        });

+ 1 - 1
src/const/index.js

@@ -6,7 +6,7 @@ console.log('当前环境: ', NODE_ENV);
  * @type {{BASE_API: string}}
  */
 const BASE_CONF = {
-    BASE_API: 'http://192.168.1.113:11111/',
+    BASE_API: 'http://config.tonyandmoney.cn/',
 };
 
 /**

+ 4 - 1
src/index.js

@@ -8,6 +8,9 @@ import { AlitaProvider, setConfig } from 'redux-alita';
 import './style/lib/animate.css';
 import './style/antd/index.less';
 import './style/index.less';
+import {LocaleProvider} from 'antd'
+import zh_CN from 'antd/lib/locale-provider/zh_CN'
+
 
 setConfig(apis);
 // const render = Component => { // 增加react-hot-loader保持状态刷新操作,如果不需要可去掉并把下面注释的打开
@@ -46,7 +49,7 @@ setConfig(apis);
 ReactDOM.render(
     // <AppContainer>
     <AlitaProvider>
-        <Page />
+        <LocaleProvider locale={zh_CN}><Page /></LocaleProvider>
     </AlitaProvider>,
     // </AppContainer>
     document.getElementById('root')

+ 48 - 45
src/pages/config/ConfigLabel.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connectAlita } from 'redux-alita';
 import { withRouter } from 'react-router-dom';
-import { Button, List, Modal } from 'antd';
+import { Button, Input, List, message, Modal, Spin } from 'antd';
 import './styles/label.less';
 import AddLabelForm from './widget/AddLabelForm';
 
@@ -11,11 +11,7 @@ class ConfigLabel extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            params: { keywords: undefined },
-            labelPathList: [],
-            addVisible: false,
             loading: false,
-            addModalTitle: '添加属性标签',
             removeModalTitle: '提示',
             removeLoading: false,
             removeModalVisible: false,
@@ -26,76 +22,83 @@ class ConfigLabel extends React.Component {
 
     componentDidMount() {
         this._fetchLabels();
+        this.params = {};
     }
 
     _fetchLabels() {
-        let params = this.state.params;
+        this.setState({ currentLabel: null });
+        let params = this.params;
         this.props.setAlitaState({ funcName: 'findPLabel', params });
-
     }
 
     _handleSearch(value) {
-        this.state.params.keywords = value;
+        this.params.keywords = value;
         this._fetchLabels();
 
     }
 
+    removeLabel(item) {
+        let { removeModalTitle } = this.state;
+        let _this = this;
+        Modal.confirm({
+            title: removeModalTitle,
+            content: `您确定要删除:${item.path} 标签吗?`,
+            onOk() {
+                _this.props.setAlitaState({ funcName: 'pLabelDelete', params: item.id })
+                    .then(() => {
+                        message.info('删除失败!');
+                        _this._fetchLabels();
+                    });
+            },
+        });
+    }
+
 
     renderItem(item) {
-        return (<List.Item className='prop-label-item'>
+        return (<List.Item className="prop-label-item">
             <div>
-                <h3 className='label-label'>{item.path}</h3>
+                <h3 className="label-label">{item.path}</h3>
                 <span className={'label-title'}>{item.title}</span>
             </div>
             <div>{item.description}</div>
-            <div className='tool-btns'>
-                <Button icon='edit' type='primary' size='small' onClick={() => this.setState({ currentLabel: item })}/>
-                <Button icon='delete' type='danger' size='small' onClick={this.removeLabel.bind(this, item)}/>
+            <div className="tool-btns">
+                <Button htmlType="button" icon="edit" type="primary" size="small"
+                        onClick={() => this.setState({ currentLabel: item })}/>
+                <Button htmlType="button" icon="delete" type="danger" size="small"
+                        onClick={this.removeLabel.bind(this, item)}/>
             </div>
         </List.Item>);
     }
 
-    _onAddModalHide() {
-        this.setState({ addVisible: false, currentLabel: null });
-
-    }
 
     render() {
-        const { data: labelList = {} ,isFetching} = this.props.findPLabel || {};
-        const { currentLabel, loading, addModalTitle } = this.state;
-        return (<div>
-            <div className='prop-label-header'>
-                <Button type='primary' icon='sync' loading={isFetching} onClick={this._fetchLabels.bind(this)}/>
-                <Button type='primary' icon='plus' onClick={()=>this.setState({currentLabel:{}})}/>
+        const { data: labelList = {}, isFetching } = this.props.findPLabel || {};
+        const { currentLabel } = this.state;
+        return (<div className="page-label-container">
+            <div className="prop-label-header">
+                <Button htmlType="button" type="primary" icon="sync" loading={isFetching}
+                        onClick={this._fetchLabels.bind(this)}/>
+                <Button htmlType="button" icon="plus"
+                        onClick={() => this.setState({ currentLabel: {} })}/>
+                <Input.Search placeholder="输入关键词查询"
+                              onSearch={this._handleSearch.bind(this)}
+                              className="search-input"/>
             </div>
-
+            <Spin className="spin" spinning={isFetching} size="large"/>
             <List
                 dataSource={labelList.records}
                 bordered
-                size='small'
-                renderItem={this.renderItem.bind(this)}/>
-            <Modal visible={!!currentLabel} title={addModalTitle}
-                   onCancel={this._onAddModalHide.bind(this)}
-                   footer={null}>
-                <AddLabelForm cancel={this._onAddModalHide.bind(this)}
-                              label={currentLabel}/>
-            </Modal>
+                size="small"
+                renderItem={this.renderItem.bind(this)}
+            />
+            <AddLabelForm cancel={() => this.setState({ currentLabel: null })}
+                          refresh={this._fetchLabels.bind(this)}
+                          visible={!!currentLabel}
+                          label={currentLabel}
+            />
         </div>);
     }
 
-    removeLabel(item) {
-        let { removeModalTitle, removeLoading } = this.state;
-        let _this = this;
-        Modal.confirm({
-            title: removeModalTitle,
-            content: `您确定要删除:${item.path} 标签吗?`,
-            onCancel() {
-            },
-            onOk() {
-                _this.props.setAlitaState({ funcName: 'pLabelDelete', params: item.id });
-            },
-        });
-    }
 
 }
 

+ 24 - 5
src/pages/config/styles/label.less

@@ -1,22 +1,41 @@
 
-.prop-label-header{
+.page-label-container {
+  position: relative;
+
+  .spin {
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translateX(50%);
+  }
+}
+
+.prop-label-header {
   padding: 10px;
+
+  .search-input {
+    width: 200px;
+    margin-left: 10px;
+  }
 }
 
-.prop-label-item{
+.prop-label-item {
   background: white;
   display: block;
-  .label-label{
+
+  .label-label {
     font-size: x-large;
     color: #333333;
     display: inline-block;
   }
-  .label-title{
+
+  .label-title {
     font-size: larger;
     color: #666666;
     padding-left: 10px;
   }
-  .tool-btns{
+
+  .tool-btns {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;

+ 77 - 22
src/pages/config/widget/AddLabelForm.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { AutoComplete, Button, Form, Input } from 'antd';
+import { AutoComplete, Form, Input, message, Modal } from 'antd';
 import { connectAlita } from 'redux-alita';
-
+import * as PropTypes from 'prop-types';
 
 /**
  * 添加属性标签的表单,
@@ -15,71 +15,130 @@ class AddLabelForm extends React.Component {
         },
     };
 
+    static propTypes = {
+        visible: PropTypes.bool,
+        refresh: PropTypes.func,
+    };
+
     constructor(props) {
         super(props);
         let { label } = props;
         this.state = {
             label: label || { pid: 0 },
             labelList: [],
+            visible: false,
         };
     }
 
+    pLabel = {};
+
+    componentWillReceiveProps(nextProps, nextContext) {
+        let { label, visible } = nextProps;
+        this.setState({ label: label || { pid: 0 }, visible });
+    }
+
+
+    closeModal() {
+
+
+    }
+
+    handleLabelAdd = (values, label) => {
+        let params = { id: this.state.label.id, pid: label.pid };
+        this.props.setAlitaState({ funcName: 'labelAdd', params: { ...values, ...params } })
+            .then(() => {
+                message.success('添加成功');
+                this.props.refresh && this.props.refresh();
+                this.setState({ visible: false });
+            })
+            .catch(e => {
+                console.log('catch ', e);
+            });
+    };
+
+    handleLabelEdit = (values, label) => {
+        let params = { id: this.state.label.id, pid: label.pid };
+        this.props.setAlitaState({ funcName: 'labelEdit', params: { ...values, ...params } })
+            .then(() => {
+                message.success('编辑成功');
+                this.props.refresh && this.props.refresh();
+                this.setState({ visible: false });
+            });
+
+    };
+
     handleSubmit = e => {
         e.preventDefault();
         const _this = this;
-        let params = { id: _this.state.label.id, pid: _this.state.label.pid };
+        let pLabel = _this.pLabel;
         this.props.form.validateFieldsAndScroll((err, values) => {
             if (!err) {
-                if (_this.state.label.id) {
-                    _this.props.setAlitaState({ funcName: 'labelEdit', params: { ...values, ...params } })
-                        .then((resp) => {
-                            console.log(' resp ', resp);
-                        });
+                if (pLabel.id) {
+                    _this.handleLabelEdit(values, pLabel);
                 } else {
-                    _this.props.setAlitaState({ funcName: 'labelAdd', params: { ...values, ...params } });
+                    _this.handleLabelAdd(values, pLabel);
                 }
             }
         });
     };
 
     handleSearchLabel = (keywords) => {
-        this.props.setAlitaState({ funcName: 'searchLabel', params: { keywords } });
+        this.props.setAlitaState({ funcName: 'searchLabel', params: { keywords } })
+            .then(resp => {
+                console.log('resp label ', resp);
+            })
+            .catch(e => {
+                console.log('err ', e);
+            });
     };
 
     onSelect(sources = [], path) {
         for (let i in sources) {
             let source = sources[i];
             if (source.path === path) {
-                let oldV = this.state.label;
-                this.setState({ label: { ...oldV, pid: source.id } });
+                this.pLabel = { pid: source.id };
                 break;
             }
         }
     }
 
+
     render() {
-        const { getFieldDecorator } = this.props.form;
         let { label } = this.props;
         if (!label) return null;
         const { data: dataSource, isFetching } = this.props.searchLabel || { data: {} };
         const { isFetching: isSubmitLoading } = this.props.labelAdd || {};
         const { isFetching: isEditLoading } = this.props.labelEdit || {};
 
-        if (!dataSource.records) dataSource.records = [];
+        let records = dataSource ? dataSource.records : [];
+        if (!records) records = [];
+
+        return (<Modal visible={this.state.visible}
+                       title={label.id ? '编辑标签' : '添加标签'}
+                       onOk={this.handleSubmit.bind(this)}
+                       onCancel={() => this.setState({ visible: false })}>
+            {this.renderForm(records, label, isFetching, isSubmitLoading || isEditLoading)}
+        </Modal>);
+
+    }
+
+    renderForm(records = [], label = {}, isFetching, isLoading = false) {
+        const { getFieldDecorator } = this.props.form;
         return (<Form onSubmit={this.handleSubmit}>
             {(!label.id) && (<Form.Item>
                 {getFieldDecorator('path')(<AutoComplete onSearch={this.handleSearchLabel}
-                                                         dataSource={dataSource.records.map(item => item.path)}
+                                                         dataSource={records.map(item => item.path)}
                                                          loading={isFetching}
-                                                         onSelect={this.onSelect.bind(this, dataSource.records)}
-                                                         placeholder='输入关键词查询上级标签'/>)}
+                                                         onSelect={this.onSelect.bind(this, records)}
+                                                         placeholder="输入关键词查询上级标签"
+                />)}
             </Form.Item>)}
             <Form.Item>
                 {getFieldDecorator('label', {
                     rules: [{ required: true, message: '请输入标签' }],
                     initialValue: label.label,
                 })
-                (<Input disabled={!!label.id} placeholder='请输入标签'/>)}
+                (<Input disabled={!!label.id} placeholder="请输入标签"/>)}
             </Form.Item>
             <Form.Item>
                 {getFieldDecorator('title', { initialValue: label.title })(<Input placeholder='请输入标签名称'/>)}
@@ -87,10 +146,6 @@ class AddLabelForm extends React.Component {
             <Form.Item>
                 {getFieldDecorator('description', { initialValue: label.description })(<Input placeholder='请输入标签简介'/>)}
             </Form.Item>
-            <Form.Item>
-                <Button type='default' htmlType='button' onClick={this.props.cancel}>取消</Button>
-                <Button loading={isSubmitLoading || isEditLoading} htmlType='submit' type='primary'>提交</Button>
-            </Form.Item>
         </Form>);
     }