2024-06-21

king

2024-06-21 2bccb9ec7bdefe23292a22bc153463cfa1479a49

 src/views/appmanage/index.jsx

@@ -1,10 +1,9 @@
import React, {Component} from 'react'
import { fromJS } from 'immutable'
import { Spin, notification, Input, Button, Table, Modal, ConfigProvider, Typography, Row, Col, Tooltip } from 'antd'
import { Spin, notification, Input, Button, Table, Modal, Typography, Row, Col, Tooltip } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'
import moment from 'moment'
import md5 from 'md5'
import zhCN from 'antd/es/locale/zh_CN'

import Api from '@/api'
import Utils from '@/utils/utils.js'
@@ -1084,222 +1083,220 @@

    return (
      <div className="mk-app-manage">
        <ConfigProvider locale={zhCN}>
          <Header view="manage" />
          {loading ?
            <div className="loading-mask">
              <Spin size="large" />
            </div> : null
          }
          <div className="view-wrap">
            <div className="left-view">
              <div className="app-table">
                <div className="app-action">
                  <Button className="mk-green" onClick={() => this.setState({ visible: 'plus' })}>添加应用</Button>
                </div>
                <Table
                  rowKey="ID"
                  columns={columns}
                  dataSource={applist}
                  pagination={false}
                  rowSelection={{ type: 'radio', selectedRowKeys: selectApp ? [selectApp.ID] : [], onChange: this.onSelectChange }}
                  onRow={(record) => ({ onClick: () => this.setState({ selectApp: record })})}
                />
        <Header view="manage" />
        {loading ?
          <div className="loading-mask">
            <Spin size="large" />
          </div> : null
        }
        <div className="view-wrap">
          <div className="left-view">
            <div className="app-table">
              <div className="app-action">
                <Button className="mk-green" onClick={() => this.setState({ visible: 'plus' })}>添加应用</Button>
              </div>
              <div className={'trans-table' + (this.state.transTotal <= 10 ? ' no-footer' : '')}>
                <div className="app-action">
                  <Button className="mk-green" onClick={() => this.setState({ transVisible: 'plus' })}>添加传输号</Button>
                  <Search placeholder="综合搜索" onSearch={value => this.tranSearch(value)} enterButton />
                </div>
                <Table
                  rowKey="ID"
                  columns={transcolumns}
                  dataSource={translist}
                  pagination={{
                    current: this.state.transIndex,
                    pageSize: 10,
                    total: this.state.transTotal || 0,
                    showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条`
                  }}
                  rowSelection={{ type: 'radio', selectedRowKeys: selectTran ? [selectTran.ID] : [], onChange: this.onTransChange }}
                  onRow={(record) => ({ onClick: () => {
                    if (this.forbid) {
                      this.forbid = false
                      return
                    }
                    this.onTransSelect(record)
                  }})}
                  onChange={this.changeTable}
                />
              <Table
                rowKey="ID"
                columns={columns}
                dataSource={applist}
                pagination={false}
                rowSelection={{ type: 'radio', selectedRowKeys: selectApp ? [selectApp.ID] : [], onChange: this.onSelectChange }}
                onRow={(record) => ({ onClick: () => this.setState({ selectApp: record })})}
              />
            </div>
            <div className={'trans-table' + (this.state.transTotal <= 10 ? ' no-footer' : '')}>
              <div className="app-action">
                <Button className="mk-green" onClick={() => this.setState({ transVisible: 'plus' })}>添加传输号</Button>
                <Search placeholder="综合搜索" onSearch={value => this.tranSearch(value)} enterButton />
              </div>
              {selectTran ? <div className="script-table">
                <div className="app-action">
                  <Button className="mk-green" onClick={() => this.setState({ scriptVisible: true })}>添加脚本</Button>
                  <Button className="mk-danger" onClick={this.deleteScripts} style={{marginLeft: '15px'}}>删除</Button>
                  <Search placeholder="综合搜索" defaultValue={this.state.scriptSearchKey} onSearch={value => this.scriptSearch(value)} enterButton />
                </div>
                <Table
                  rowKey="ID"
                  columns={scriptcolumns}
                  dataSource={scriptlist}
                  pagination={{
                    current: this.state.scriptIndex,
                    pageSize: 10,
                    total: this.state.scriptTotal || 0,
                    showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条`
                  }}
                  rowSelection={{ type: 'checkbox', selectedRowKeys: selectScriptKeys, onChange: this.onScriptChange }}
                  onRow={(record) => ({ onClick: () => this.onScriptSelect(record)})}
                  onChange={this.changeScriptTable}
                />
              </div> : null}
              <Table
                rowKey="ID"
                columns={transcolumns}
                dataSource={translist}
                pagination={{
                  current: this.state.transIndex,
                  pageSize: 10,
                  total: this.state.transTotal || 0,
                  showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条`
                }}
                rowSelection={{ type: 'radio', selectedRowKeys: selectTran ? [selectTran.ID] : [], onChange: this.onTransChange }}
                onRow={(record) => ({ onClick: () => {
                  if (this.forbid) {
                    this.forbid = false
                    return
                  }
                  this.onTransSelect(record)
                }})}
                onChange={this.changeTable}
              />
            </div>
            <div className="right-view">
              {selectApp ? <div className="app-title">{selectApp.remark}</div> : null}
              {selectApp && selectApp.sublist.map((item, index) => {
                let css = skinStyle[item.css] ? skinStyle[item.css].name : ''
                let color = skinStyle[item.css] ? skinStyle[item.css].color : '#e8e8e8'
                let binding = ''
                if (item.user_binding === 'true') {
                  binding = '用户绑定'
                }
                if (item.share === 'true') {
                  binding = binding ? binding + '、分享' : '分享'
                }

                return (
                  <div className="sub-app" key={index} style={{borderColor: color}}>
                    <Row>
                      <Col span={12}>
                        <div className="app-item">
                          <div className="label">应用类型:</div>
                          <div className="content" style={{fontSize: '18px', fontWeight: 600}}>{item.typename}</div>
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          <div className="label">语言:</div>
                          <div className="content" style={{textDecoration: 'underline'}}>{langs[item.lang]}</div>
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          <div className="label">权限管理:</div>
                          <div className="content">{item.role_type === 'false' ? '不启用' : '启用'}</div>
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          {/* <div className="label">皮肤:</div>
                          <div className="content" style={{color: color}}>{css}</div> */}
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          <div className="label">皮肤:</div>
                          <div className="content" style={{color: color}}>{css}</div>
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          {/* {binding ? <div className="label">
                            <Tooltip placement="topLeft" title="微信公众号登录时，系统用户与微信用户的绑定方式。">
                              <QuestionCircleOutlined className="mk-form-tip" />
                              用户绑定:
                            </Tooltip>
                          </div> : null} */}
                          {binding ? <div className="label">
                            <Tooltip placement="topLeft" title="微信公众号或小程序中，绑定系统用户、自定义分享等功能。">
                              <QuestionCircleOutlined className="mk-form-tip" />
                              扩展功能:
                            </Tooltip>
                          </div> : null}
                          <div className="content">{binding}</div>
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          <div className="label">标题:</div>
                          <div className="content">{item.title || '无'}</div>
                        </div>
                      </Col>
                      <Col span={12}>
                        <div className="app-item">
                          <div className="label">网站头像:</div>
                          <div className="content">{item.favicon ? <img style={{width: '18px', height: '18px', borderRadius: '4px'}} src={item.favicon} alt="" /> : '无'}</div>
                        </div>
                      </Col>
                    </Row>
                    <div className="action">
                      {item.lang !== 'zh-CN' ? <TransMenu app={item} supApp={selectApp} /> : null}
                      <Button type="link" onClick={() => this.jumpMenu(item)} style={{color: 'rgba(30, 228, 224, 1)'}}>菜单&权限</Button>
                      <Button type="link" onClick={() => this.setState({ selectSubApp: item, subVisible: 'edit' })} style={{color: '#8E44AD'}}>修改</Button>
                      <Button type="link" onClick={() => this.deleteSubApp(item)} style={{color: '#ff4d4f'}}>删除</Button>
                      <Button type="link" onClick={() => this.jumpApp(item)}>编辑应用</Button>
                      <Paragraph style={{display: 'inline-block', margin: 0}} copyable={{ text: `${window.GLOB.baseurl}${item.typename === 'pad' ? 'mob' : item.typename}/index.html#/index/${this.state.selectApp.kei_no}/${item.typename !== 'pc' ? item.typename + '/' : ''}${item.lang}` }}></Paragraph>
                    </div>
                  </div>
                )
              })}
            </div>
            {selectTran ? <div className="script-table">
              <div className="app-action">
                <Button className="mk-green" onClick={() => this.setState({ scriptVisible: true })}>添加脚本</Button>
                <Button className="mk-danger" onClick={this.deleteScripts} style={{marginLeft: '15px'}}>删除</Button>
                <Search placeholder="综合搜索" defaultValue={this.state.scriptSearchKey} onSearch={value => this.scriptSearch(value)} enterButton />
              </div>
              <Table
                rowKey="ID"
                columns={scriptcolumns}
                dataSource={scriptlist}
                pagination={{
                  current: this.state.scriptIndex,
                  pageSize: 10,
                  total: this.state.scriptTotal || 0,
                  showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条`
                }}
                rowSelection={{ type: 'checkbox', selectedRowKeys: selectScriptKeys, onChange: this.onScriptChange }}
                onRow={(record) => ({ onClick: () => this.onScriptSelect(record)})}
                onChange={this.changeScriptTable}
              />
            </div> : null}
          </div>
          <Modal
            title={'编辑应用'}
            width={'600px'}
            maskClosable={false}
            visible={visible !== false}
            onCancel={() => this.setState({visible: false, confirmloading: 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={transVisible === 'plus' ? '添加传输号' : '编辑传输号'}
            width={'600px'}
            maskClosable={false}
            visible={transVisible !== false}
            onCancel={() => this.setState({transVisible: false, confirmloading: false})}
            confirmLoading={this.state.confirmloading}
            onOk={this.submitTrans}
            cancelText="取消"
            okText="确定"
            destroyOnClose
          >
            <TransForm type={transVisible} card={transVisible === 'edit' ? this.state.editTran : ''} wrappedComponentRef={(inst) => this.transRef = inst} inputSubmit={this.submitTrans} />
          </Modal>
          <Modal
            title={'添加脚本'}
            width={900}
            maskClosable={false}
            visible={scriptVisible}
            onCancel={() => this.setState({scriptVisible: false, confirmloading: false})}
            confirmLoading={this.state.confirmloading}
            onOk={this.submitScript}
            cancelText="取消"
            okText="确定"
            destroyOnClose
          >
            <ScriptForm applist={applist} wrappedComponentRef={(inst) => this.scriptRef = inst} inputSubmit={this.submitScript} />
          </Modal>
          <Modal
            title={subVisible === 'plus' ? '添加子应用' : '编辑子应用'}
            width={'850px'}
            maskClosable={false}
            visible={subVisible !== false}
            onCancel={() => this.setState({subVisible: false, confirmloading: 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 className="right-view">
            {selectApp ? <div className="app-title">{selectApp.remark}</div> : null}
            {selectApp && selectApp.sublist.map((item, index) => {
              let css = skinStyle[item.css] ? skinStyle[item.css].name : ''
              let color = skinStyle[item.css] ? skinStyle[item.css].color : '#e8e8e8'
              let binding = ''
              if (item.user_binding === 'true') {
                binding = '用户绑定'
              }
              if (item.share === 'true') {
                binding = binding ? binding + '、分享' : '分享'
              }

              return (
                <div className="sub-app" key={index} style={{borderColor: color}}>
                  <Row>
                    <Col span={12}>
                      <div className="app-item">
                        <div className="label">应用类型:</div>
                        <div className="content" style={{fontSize: '18px', fontWeight: 600}}>{item.typename}</div>
                      </div>
                    </Col>
                    <Col span={12}>
                      <div className="app-item">
                        <div className="label">语言:</div>
                        <div className="content" style={{textDecoration: 'underline'}}>{langs[item.lang]}</div>
                      </div>
                    </Col>
                    <Col span={12}>
                      <div className="app-item">
                        <div className="label">权限管理:</div>
                        <div className="content">{item.role_type === 'false' ? '不启用' : '启用'}</div>
                      </div>
                    </Col>
                    <Col span={12}>
                      <div className="app-item">
                        {/* <div className="label">皮肤:</div>
                        <div className="content" style={{color: color}}>{css}</div> */}
                      </div>
                    </Col>
                    <Col span={12}>
                      <div className="app-item">
                        <div className="label">皮肤:</div>
                        <div className="content" style={{color: color}}>{css}</div>
                      </div>
                    </Col>
                    <Col span={12}>
                      <div className="app-item">
                        {/* {binding ? <div className="label">
                          <Tooltip placement="topLeft" title="微信公众号登录时，系统用户与微信用户的绑定方式。">
                            <QuestionCircleOutlined className="mk-form-tip" />
                            用户绑定:
                          </Tooltip>
                        </div> : null} */}
                        {binding ? <div className="label">
                          <Tooltip placement="topLeft" title="微信公众号或小程序中，绑定系统用户、自定义分享等功能。">
                            <QuestionCircleOutlined className="mk-form-tip" />
                            扩展功能:
                          </Tooltip>
                        </div> : null}
                        <div className="content">{binding}</div>
                      </div>
                    </Col>
                    <Col span={12}>
                      <div className="app-item">
                        <div className="label">标题:</div>
                        <div className="content">{item.title || '无'}</div>
                      </div>
                    </Col>
                    <Col span={12}>
                      <div className="app-item">
                        <div className="label">网站头像:</div>
                        <div className="content">{item.favicon ? <img style={{width: '18px', height: '18px', borderRadius: '4px'}} src={item.favicon} alt="" /> : '无'}</div>
                      </div>
                    </Col>
                  </Row>
                  <div className="action">
                    {item.lang !== 'zh-CN' ? <TransMenu app={item} supApp={selectApp} /> : null}
                    <Button type="link" onClick={() => this.jumpMenu(item)} style={{color: 'rgba(30, 228, 224, 1)'}}>菜单&权限</Button>
                    <Button type="link" onClick={() => this.setState({ selectSubApp: item, subVisible: 'edit' })} style={{color: '#8E44AD'}}>修改</Button>
                    <Button type="link" onClick={() => this.deleteSubApp(item)} style={{color: '#ff4d4f'}}>删除</Button>
                    <Button type="link" onClick={() => this.jumpApp(item)}>编辑应用</Button>
                    <Paragraph style={{display: 'inline-block', margin: 0}} copyable={{ text: `${window.GLOB.baseurl}${item.typename === 'pad' ? 'mob' : item.typename}/index.html#/index/${this.state.selectApp.kei_no}/${item.typename !== 'pc' ? item.typename + '/' : ''}${item.lang}` }}></Paragraph>
                  </div>
                </div>
              )
            })}
          </div>
        </div>
        <Modal
          title={'编辑应用'}
          width={'600px'}
          maskClosable={false}
          visible={visible !== false}
          onCancel={() => this.setState({visible: false, confirmloading: 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={transVisible === 'plus' ? '添加传输号' : '编辑传输号'}
          width={'600px'}
          maskClosable={false}
          visible={transVisible !== false}
          onCancel={() => this.setState({transVisible: false, confirmloading: false})}
          confirmLoading={this.state.confirmloading}
          onOk={this.submitTrans}
          cancelText="取消"
          okText="确定"
          destroyOnClose
        >
          <TransForm type={transVisible} card={transVisible === 'edit' ? this.state.editTran : ''} wrappedComponentRef={(inst) => this.transRef = inst} inputSubmit={this.submitTrans} />
        </Modal>
        <Modal
          title={'添加脚本'}
          width={900}
          maskClosable={false}
          visible={scriptVisible}
          onCancel={() => this.setState({scriptVisible: false, confirmloading: false})}
          confirmLoading={this.state.confirmloading}
          onOk={this.submitScript}
          cancelText="取消"
          okText="确定"
          destroyOnClose
        >
          <ScriptForm applist={applist} wrappedComponentRef={(inst) => this.scriptRef = inst} inputSubmit={this.submitScript} />
        </Modal>
        <Modal
          title={subVisible === 'plus' ? '添加子应用' : '编辑子应用'}
          width={'850px'}
          maskClosable={false}
          visible={subVisible !== false}
          onCancel={() => this.setState({subVisible: false, confirmloading: 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>
      </div>
    )
  }