From 9ee3d1f9a09a865188baffdffb85f6ad329c7b09 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期日, 19 十二月 2021 01:09:20 +0800
Subject: [PATCH] 2021-12-19
---
src/menu/components/share/mobPagination/index.jsx | 7 -
src/mob/components/search/single-search/index.jsx | 17 ++--
src/mob/components/search/single-search/options.jsx | 49 ++++-------
src/mob/searchconfig/index.jsx | 3
src/mob/components/search/single-search/index.scss | 25 ++++++
src/assets/mobimg/slider-thumb.svg | 14 +++
src/mob/searchconfig/searchdragelement/card.jsx | 25 +++---
src/mob/searchconfig/index.scss | 14 +++
src/mob/searchconfig/searchdragelement/index.scss | 44 ++++++++++
9 files changed, 135 insertions(+), 63 deletions(-)
diff --git a/src/assets/mobimg/slider-thumb.svg b/src/assets/mobimg/slider-thumb.svg
new file mode 100644
index 0000000..b3d5a46
--- /dev/null
+++ b/src/assets/mobimg/slider-thumb.svg
@@ -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>
diff --git a/src/menu/components/share/mobPagination/index.jsx b/src/menu/components/share/mobPagination/index.jsx
index 173484d..b4dbb09 100644
--- a/src/menu/components/share/mobPagination/index.jsx
+++ b/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>),
- // }}
- // />
)
}
}
diff --git a/src/mob/components/search/single-search/index.jsx b/src/mob/components/search/single-search/index.jsx
index 2febeb1..04596c7 100644
--- a/src/mob/components/search/single-search/index.jsx
+++ b/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}>
diff --git a/src/mob/components/search/single-search/index.scss b/src/mob/components/search/single-search/index.scss
index 5732e1e..d25c6ba 100644
--- a/src/mob/components/search/single-search/index.scss
+++ b/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 {
diff --git a/src/mob/components/search/single-search/options.jsx b/src/mob/components/search/single-search/options.jsx
index dc3f06e..843e3ef 100644
--- a/src/mob/components/search/single-search/options.jsx
+++ b/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
diff --git a/src/mob/searchconfig/index.jsx b/src/mob/searchconfig/index.jsx
index d559c28..5e1e966 100644
--- a/src/mob/searchconfig/index.jsx
+++ b/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)'}}>
diff --git a/src/mob/searchconfig/index.scss b/src/mob/searchconfig/index.scss
index 934712f..9eb6275 100644
--- a/src/mob/searchconfig/index.scss
+++ b/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 {
diff --git a/src/mob/searchconfig/searchdragelement/card.jsx b/src/mob/searchconfig/searchdragelement/card.jsx
index 7441342..8e81a4e 100644
--- a/src/mob/searchconfig/searchdragelement/card.jsx
+++ b/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>)
diff --git a/src/mob/searchconfig/searchdragelement/index.scss b/src/mob/searchconfig/searchdragelement/index.scss
index b4bae03..2abb4bd 100644
--- a/src/mob/searchconfig/searchdragelement/index.scss
+++ b/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;
+ }
+ }
+ }
}
}
--
Gitblit v1.8.0