2021-12-19

king

2021-12-19 9ee3d1f9a09a865188baffdffb85f6ad329c7b09

2021-12-19

 src/assets/mobimg/slider-thumb.svg

New file
@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g transform="translate(-604.000000, -656.000000)" fill="#999999">
            <g transform="translate(592.000000, 644.000000)">
                <g transform="translate(12.000000, 12.000000)">
                    <polygon points="0 3.33333333 2.22222222 3.33333333 2.22222222 17.7777778 0 17.7777778"></polygon>
                    <polygon points="17.7777778 3.33333333 20 3.33333333 20 17.7777778 17.7777778 17.7777778"></polygon>
                    <path d="M10.8888889,0 L9.11111111,0 C8.98888889,0 8.88888889,0.107142857 8.88888889,0.238095238 L8.88888889,19.7619048 C8.88888889,19.8928571 8.98888889,20 9.11111111,20 L10.8888889,20 C11.0111111,20 11.1111111,19.8928571 11.1111111,19.7619048 L11.1111111,0.238095238 C11.1111111,0.107142857 11.0111111,0 10.8888889,0 Z"></path>
                </g>
            </g>
        </g>
    </g>
</svg>

 src/menu/components/share/mobPagination/index.jsx

@@ -20,13 +20,6 @@
          </div>
        </div>
      </div>
      // <Pagination className="mob-pagination" total={5}
      //   current={1}
      //   locale={{
      //     prevText: (<span><LeftOutlined />上一页</span>),
      //     nextText: (<span>下一页<RightOutlined /></span>),
      //   }}
      // />
    )
  }
}

 src/mob/components/search/single-search/index.jsx

@@ -1,7 +1,7 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Popover, Icon, Input } from 'antd'
import { Popover, Icon, Input, Button } from 'antd'

import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
@@ -10,8 +10,6 @@
import getWrapForm from './options'
import MKEmitter from '@/utils/events.js'
import './index.scss'

const { Search } = Input

const NormalForm = asyncIconComponent(() => import('@/components/normalform'))

@@ -46,7 +44,7 @@
        width: 24,
        name: card.name,
        subtype: card.subtype,
        wrap: { name: card.name, width: 24, label: '搜索', field: '', show: 'button' },
        wrap: { name: card.name, width: 24, label: '搜索', field: '', show: 'text' },
        style: {
          marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px',
          paddingLeft: '10px', paddingRight: '10px', paddingTop: '10px', paddingBottom: '10px',
@@ -116,9 +114,9 @@
  }

  getWrapForms = () => {
    const { wrap, action } = this.state.card
    const { wrap } = this.state.card

    return getWrapForm(wrap, action)
    return getWrapForm(wrap)
  }

  updateWrap = (res) => {
@@ -138,8 +136,11 @@

    return (
      <div className="single-search-edit-list" onClick={this.clickComponent} id={card.uuid} style={_style}>
        <Search placeholder={card.wrap.label} value={card.initval} enterButton />
        <Input placeholder={card.labelShow === 'false' ? card.label : ''} value={card.initval} />
        <div className="search-wrap" style={{borderRadius: card.wrap.borderRadius || 0}}>
          <Input placeholder={card.wrap.label} value={card.initval} />
          {card.wrap.scan === 'show' ? <Icon type="scan" /> : null}
          {card.wrap.show === 'text' ? <Button type="primary">搜索</Button> : <Button icon="search" type="primary"></Button>}
        </div>
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">
            <NormalForm title="搜索设置" width={800} update={this.updateWrap} getForms={this.getWrapForms}>

 src/mob/components/search/single-search/index.scss

@@ -13,6 +13,31 @@
    padding: 5px;
    background: rgba(255, 255, 255, 0.55);
  }
  .ant-input, .ant-input:hover, .ant-input:focus {
    border: none;
    box-shadow: none;
  }
  .search-wrap {
    border: 1px solid #d9d9d9;
    display: flex;
    background: #ffffff;
    overflow: hidden;
    .ant-input {
      flex: 1;
      border-radius: 0;
    }
    .anticon-scan {
      font-size: 18px;
      padding: 5px;
      color: #959595;
    }
    .ant-btn {
      border-radius: 0;
      position: relative;
      right: -1px;
      min-width: 45px;
    }
  }
}

.single-search-edit-list::after {

 src/mob/components/search/single-search/options.jsx

@@ -1,20 +1,7 @@
/**
 * @description Wrap表单配置信息
 */
export default function (wrap, action = []) {
  let roleList = sessionStorage.getItem('sysRoles')
  let appType = sessionStorage.getItem('appType')

  if (roleList) {
    try {
      roleList = JSON.parse(roleList)
    } catch (e) {
      roleList = []
    }
  } else {
    roleList = []
  }

export default function (wrap) {
  const wrapForm = [
    {
      type: 'text',
@@ -54,34 +41,34 @@
      type: 'radio',
      field: 'show',
      label: '搜索样式',
      initval: wrap.show || 'button',
      initval: wrap.show || 'text',
      required: false,
      options: [
        {value: 'button', label: '搜索按钮'},
        {value: 'icon', label: '搜索图标'},
        {value: 'input', label: '输入框'},
        {value: 'text', label: '文字'},
        {value: 'icon', label: '图标'},
      ]
    },
    {
      type: 'radio',
      field: 'show',
      label: '搜索按钮',
      initval: wrap.show || 'true',
      field: 'scan',
      label: '扫码',
      initval: wrap.scan || 'hidden',
      required: false,
      options: [
        {value: 'true', label: '显示'},
        {value: 'false', label: '隐藏'},
        {value: 'hidden', label: '隐藏'},
        {value: 'show', label: '显示'},
      ]
    },
    {
      type: 'multiselect',
      field: 'blacklist',
      label: '黑名单',
      initval: wrap.blacklist || [],
      required: false,
      options: roleList,
      forbid: !!appType
    },
      type: 'number',
      field: 'borderRadius',
      label: '圆角',
      min: 0,
      max: 500,
      precision: 0,
      initval: wrap.borderRadius || 0,
      required: false
    }
  ]

  return wrapForm

 src/mob/searchconfig/index.jsx

@@ -501,8 +501,9 @@
                  <Icon type="left" />
                  <div className="am-navbar-title">{group.setting.title}</div>
                </div> : <div className="am-navbar">
                  <Icon type="left" />
                  {/* <Icon type="left" /> */}
                  <div className="search-bar"><Icon type="search" /></div>
                  <Button >取消</Button>
                </div>}
                {group.floor === 1 ? <Icon className="plus-group" type="plus" onClick={this.plusGroup} /> : null}
                <div style={{minHeight: 'calc(100% - 100px)'}}>

 src/mob/searchconfig/index.scss

@@ -154,13 +154,23 @@
        height: 45px;
        line-height: 45px;
        position: relative;
        border-bottom: 1px solid #f0f0f0;
        margin-bottom: 10px;
        .anticon-close, .anticon-left {
          position: absolute;
          line-height: 45px;
          font-size: 18px;
          left: 10px;
        }
        .ant-btn {
          position: absolute;
          right: 20px;
          border: none;
          top: 6px;
          color: #1890ff;
          background-color: transparent;
          cursor: default;
          font-size: 16px;
          box-shadow: none;
        }
        .am-navbar-title {
          font-size: 16px;
@@ -178,7 +188,7 @@
          position: relative;
          top: 50%;
          transform: translateY(-50%);
          margin: 0 30px 0 35px;
          margin: 0 80px 0 10px;
        }
      }
      .search-btn {

 src/mob/searchconfig/searchdragelement/card.jsx

@@ -1,7 +1,6 @@
import React from 'react'
import { useDrag, useDrop } from 'react-dnd'
import { Icon, Popover, Form } from 'antd'
import { Slider } from 'antd-mobile'
import moment from 'moment'

import asyncComponent from '@/utils/asyncComponent'
@@ -63,21 +62,23 @@
      </div>
    </div>)
  } else if (card.type === 'range') {
    let value = [(card.minValue || 0), (card.maxValue || 20)]
    if (card.initval) {
      value = card.initval.split(',')
      value = [+value[0], +value[1]]
    }
    formItem = (<div className="am-list-item slider">
      <div className="am-list-line">
        {card.labelShow !== 'false' ? <div className="am-input-label">{card.label}</div> : null}
        <div className="am-input-control">
          <Slider
            min={card.minValue || 0}
            max={card.maxValue || 20}
            range={true}
            value={value}
          />
          <div className="adm-slider">
            <div className="adm-slider-track-container">
              <div className="adm-slider-track">
                <div className="adm-slider-fill" style={{width: '44%', left: '13%'}}></div>
                <div className="adm-slider-thumb-container" style={{left: '13%', right: 'auto'}}>
                  <div className="adm-slider-thumb"></div>
                </div>
                <div className="adm-slider-thumb-container" style={{left: '58%', right: 'auto'}}>
                  <div className="adm-slider-thumb"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>)

 src/mob/searchconfig/searchdragelement/index.scss

@@ -96,10 +96,50 @@
      align-items: start;
      display: block;
      .am-input-control {
        height: 25px;
        padding-top: 10px;
        height: 30px;
        padding-left: 12px;
      }
      .adm-slider {
        padding: 4px 0px;
        list-style: none;
        user-select: none;
        .adm-slider-track-container {
          padding: 8px 0;
          .adm-slider-track {
            position: relative;
            width: 100%;
            height: 4px;
            background-color: #f5f5f5;
          }
          .adm-slider-fill {
            position: absolute;
            height: 4px;
            background-color: #1890ff;
          }
          .adm-slider-thumb-container {
            touch-action: none;
            position: absolute;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
          .adm-slider-thumb {
            touch-action: none;
            position: absolute;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: #fff url('../../../assets/mobimg/slider-thumb.svg') no-repeat center center;
            background-size: 10px 10px;
            box-shadow: 0 3px 5px 0 #d9d9d9, 0 1.5px 3px -2px #d9d9d9;
          }
        }
      }
    }
  }