2019-10-09update

king

2019-10-09 eb257a16632071469479fd13a93dceddc289d338

2019-10-09update

 src/api/index.js

@@ -8,10 +8,10 @@

axios.interceptors.request.use((config) => {
  config.method = 'post'
  config.headers.token = sessionStorage.getItem('TOKEN') || ''
  if (config.url.includes('LoginAndRedirect')) {
    config.data = qs.stringify(config.data)
  } else {
    config.headers.token = sessionStorage.getItem('TOKEN') || ''
    config.data = JSON.stringify(config.data)
  }

@@ -169,6 +169,21 @@
  }

  /**
   * @description 获取页面配置信息
   * @param {String} MenuNo 页面菜单参数
   */
  getModelFormData (MenuNo) {
    return axios({
      url: '/dostar',
      data: {
        func: 'getModelFormData',
        userid: sessionStorage.getItem('UserID'),
        MenuNo: MenuNo
      }
    })
  }

  /**
   * @description 获取页面列表数据
   * @param {String} param 提交参数
   */

 src/assets/css/main.scss

@@ -23,22 +23,6 @@
  -moz-osx-font-smoothing: grayscale;
}


/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
// ::-webkit-scrollbar {
//   width: 0px;  
//   height: 0px;  
//   background-color: #F5F5F5;  
// }
  
/*定义滚动条轨道 内阴影+圆角*/  
// ::-webkit-scrollbar-track {
//   box-shadow: inset 0 0 1px rgba(0,0,0,0);  
//   border-radius: 10px;  
//   background-color: #F5F5F5;  
// }


/*去除虚线*/
input:focus, select:focus, textarea:focus, button:focus {
  outline: none;
@@ -74,22 +58,24 @@
  color: unset;
}

// ::-webkit-scrollbar {
//   width: 4px;
//   height: 4px;
// }
// ::-webkit-scrollbar-thumb {
//   border-radius: 5px;
//   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
//   background: rgba(0,0,0,0.2);
// }
// ::-webkit-scrollbar-track {/*滚动条里面轨道*/
//   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
//   border-radius: 0;
//   background: rgba(0,0,0,0.1);
// }

// 重置按钮中文字与图标距离
.ant-btn > .anticon + span, .ant-btn > span + .anticon {
  margin-left: 5px;
}

// 设置下拉搜索滚动条样式
.ant-select-dropdown-menu::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.ant-select-dropdown-menu::-webkit-scrollbar-thumb {
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
  background: rgba(0, 0, 0, 0.13);
}
.ant-select-dropdown-menu::-webkit-scrollbar-track {/*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  background: rgba(0, 0, 0, 0);
}

 src/components/header/index.scss

@@ -3,7 +3,7 @@
.header-container {
  position: fixed;
  // background-color: $header-bg;
  z-index: 10;
  z-index: 1060;
  left: 0;
  top: 0;
  font-weight: bold!important;

 src/components/mainAction/index.jsx

@@ -2,6 +2,7 @@
import PropTypes from 'prop-types'
// import { is, fromJS } from 'immutable'
import { Button, Affix, Modal, notification } from 'antd'
import MutilForm from '@/components/mutilform'
import Api from '@/api'
import './index.scss'

@@ -16,7 +17,11 @@
  }

  state = {

    visible: false,
    formdata: null,
    tabledata: null,
    confirmLoading: false,
    execAction: null
  }
  
  refreshdata = () => {
@@ -24,14 +29,30 @@
  }
  actionTrigger = (item) => {
    let _this = this
    let data = this.props.gettableselected()
    if (item.Ot === 'required' && (!data || data.length === 0)) {
    let data = this.props.gettableselected() || []
    if (item.Ot === 'required' && data.length === 0) {
      // 需要选择行时，校验数据
      notification.warning({
        top: 92,
        message: this.props.dict['main.action.confirm.selectline']
      })
      return
    } else if (item.Ot === 'pop' && data.length !== 1) {
      if (data.length === 0) {
        // 需要选择行时，校验数据
        notification.warning({
          top: 92,
          message: this.props.dict['main.action.confirm.selectline']
        })
        return
      } else {
        // 需要选择单行时，校验数据
        notification.warning({
          top: 92,
          message: this.props.dict['main.action.confirm.selectSingleLine']
        })
        return
      }
    }

    if (item.Action === 'Prompt' || item.Action === 'Delete') {
@@ -60,7 +81,80 @@
        },
        onCancel() {}
      })
    } else if (item.Action === 'Update') {
      Api.getModelFormData(item.MenuID).then(res => {
        if (res.status) {
          this.setState({
            formdata: res.data.map(input => {
              let validate = input.Validate && JSON.parse(input.Validate)
              input.DynOptions = JSON.parse(input.DynOptions)
              input.required = (validate && validate.required) || false
              return input
            }),
            visible: true,
            execAction: item,
            tabledata: data[0]
          })
        }
      })
    }
  }

  getModels = () => {
    return (
      <Modal
        wrapClassName='action-modal'
        title={(this.state.execAction && this.state.execAction.MenuName) || ''}
        visible={this.state.visible}
        width={(this.state.execAction && +this.state.execAction.PopWidth) || 520}
        onOk={this.handleOk}
        confirmLoading={this.state.confirmLoading}
        onCancel={this.handleCancel}
      >
        {this.state.formdata &&
          <MutilForm
            dict={this.props.dict}
            formlist={this.state.formdata}
            data={this.state.tabledata}
            wrappedComponentRef={(inst) => this.formRef = inst}
          />}
      </Modal>
    )
  }

  handleOk = () => {
    this.formRef.handleConfirm().then(res => {
      this.setState({
        confirmLoading: true
      })
      console.log(res)
      Api.setActionSubmit({
        func: 'SetActionSubmitSuccess'
      }).then((res) => {
        if (res.status) {
          notification.success({
            top: 92,
            message: this.props.dict['main.action.confirm.success']
          })
          this.setState({
            confirmLoading: false,
            visible: false
          })
        } else {
          notification.error({
            top: 92,
            message: res.message
          })
        }
      })
    }, () => {})
  }

  handleCancel = () => {
    this.setState({
      visible: false
    })
    this.formRef.handleReset()
  }

  UNSAFE_componentWillMount () {
@@ -87,6 +181,7 @@
                >{item.MenuName}</Button>
              )
            })}
            {this.getModels()}
          </div>
        </Affix>
      )

 src/components/mainAction/index.scss

@@ -5,4 +5,31 @@
    margin-right: 15px;
    margin-bottom: 10px;
  }
}
// 设置模态框样式，规定最大最小高度，重置滚动条
.action-modal {
  .ant-modal {
    max-width: 95vw;
  }
  .ant-modal-body {
    max-height: calc(100vh - 235px);
    min-height: 150px;
    overflow-y: auto;
    padding-bottom: 35px;
  }
  .ant-modal-body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  .ant-modal-body::-webkit-scrollbar-thumb {
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
    background: rgba(0, 0, 0, 0.13);
  }
  .ant-modal-body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    background: rgba(0, 0, 0, 0);
  }
}

 src/components/mainSearch/index.jsx

@@ -52,7 +52,7 @@
        fields.push(
          <Col span={6} key={index}>
            <Form.Item label={item.Label}>
              {getFieldDecorator(item.FieldName)(<Input placeholder="" />)}
              {getFieldDecorator(item.FieldName)(<Input placeholder="" autoComplete="off" />)}
            </Form.Item>
          </Col>
        )

 src/components/mainTable/index.jsx

@@ -29,10 +29,11 @@
        align: item.Align,
        dataIndex: item.FieldName,
        title: item.Label,
        // fixed: index < 3,
        sorter: item.IsSort === 'true',
        filterMultiple: item.CDefine1 === 'true',
        filters: item.CDefine2 && JSON.parse(item.CDefine2),
        width: _width,
        width: _width * 30,
        render: (text, record) => (
          <div style={{ wordWrap: 'break-word', wordBreak: 'break-word', minWidth: _width + 'px' }}>
            {text}

 src/components/mutilform/index.jsx

New file
@@ -0,0 +1,196 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Select, DatePicker } from 'antd'
import moment from 'moment'
import Utils from '@/utils/utils.js'
import './index.scss'

const {MonthPicker, WeekPicker} = DatePicker
const dateFormat = 'YYYY-MM-DD'
const weekFormat = 'YYYYMMDD'
const monthFormat = 'YYYY-MM'

class MainSearch extends Component {
  static propTpyes = {
    formlist: PropTypes.array, // 搜索条件列表
    dict: PropTypes.object, // 字典项
    data: PropTypes.object // 表格数据
  }

  state = {
    formats: null, // 事件校验规则
    match: null // 搜索条件匹配规则
  }

  UNSAFE_componentWillMount () {
    let formats = {}
    let match = {}
    this.props.formlist.forEach(item => {
      if (item.Type === 'date') {
        // formats[item.FieldName] = dateFormat
        formats[item.FieldName] = weekFormat
      } else if (item.ID === 'WHE1400200905') {
        formats[item.FieldName] = monthFormat
      }
      match[item.FieldName] = item.Op
    })
    this.setState({
      formats: formats,
      match: match
    })
  }

  getFields() {
    const { getFieldDecorator } = this.props.form
    const fields = []
    this.props.formlist.forEach((item, index) => {
      if (item.InputType === 'text' || item.InputType === 'string') { // 文本搜索
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.Label}>
              {getFieldDecorator(item.FieldName, {
                initialValue: this.props.data[item.FieldName],
                rules: [
                  {
                    required: item.required,
                    message: this.props.dict['main.form.required.input'] + item.Label + '!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off" disabled={item.ReadOnly === 'true'} />)}
            </Form.Item>
          </Col>
        )
      } else if (item.InputType === 'select') { // 下拉搜索
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.Label}>
              {getFieldDecorator(item.FieldName, {
                initialValue: this.props.data[item.FieldName],
                rules: [
                  {
                    required: item.required,
                    message: this.props.dict['main.form.required.select'] + item.Label + '!'
                  }
                ]
              })(
                <Select
                  showSearch
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                >
                  {item.DynOptions.map(option =>
                    <Select.Option id={option.id} title={option.text} key={option.id} value={option.id}>{option.text}</Select.Option>
                  )}
                </Select>
              )}
            </Form.Item>
          </Col>
        )
      } else if (item.InputType === 'date') { // 时间搜索
        if (item.ID === 'WHE14002009024') {
          fields.push(
            <Col span={12} key={index}>
              <Form.Item label={item.Label}>
                {getFieldDecorator(item.FieldName, {initialValue: moment('2019-09-14', dateFormat) })(
                  <DatePicker format={dateFormat} />
                )}
              </Form.Item>
            </Col>
          )
        } else if (item.ID === 'WHE1400200905') {
          fields.push(
            <Col span={12} key={index}>
              <Form.Item label={item.Label}>
                {getFieldDecorator(item.FieldName, {initialValue: moment('2019-09', monthFormat) })(
                  <MonthPicker format={monthFormat} />
                )}
              </Form.Item>
            </Col>
          )
        } else if (item.ID === 'WHE1400200902') {
          fields.push(
            <Col span={12} key={index}>
              <Form.Item label={item.Label}>
                {getFieldDecorator(item.FieldName, {initialValue: moment('20190906', weekFormat) })(
                  <WeekPicker />
                )}
              </Form.Item>
            </Col>
          )
        }
      }
    })
    
    return fields
  }

  handleConfirm = () => {
    // 表单提交时检查输入值是否正确
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          resolve(values)
        } else {
          reject(err)
        }
      })
    })
  }

  handleReset = () => {
    // 重置
    this.props.form.resetFields()
  }

  getFieldsValues = (searches) => {
    // 获取搜索条件值
    let search = []
    Object.keys(searches).forEach(key => {
      if (searches[key] && typeof(searches[key]) === 'object') {
        if (this.state.formats[key] === weekFormat) {
          search.push({
            type: 'date',
            key: key,
            value: moment(searches[key]).startOf('week').format(this.state.formats[key]) + ' ' + moment(searches[key]).endOf('week').format(this.state.formats[key]),
            op: this.state.match[key]
          })
        } else {
          search.push({
            type: 'date',
            key: key,
            value: moment(searches[key]).format(this.state.formats[key]),
            op: this.state.match[key]
          })
        }
      } else if (searches[key] && searches[key] !== '-1') {
        search.push({
          type: 'text',
          key: key,
          value: searches[key],
          op: this.state.match[key]
        })
      }
    })
    search = Utils.jointsearchkey(search)
    this.props.refreshdata(search)
  }

  render() {
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    }
    return (
      <Form {...formItemLayout} className="ant-advanced-search-form">
        <Row gutter={24}>{this.getFields()}</Row>
      </Form>
    )
  }
}

export default Form.create()(MainSearch)

 src/components/mutilform/index.scss

New file
@@ -0,0 +1,14 @@
.ant-advanced-search-form.main-search {
  padding: 0px 24px 20px;
  border-bottom: 1px solid #d9d9d9;
  .ant-form-item {
    display: flex;
    margin-bottom: 10px;
  }
  .ant-form-item-control-wrapper {
    flex: 1;
  }
  .ant-form-item-label {
    width: 100px;
  }
}

 src/components/sidemenu/index.jsx

@@ -43,7 +43,7 @@
        subMenulist: result.data.map((item, i) => {
          if (item.children) {
            item.children = item.children.map((child, n) => {
              let _msg = window.btoa(menu.MenuID + '&' + i + '&' + n + '&' + msg)
              let _msg = window.btoa(menu.MenuID + '&' + i + '&' + n + '&' + msg) // 待完善
              child.src = '#/main/' + _msg
              return child
            })

 src/locales/en-US/main.js

@@ -6,5 +6,8 @@
  'main.pagination.items': 'items',
  'main.action.confirm.tip': 'Do you want to execute?',
  'main.action.confirm.success': 'Execute successfully!',
  'main.action.confirm.selectline': 'Please select a line!'
  'main.action.confirm.selectline': 'Please select a line!',
  'main.action.confirm.selectSingleLine': 'Please select a single row of data!',
  'main.form.required.input': 'Please input ',
  'main.form.required.select': 'Please select '
}

 src/locales/zh-CN/main.js

@@ -6,5 +6,8 @@
  'main.pagination.items': '条',
  'main.action.confirm.tip': '确定要执行吗?',
  'main.action.confirm.success': '执行成功！',
  'main.action.confirm.selectline': '请选择行!'
  'main.action.confirm.selectline': '请选择行!',
  'main.action.confirm.selectSingleLine': '请选择单行数据!',
  'main.form.required.input': '请输入',
  'main.form.required.select': '请选择'
}

 src/tabviews/commontable/index.jsx

@@ -55,7 +55,7 @@
        newconfig.columns = result.columns.map(column => {
          return column
        })
        newconfig.columns.length = 5
        newconfig.columns.length = 3
      }
      newconfig.fixed = {
        fixaction: true,

 src/views/login/index.jsx

@@ -199,7 +199,7 @@
              </Dropdown>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" className="login-form-button" disabled={this.state.isDisabled}>
              <Button type="primary" htmlType="submit" className="login-form-button" disabled={this.state.isDisabled} loading={this.state.isDisabled}>
                {this.state.dict['login.submit']}
              </Button>
            </Form.Item>

 src/views/login/index.scss

@@ -57,4 +57,9 @@
      margin-right: 15px;
    }
  }
  .ant-btn-primary[disabled] {
    color: #fff;
    background-color: #40a9ff;
    border-color: #40a9ff;
  }
}