From c43d790cda2d3647073407d06882cb75b31d1dc0 Mon Sep 17 00:00:00 2001
From: devezhao <zhaofang123@gmail.com>
Date: Fri, 16 Aug 2019 16:08:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E7=89=88=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.json                                |   3 +-
 .../web/admin/datas/DataReportControll.java   |  22 ++-
 src/main/webapp/admin/datas/data-reports.jsp  |  12 +-
 src/main/webapp/assets/css/rb-page.css        |   1 +
 src/main/webapp/assets/js/config-comps.jsx    | 111 ++++++++++++
 .../webapp/assets/js/datas/data-reports.jsx   | 164 +++++++++---------
 src/main/webapp/assets/js/rb-components.jsx   |  42 -----
 7 files changed, 217 insertions(+), 138 deletions(-)
 create mode 100644 src/main/webapp/assets/js/config-comps.jsx
diff --git a/.eslintrc.json b/.eslintrc.json
index c47f1d802..dabd70ae0 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -77,7 +77,8 @@
         "RbAlert": true,
         "RbHighbar": true,
         "ApprovalSubmitForm": true,
-        "LiteFormDlg": true
+        "ConfigList": true,
+        "ConfigFormDlg": true
     },
     "rules": {
         "strict": 0,
diff --git a/src/main/java/com/rebuild/web/admin/datas/DataReportControll.java b/src/main/java/com/rebuild/web/admin/datas/DataReportControll.java
index a3ea9b985..64e50cd2e 100644
--- a/src/main/java/com/rebuild/web/admin/datas/DataReportControll.java
+++ b/src/main/java/com/rebuild/web/admin/datas/DataReportControll.java
@@ -32,6 +32,8 @@ import org.springframework.web.servlet.ModelAndView;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 import java.io.IOException;
+import java.util.ArrayList;
+import java.util.List;
 
 /**
  * TODO
@@ -55,15 +57,21 @@ public class DataReportControll extends BasePageControll {
     @RequestMapping("/data-reports/list")
     public void reportList(HttpServletRequest request, HttpServletResponse response) throws IOException {
         String belongEntity = getParameter(request, "entity");
-        String sql = "select configId,name,belongEntity,belongEntity,isDisabled,modifiedOn from DataReportConfig";
-        if (StringUtils.isNotBlank(belongEntity)) {
-            sql += " where belongEntity = '" + StringEscapeUtils.escapeSql(belongEntity) + "'";
-        }
-        sql += " order by name, modifiedOn desc";
+        String q = getParameter(request, "q");
+        String sql = "select configId,belongEntity,belongEntity,name,isDisabled,modifiedOn from DataReportConfig" +
+                " where (1=1) and (2=2) order by name, modifiedOn desc";
 
-        Object[][] array = Application.createQuery(sql).array();
+        List<String> where = new ArrayList<>();
+        if (StringUtils.isNotBlank(belongEntity)) {
+            sql = sql.replace("(1=1)", "belongEntity = '" + StringEscapeUtils.escapeSql(belongEntity) + "'");
+        }
+        if (StringUtils.isNotBlank(q)) {
+            sql = sql.replace("(2=2)", "name like '%" + StringEscapeUtils.escapeSql(q) + "%'");
+        }
+
+        Object[][] array = Application.createQuery(sql).setLimit(500).array();
         for (Object[] o : array) {
-            o[3] = EasyMeta.getLabel(MetadataHelper.getEntity((String) o[3]));
+            o[2] = EasyMeta.getLabel(MetadataHelper.getEntity((String) o[2]));
             o[5] = CalendarUtils.getUTCDateTimeFormat().format(o[5]);
         }
         writeSuccess(response, array);
diff --git a/src/main/webapp/admin/datas/data-reports.jsp b/src/main/webapp/admin/datas/data-reports.jsp
index 288cb9056..95f5f646b 100644
--- a/src/main/webapp/admin/datas/data-reports.jsp
+++ b/src/main/webapp/admin/datas/data-reports.jsp
@@ -4,11 +4,6 @@
 <head>
 <%@ include file="/_include/Head.jsp"%>
 <title>报表模板</title>
-<style type="text/css">
-    .syscfg h5{background-color:#eee;margin:0;padding:10px;}
-    .syscfg .table td{padding:10px;}
-    .syscfg .table td p{margin:0;color:#999;font-weight:normal;font-size:12px;}
-</style>
 </head>
 <body>
 <div class="rb-wrapper rb-fixed-sidebar rb-collapsible-sidebar rb-collapsible-sidebar-hide-logo rb-color-header rb-aside">
@@ -34,6 +29,12 @@
         <div class="float-right pt-1">
             <button class=" btn btn-primary J_add" type="button"><i class="icon zmdi zmdi-plus"></i> 添加</button>
         </div>
+        <div class="float-right pt-1 mr-3">
+            <div class="input-group input-search">
+                <input class="form-control" type="text" placeholder="查询" maxlength="40">
+                <span class="input-group-btn"><button class="btn btn-secondary" type="button"><i class="icon zmdi zmdi-search"></i></button></span>
+            </div>
+        </div>
         <div class="clearfix"></div>
     </div>
     <div class="main-content container-fluid pt-0">
@@ -72,6 +73,7 @@
 </div>
 </div>
 <%@ include file="/_include/Foot.jsp"%>
+<script type="text/babel" src="${baseUrl}/assets/js/config-comps.jsx"></script>
 <script type="text/babel" src="${baseUrl}/assets/js/datas/data-reports.jsx"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/webapp/assets/css/rb-page.css b/src/main/webapp/assets/css/rb-page.css
index cfdc4b9ef..a6e49af97 100644
--- a/src/main/webapp/assets/css/rb-page.css
+++ b/src/main/webapp/assets/css/rb-page.css
@@ -179,6 +179,7 @@ html.admin .admin-show.row {
 .input-search input {
     width: 220px;
     height: 2.8rem;
+    background-color: #fff;
 }
 
 .input-search input {
diff --git a/src/main/webapp/assets/js/config-comps.jsx b/src/main/webapp/assets/js/config-comps.jsx
new file mode 100644
index 000000000..f64089ba6
--- /dev/null
+++ b/src/main/webapp/assets/js/config-comps.jsx
@@ -0,0 +1,111 @@
+/* eslint-disable no-unused-vars */
+// 表单 DLG
+class ConfigFormDlg extends RbFormHandler {
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    return (
+      <RbModal title={(this.props.id ? '修改' : '添加') + this.props.configName} ref={(c) => this._dlg = c} disposeOnHide={true}>
+        <div className="form">
+          {this.renderFrom()}
+          <div className="form-group row footer">
+            <div className="col-sm-7 offset-sm-3" ref={(c) => this._btns = c}>
+              <button className="btn btn-primary" type="button" onClick={this.confirm}>确定</button>
+              <a className="btn btn-link" onClick={this.hide}>取消</a>
+            </div>
+          </div>
+        </div>
+      </RbModal>
+    )
+  }
+
+  componentDidMount() {
+    if (this._entity) {
+      $.get(`${rb.baseUrl}/commons/metadata/entities`, (res) => {
+        this.setState({ entities: res.data }, () => {
+          this.__select2 = $(this._entity).select2({
+            placeholder: '选择实体',
+            allowClear: false
+          })
+        })
+      })
+    }
+  }
+
+  renderFrom() {
+  }
+  confirm = () => {
+  }
+}
+
+// 列表 TABLE
+class ConfigList extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { ...props }
+  }
+
+  componentDidMount() {
+    this.loadData()
+    // 搜索
+    const btn = $('.input-search .btn').click(() => { this.loadData() })
+    $('.input-search .form-control').keydown((e) => { if (e.which === 13) btn.trigger('click') })
+  }
+
+  // 加载数据
+  loadData(entity) {
+    if (!this.requestUrl) {
+      throw new Error('No `requestUrl` defined')
+    }
+
+    entity = entity || this.__entity
+    this.__entity = entity
+    let q = $('.input-search input').val()
+
+    $.get(`${this.requestUrl}?entity=${entity || ''}&q=${$encode(q)}`, (res) => {
+      this.setState({ data: res.data || [] }, () => {
+        $('.rb-loading-active').removeClass('rb-loading-active')
+        $('.dataTables_info').text(`共 ${this.state.data.length} 项`)
+
+        if (this.state.data.length === 0) $('.list-nodata').removeClass('hide')
+        else $('.list-nodata').addClass('hide')
+
+        this.renderEntityTree()
+      })
+    })
+  }
+
+  // 渲染实体树
+  renderEntityTree() {
+    if (this.__treeRendered) return
+    this.__treeRendered = true
+
+    const ues = {}
+    $(this.state.data).each(function () {
+      ues[this[1]] = this[2]
+    })
+    const dest = $('.dept-tree ul')
+    for (let k in ues) {
+      $(`<li data-entity="${k}"><a class="text-truncate">${ues[k]}</a></li>`).appendTo(dest)
+    }
+
+    let that = this
+    dest.find('li').click(function () {
+      dest.find('li').removeClass('active')
+      $(this).addClass('active')
+      that.loadData($(this).data('entity'))
+    })
+  }
+
+  // 删除数据
+  handleDelete(id) {
+    $.post(`${rb.baseUrl}/app/entity/record-delete?id=${id}`, (res) => {
+      if (res.error_code === 0) {
+        RbHighbar.success('删除成功')
+        setTimeout(() => location.reload(), 500)
+      } else RbHighbar.error(res.error_msg)
+    })
+  }
+}
\ No newline at end of file
diff --git a/src/main/webapp/assets/js/datas/data-reports.jsx b/src/main/webapp/assets/js/datas/data-reports.jsx
index 971b416a2..16dbce8ad 100644
--- a/src/main/webapp/assets/js/datas/data-reports.jsx
+++ b/src/main/webapp/assets/js/datas/data-reports.jsx
@@ -1,74 +1,53 @@
 
 $(document).ready(function () {
-  $('.J_add').click(() => { renderRbcomp(<ReporEdit title="添加报表模板" />) })
+  $('.J_add').click(() => { renderRbcomp(<ReporEdit configName="报表模板" />) })
   renderRbcomp(<ReportList />, 'dataList')
 })
 
-class ReportList extends React.Component {
+class ReportList extends ConfigList {
   constructor(props) {
     super(props)
-    this.state = {}
+    this.requestUrl = `${rb.baseUrl}/admin/datas/data-reports/list`
   }
-
   render() {
     return <React.Fragment>
-      {(this.state.list || []).map((item) => {
+      {(this.state.data || []).map((item) => {
         return <tr key={'api-' + item[0]}>
-          <td>{item[1]}</td>
-          <td>{item[3] || item[2]}</td>
+          <td>{item[3]}</td>
+          <td>{item[2] || item[1]}</td>
           <td>{item[4] ? '否' : '是'}</td>
           <td>{item[5]}</td>
           <td className="actions">
-            <a className="icon" onClick={() => this.delete(item[0])}><i className="zmdi zmdi-settings" /></a>
-            <a className="icon" onClick={() => this.delete(item[0])}><i className="zmdi zmdi-delete" /></a>
+            <a className="icon" onClick={() => this.handleEdit(item)}><i className="zmdi zmdi-settings" /></a>
+            <a className="icon" onClick={() => this.handleDelete(item[0])}><i className="zmdi zmdi-delete" /></a>
           </td>
         </tr>
       })}
     </React.Fragment>
   }
 
-  componentDidMount() {
-    this.loadData()
+  handleEdit(item) {
+    renderRbcomp(<ReporEdit configName="报表模板" id={item[0]} name={item[3]} isDisabled={item[4]} />)
   }
 
-  loadData(entity) {
-    $.get(`${rb.baseUrl}/admin/datas/data-reports/list?entity=${entity || ''}`, (res) => {
-      this.setState({ list: res.data || [] }, () => {
-        $('.rb-loading-active').removeClass('rb-loading-active')
-        $('.dataTables_info').text(`共 ${this.state.list.length} 项`)
-
-        if (this.state.list.length === 0) $('.list-nodata').removeClass('hide')
-        else $('.list-nodata').addClass('hide')
-
-        if (!this.__treeRendered) this.renderEntityTree()
-      })
-    })
-  }
-
-  renderEntityTree() {
-    this.__treeRendered = true
-    const dest = $('.dept-tree ul')
-    const ues = []
-    $(this.state.list).each(function () {
-      if (!ues.contains(this[2])) $('<li data-entity="' + this[2] + '"><a class="text-truncate">' + this[3] + '</a></li>').appendTo(dest)
-      ues.push(this[2])
-    })
-    $('<li data-entity="$DISABLED$"><a class="text-truncate">已禁用的</a></li>').appendTo(dest)
-
-    let that = this
-    dest.find('li').click(function () {
-      dest.find('li').removeClass('active')
-      $(this).addClass('active')
-      that.loadData($(this).data('entity'))
+  handleDelete(id) {
+    let handle = super.handleDelete
+    RbAlert.create('确认删除此报表模板？', {
+      html: true,
+      type: 'danger',
+      confirmText: '删除',
+      confirm: function () {
+        this.disabled(true)
+        handle(id)
+      }
     })
   }
 }
 
-class ReporEdit extends LiteFormDlg {
+class ReporEdit extends ConfigFormDlg {
   constructor(props) {
     super(props)
   }
-
   renderFrom() {
     return <React.Fragment>
       <div className="form-group row">
@@ -77,59 +56,78 @@ class ReporEdit extends LiteFormDlg {
           <input type="text" className="form-control form-control-sm" data-id="name" onChange={this.handleChange} value={this.state.name || ''} />
         </div>
       </div>
-      <div className="form-group row">
-        <label className="col-sm-3 col-form-label text-sm-right">选择应用实体</label>
-        <div className="col-sm-7">
-          <select className="form-control form-control-sm" ref={(c) => this._entity = c}>
-            {(this.state.entities || []).map((item) => {
-              return <option key={'e-' + item.name} value={item.name}>{item.label}</option>
-            })}
-          </select>
-        </div>
-      </div>
-      <div className="form-group row">
-        <label className="col-sm-3 col-form-label text-sm-right">模板文件</label>
-        <div className="col-sm-7">
-          <div className="file-select">
-            <input type="file" className="inputfile" id="upload-input" accept=".xlsx,.xls" data-maxsize="5000000" ref={(c) => this.__upload = c} />
-            <label htmlFor="upload-input" className="btn-secondary"><i className="zmdi zmdi-upload"></i><span>选择文件</span></label>
+      {!this.props.id &&
+        <React.Fragment>
+          <div className="form-group row">
+            <label className="col-sm-3 col-form-label text-sm-right">选择应用实体</label>
+            <div className="col-sm-7">
+              <select className="form-control form-control-sm" ref={(c) => this._entity = c}>
+                {(this.state.entities || []).map((item) => {
+                  return <option key={'e-' + item.name} value={item.name}>{item.label}</option>
+                })}
+              </select>
+            </div>
+          </div>
+          <div className="form-group row">
+            <label className="col-sm-3 col-form-label text-sm-right">模板文件</label>
+            <div className="col-sm-7">
+              <div className="file-select">
+                <input type="file" className="inputfile" id="upload-input" accept=".xlsx,.xls" data-maxsize="5000000" ref={(c) => this.__upload = c} />
+                <label htmlFor="upload-input" className="btn-secondary"><i className="zmdi zmdi-upload"></i><span>选择文件</span></label>
+              </div>
+              {this.state.uploadFileName && <div className="text-bold">{this.state.uploadFileName}</div>}
+            </div>
+          </div>
+        </React.Fragment>
+      }
+      {this.props.id &&
+        <div className="form-group row">
+          <div className="col-sm-7 offset-sm-3">
+            <label className="custom-control custom-control-sm custom-checkbox custom-control-inline mb-0">
+              <input className="custom-control-input" type="checkbox" checked={this.state.isDisabled === true} data-id="isDisabled" onChange={this.handleChange} />
+              <span className="custom-control-label">是否禁用</span>
+            </label>
           </div>
-          {this.state.uploadFileName && <div className="text-bold">{this.state.uploadFileName}</div>}
         </div>
-      </div>
+      }
     </React.Fragment>
   }
-
   componentDidMount() {
     super.componentDidMount()
 
-    let that = this
-    $(this.__upload).html5Uploader({
-      postUrl: rb.baseUrl + '/filex/upload?temp=yes',
-      onSelectError: function (field, error) {
-        if (error === 'ErrorType') RbHighbar.create('请上传 Excel 文件')
-        else if (error === 'ErrorMaxSize') RbHighbar.create('文件不能大于 5M')
-      },
-      onSuccess: function (d) {
-        d = JSON.parse(d.currentTarget.response)
-        if (d.error_code === 0) {
-          that.setState({
-            templateFile: d.data,
-            uploadFileName: $fileCutName(d.data)
-          })
-        } else RbHighbar.error('上传失败，请稍后重试')
-      }
-    })
+    if (this.__upload) {
+      let that = this
+      $(this.__upload).html5Uploader({
+        postUrl: rb.baseUrl + '/filex/upload?temp=yes',
+        onSelectError: function (field, error) {
+          if (error === 'ErrorType') RbHighbar.create('请上传 Excel 文件')
+          else if (error === 'ErrorMaxSize') RbHighbar.create('文件不能大于 5M')
+        },
+        onSuccess: function (d) {
+          d = JSON.parse(d.currentTarget.response)
+          if (d.error_code === 0) {
+            that.setState({
+              templateFile: d.data,
+              uploadFileName: $fileCutName(d.data)
+            })
+          } else RbHighbar.error('上传失败，请稍后重试')
+        }
+      })
+    }
   }
 
   confirm = () => {
     let post = { name: this.state['name'] }
     if (!post.name) { RbHighbar.create('请输入报表名称'); return }
-    post.belongEntity = this.__select2.val()
-    if (!post.belongEntity) { RbHighbar.create('请选择应用实体'); return }
-    post.templateFile = this.state.templateFile
-    if (!post.templateFile) { RbHighbar.create('请上传模板文件'); return }
-    post.metadata = { entity: 'DataReportConfig' }
+    if (this.props.id) {
+      post.isDisabled = this.state.isDisabled
+    } else {
+      post.belongEntity = this.__select2.val()
+      if (!post.belongEntity) { RbHighbar.create('请选择应用实体'); return }
+      post.templateFile = this.state.templateFile
+      if (!post.templateFile) { RbHighbar.create('请上传模板文件'); return }
+    }
+    post.metadata = { entity: 'DataReportConfig', id: this.props.id }
 
     this.disabled(true)
     $.post(rb.baseUrl + '/app/entity/record-save', JSON.stringify(post), (res) => {
diff --git a/src/main/webapp/assets/js/rb-components.jsx b/src/main/webapp/assets/js/rb-components.jsx
index be9660d4a..57b5ec71f 100644
--- a/src/main/webapp/assets/js/rb-components.jsx
+++ b/src/main/webapp/assets/js/rb-components.jsx
@@ -458,48 +458,6 @@ const UserShow = function (props) {
     </a>)
 }
 
-
-// 轻量级表单
-class LiteFormDlg extends RbFormHandler {
-  constructor(props) {
-    super(props)
-  }
-
-  render() {
-    return (
-      <RbModal title={this.props.title || ''} ref={(c) => this._dlg = c} disposeOnHide={true}>
-        <div className="form">
-          {this.renderFrom()}
-          <div className="form-group row footer">
-            <div className="col-sm-7 offset-sm-3" ref={(c) => this._btns = c}>
-              <button className="btn btn-primary" type="button" onClick={this.confirm}>确定</button>
-              <a className="btn btn-link" onClick={this.hide}>取消</a>
-            </div>
-          </div>
-        </div>
-      </RbModal>
-    )
-  }
-
-  componentDidMount() {
-    if (this._entity) {
-      $.get(`${rb.baseUrl}/commons/metadata/entities`, (res) => {
-        this.setState({ entities: res.data }, () => {
-          this.__select2 = $(this._entity).select2({
-            placeholder: '选择实体',
-            allowClear: false
-          })
-        })
-      })
-    }
-  }
-
-  renderFrom() {
-  }
-  confirm = () => {
-  }
-}
-
 /**
  * JSX 渲染
  * @param {*} jsx 
