2021-02-19

king

2021-02-19 717775a33f61d867b8bdd6cac9b33211dcb5a34e

 src/views/mobmanage/index.jsx

@@ -1,21 +1,26 @@
import React, {Component} from 'react'
// import { fromJS } from 'immutable'
import { Spin, notification, Button, Table, Modal } from 'antd'
import { fromJS } from 'immutable'
import { Spin, notification, Button, Table, Modal, ConfigProvider } from 'antd'
import moment from 'moment'
import enUS from 'antd/es/locale/en_US'
import zhCN from 'antd/es/locale/zh_CN'

import Api from '@/api'
import Utils from '@/utils/utils.js'
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'

const { confirm } = Modal

const _locale = localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
const Header = asyncComponent(() => import('@/mob/header'))
const MutilForm = asyncComponent(() => import('./mutilform'))
const SubMutilForm = asyncComponent(() => import('./submutilform'))

class AppManage extends Component {
  state = {
    loading: false,
    applist: [],
    appsublist: [],
    columns: [
      { title: '应用名称', dataIndex: 'remark', key: 'remark', align: 'center' },
      { title: '应用编码', dataIndex: 'kei_no', key: 'kei_no', align: 'center' },
@@ -40,7 +45,7 @@
      },
      {
        title: '权限管理', dataIndex: 'role_type', key: 'role_type', align: 'center',
        render: (text, record) => text === 'false' ? '不需要' : '需要'
        render: (text, record) => text === 'false' ? '不启用' : '启用'
      },
      {
        title: '短连接', dataIndex: 'link_type', key: 'link_type', align: 'center',
@@ -87,17 +92,25 @@

    Api.getCloudConfig(param).then(result => {
      if (result.status) {
        let selectApp = null
        let applist = result.data.map(item => {
          item.sublist = item.data_detail || []
          item.sublist = item.sublist.map(cell => {
            cell.ID = cell.d_id
            return cell
          })

          if (this.state.selectApp && this.state.selectApp.ID === item.ID) {
            selectApp = item
          }

          return item
        })

        this.setState({
          loading: false,
          applist: result.data.map(item => {
            item.sublist = item.data_detail || []
            item.sublist = item.sublist.map(cell => {
              cell.ID = cell.d_id
              return cell
            })

            return item
          })
          applist: applist,
          selectApp
        })

      } else {
@@ -114,11 +127,107 @@
  }

  deleteApp = (record) => {
    console.log(record)
    const _this = this

    confirm({
      content: '确定删除《' + record.remark + '》吗？',
      onOk() {
        return new Promise(resolve => {
          let param = {
            func: 's_kei_del',
            ID: record.ID,
            kei_no: record.kei_no
          }
    
          Api.getCloudConfig(param).then(result => {
            if (result.status) {
              notification.success({
                top: 92,
                message: '删除成功！',
                duration: 5
              })

              _this.setState({
                selectedRowKeys: [],
                selectedSubRowKeys: [],
                selectApp: null,
                selectSubApp: null,
                loading: true
              })
              _this.getAppList()
            } else {
              notification.warning({
                top: 92,
                message: result.message,
                duration: 5
              })
            }
            resolve()
          }, () => {
            resolve()
          })
        })
      },
      onCancel() {}
    })
  }
  
  deleteSubApp = (record) => {
    console.log(record)
    const { selectApp } = this.state
    const _this = this

    let param = {
      func: 's_kei_addupt',
      ID: selectApp.ID,
      exec_type: 'y',
      remark: selectApp.remark,
      kei_no: selectApp.kei_no,
      LText: ''
    }

    param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
    param.secretkey = Utils.encrypt('', param.timestamp)

    let sublist = fromJS(selectApp.sublist).toJS()
    sublist = sublist.filter(item => item.ID !== record.ID)

    param.LText = sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','${item.login_types || 'true'}','${item.link_type || 'true'}','${item.role_type || 'true'}','${item.lang || 'zh-CN'}'`)
    param.LText = param.LText.join(' union all ')
    param.LText = Utils.formatOptions(param.LText)
    
    confirm({
      content: '确定删除该子应用吗？',
      onOk() {
        return new Promise(resolve => {
          Api.getCloudConfig(param).then(result => {
            if (result.status) {
              notification.success({
                top: 92,
                message: '操作成功！',
                duration: 5
              })
      
              _this.setState({
                selectedSubRowKeys: [],
                selectSubApp: null,
                loading: true
              })
              _this.getAppList()
            } else {
              notification.warning({
                top: 92,
                message: result.message,
                duration: 5
              })
            }
            resolve()
          }, () => {
            resolve()
          })
        })
      },
      onCancel() {}
    })
  }
  
  jumpApp = (item) => {
@@ -146,13 +255,14 @@
   * @description 点击整行，触发切换， 判断是否可选，单选或多选，进行对应操作
   */
  changeRow = (record) => {
    this.setState({ selectedRowKeys: [record.ID], selectApp: record, appsublist: record.sublist || [] })
    this.setState({ selectedRowKeys: [record.ID], selectApp: record })
  }

  /**
   * @description 点击整行，触发切换， 判断是否可选，单选或多选，进行对应操作
   */
  changeSubRow = (record) => {
    console.log(record)
    this.setState({ selectedSubRowKeys: [record.ID], selectSubApp: record })
  }

@@ -176,6 +286,13 @@
      notification.warning({
        top: 92,
        message: '请选择需要编辑的子应用！',
        duration: 5
      })
      return
    } else if (!this.state.selectApp) {
      notification.warning({
        top: 92,
        message: '请选择应用！',
        duration: 5
      })
      return
@@ -207,7 +324,7 @@
      param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
      param.secretkey = Utils.encrypt('', param.timestamp)

      if (visible === 'edit' && selectApp.sublist && selectApp.sublist.length > 0) {
      if (visible === 'edit') {
        param.LText = selectApp.sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','${item.login_types || 'true'}','${item.link_type || 'true'}','${item.role_type || 'true'}','${item.lang || 'zh-CN'}'`)
        param.LText = param.LText.join(' union all ')
        param.LText = Utils.formatOptions(param.LText)
@@ -222,6 +339,10 @@
          })

          this.setState({
            selectedRowKeys: [],
            selectedSubRowKeys: [],
            selectApp: null,
            selectSubApp: null,
            confirmloading: false,
            visible: false,
            loading: true
@@ -246,32 +367,67 @@
  }

  submitSubCard = () => {
    const { card } = this.state
    const { selectApp, subVisible, selectSubApp } = this.state

    this.submobcardRef.handleConfirm().then(res => {
      if (subVisible === 'plus' && selectApp.sublist.filter(item => item.typename === res.typename).length > 0) {
        notification.warning({
          top: 92,
          message: '应用类型已存在！',
          duration: 5
        })
        return
      }
      this.setState({
        confirmloading: true
      })

      let param = {
        func: 's_kei_addupt',
        ID: card ? card.uuid : Utils.getuuid(),
        TypeName: res.type,
        remark: res.name,
        kei_no: res.keiNo
        ID: selectApp.ID,
        exec_type: 'y',
        remark: selectApp.remark,
        kei_no: selectApp.kei_no,
        LText: ''
      }

      param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
      param.secretkey = Utils.encrypt('', param.timestamp)

      let sublist = fromJS(selectApp.sublist).toJS()
      if (subVisible === 'plus') {
        sublist.unshift({
          ID: Utils.getuuid(),
          ...res
        })
      } else {
        res.ID = selectSubApp.ID
        sublist = sublist.map(item => {
          if (item.ID !== res.ID) {
            return item
          } else {
            return res
          }
        })
      }

      param.LText = sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','${item.login_types || 'true'}','${item.link_type || 'true'}','${item.role_type || 'true'}','${item.lang || 'zh-CN'}'`)
      param.LText = param.LText.join(' union all ')
      param.LText = Utils.formatOptions(param.LText)

      Api.getCloudConfig(param).then(result => {
        if (result.status) {
          notification.success({
            top: 92,
            message: card ? '修改成功！' : '添加成功！',
            message: '操作成功！',
            duration: 5
          })

          this.setState({
            selectedSubRowKeys: [],
            selectSubApp: null,
            confirmloading: false,
            visible: false,
            subVisible: false,
            loading: true
          })
          this.getAppList()
@@ -294,74 +450,76 @@
  }

  render () {
    const { loading, visible, subVisible, columns, applist, appsublist, selectedRowKeys, selectedSubRowKeys, subcolumns, selectApp, selectSubApp } = this.state
    const { loading, visible, subVisible, columns, applist, selectedRowKeys, selectedSubRowKeys, subcolumns, selectApp, selectSubApp } = this.state

    return (
      <div className="mk-app-manage">
        <Header view="manage" />
        {loading ?
          <div className="loading-mask">
            <div className="ant-spin-blur"></div>
            <Spin />
          </div> : null
        }
        <div className="app-table">
          <div className="app-action">
            <Button className="mk-green" onClick={() => this.trigerApp('plus')}>添加</Button>
            <Button className="mk-purple" onClick={() => this.trigerApp('edit')}>修改</Button>
        <ConfigProvider locale={_locale}>
          <Header view="manage" />
          {loading ?
            <div className="loading-mask">
              <div className="ant-spin-blur"></div>
              <Spin />
            </div> : null
          }
          <div className="app-table">
            <div className="app-action">
              <Button className="mk-green" onClick={() => this.trigerApp('plus')}>添加</Button>
              <Button className="mk-purple" onClick={() => this.trigerApp('edit')}>修改</Button>
            </div>
            <Table
              rowKey="ID"
              columns={columns}
              dataSource={applist}
              pagination={false}
              rowSelection={{ type: 'radio', selectedRowKeys, onChange: this.onSelectChange }}
              onRow={(record) => ({ onClick: () => {this.changeRow(record)} })}
            />
          </div>
          <Table
            rowKey="ID"
            columns={columns}
            dataSource={applist}
            pagination={false}
            rowSelection={{ type: 'radio', selectedRowKeys, onChange: this.onSelectChange }}
            onRow={(record) => ({ onClick: () => {this.changeRow(record)} })}
          />
        </div>
        <div className="app-table">
          <div className="sub-app-title"><span>子应用</span></div>
          <div className="app-action">
            <Button className="mk-green" onClick={() => this.trigerSubApp('plus')}>添加</Button>
            <Button className="mk-purple" onClick={() => this.trigerSubApp('edit')}>修改</Button>
          <div className="app-table">
            <div className="sub-app-title"><span>子应用</span></div>
            <div className="app-action">
              <Button className="mk-green" onClick={() => this.trigerSubApp('plus')}>添加</Button>
              <Button className="mk-purple" onClick={() => this.trigerSubApp('edit')}>修改</Button>
            </div>
            <Table
              rowKey="ID"
              columns={subcolumns}
              dataSource={selectApp ? selectApp.sublist : []}
              pagination={false}
              rowSelection={{ type: 'radio', selectedRowKeys: selectedSubRowKeys, onChange: this.onSubChange }}
              onRow={(record) => ({ onClick: () => {this.changeSubRow(record)} })}
            />
          </div>
          <Table
            rowKey="ID"
            columns={subcolumns}
            dataSource={appsublist}
            pagination={false}
            rowSelection={{ type: 'radio', selectedRowKeys: selectedSubRowKeys, onChange: this.onSubChange }}
            onRow={(record) => ({ onClick: () => {this.changeSubRow(record)} })}
          />
        </div>
        <Modal
          title={'编辑应用'}
          width={'600px'}
          maskClosable={false}
          visible={!!visible}
          onCancel={() => this.setState({visible: false})}
          confirmLoading={this.state.confirmloading}
          onOk={this.submitCard}
          cancelText="取消"
          okText="确定"
          destroyOnClose
        >
          <MutilForm type={visible} card={visible === 'edit' ? selectApp : ''} wrappedComponentRef={(inst) => this.mobcardRef = inst} inputSubmit={this.submitCard} />
        </Modal>
        <Modal
          title={'编辑子应用'}
          width={'600px'}
          maskClosable={false}
          visible={!!subVisible}
          onCancel={() => this.setState({subVisible: false})}
          confirmLoading={this.state.confirmloading}
          onOk={this.submitSubCard}
          cancelText="取消"
          okText="确定"
          destroyOnClose
        >
          <MutilForm type={subVisible} card={subVisible === 'edit' ? selectSubApp : ''} wrappedComponentRef={(inst) => this.submobcardRef = inst} inputSubmit={this.submitSubCard} />
        </Modal>
          <Modal
            title={'编辑应用'}
            width={'600px'}
            maskClosable={false}
            visible={!!visible}
            onCancel={() => this.setState({visible: false})}
            confirmLoading={this.state.confirmloading}
            onOk={this.submitCard}
            cancelText="取消"
            okText="确定"
            destroyOnClose
          >
            <MutilForm type={visible} card={visible === 'edit' ? selectApp : ''} wrappedComponentRef={(inst) => this.mobcardRef = inst} inputSubmit={this.submitCard} />
          </Modal>
          <Modal
            title={'编辑子应用'}
            width={'600px'}
            maskClosable={false}
            visible={!!subVisible}
            onCancel={() => this.setState({subVisible: false})}
            confirmLoading={this.state.confirmloading}
            onOk={this.submitSubCard}
            cancelText="取消"
            okText="确定"
            destroyOnClose
          >
            <SubMutilForm type={subVisible} card={subVisible === 'edit' ? selectSubApp : ''} wrappedComponentRef={(inst) => this.submobcardRef = inst} inputSubmit={this.submitSubCard} />
          </Modal>
        </ConfigProvider>
      </div>
    )
  }