From ed7d889f7d9dfca77fd7f055ad8d6ec6ad85ae91 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期三, 20 七月 2022 18:28:13 +0800 Subject: [PATCH] 2022-07-20 --- src/templates/sharecomponent/settingcomponent/index.jsx | 15 src/menu/components/table/normal-table/options.jsx | 48 +- src/templates/sharecomponent/searchcomponent/settingform/index.scss | 0 src/tabviews/zshare/topSearch/index.jsx | 221 ++++++++---- src/templates/sharecomponent/searchcomponent/dragsearch/card.jsx | 8 src/templates/sharecomponent/searchcomponent/index.jsx | 62 ++- src/menu/components/share/searchcomponent/dragsearch/card.jsx | 2 src/views/design/sidemenu/index.scss | 25 + src/menu/components/table/edit-table/options.jsx | 46 +- src/tabviews/zshare/topSearch/index.scss | 37 + src/views/design/sidemenu/index.jsx | 59 ++ src/templates/sharecomponent/settingcalcomponent/verifycard/settingform/index.jsx | 6 src/templates/sharecomponent/settingcalcomponent/index.jsx | 7 src/menu/components/search/main-search/index.scss | 41 +- src/menu/components/search/main-search/dragsearch/index.jsx | 58 +- src/templates/zshare/formconfig.jsx | 2 src/templates/sharecomponent/settingcomponent/settingform/datasource/index.jsx | 8 src/menu/components/search/main-search/dragsearch/card.jsx | 4 src/templates/sharecomponent/searchcomponent/dragsearch/index.jsx | 67 ++- src/menu/components/search/main-search/index.jsx | 4 src/templates/sharecomponent/searchcomponent/settingform/index.jsx | 151 ++++++++ src/tabviews/zshare/topSearch/advanceform/index.scss | 8 src/tabviews/zshare/topSearch/advanceform/index.jsx | 2 src/menu/components/search/main-search/options.jsx | 56 +++ src/templates/sharecomponent/treesettingcomponent/index.jsx | 7 src/templates/sharecomponent/searchcomponent/index.scss | 49 ++ 26 files changed, 705 insertions(+), 288 deletions(-) diff --git a/src/menu/components/search/main-search/dragsearch/card.jsx b/src/menu/components/search/main-search/dragsearch/card.jsx index 1508196..534bd47 100644 --- a/src/menu/components/search/main-search/dragsearch/card.jsx +++ b/src/menu/components/search/main-search/dragsearch/card.jsx @@ -12,7 +12,7 @@ const { Search } = Input const CheckCard = asyncComponent(() => import('@/templates/modalconfig/checkCard')) -const Card = ({ id, card, showField, moveCard, copyCard, findCard, editCard, delCard }) => { +const Card = ({ id, card, moveCard, copyCard, findCard, editCard, delCard }) => { const originalIndex = findCard(id).index const [{ isDragging }, drag] = useDrag({ item: { type: 'search', id, originalIndex }, @@ -120,7 +120,7 @@ wrapperCol = {{xs: { span: 24 }, sm: { span: 16 }}} label={card.labelShow !== 'false' ? card.label : ''} required={card.required === 'true'} - help={showField ? card.field + (card.datefield ? ', ' + card.datefield : '') : ''} + help={card.field + (card.datefield ? ', ' + card.datefield : '') + (card.advanced === 'true' ? '锛堥珮绾ф悳绱級' : '')} > {formItem} </Form.Item> diff --git a/src/menu/components/search/main-search/dragsearch/index.jsx b/src/menu/components/search/main-search/dragsearch/index.jsx index 0140d3e..a3cfd27 100644 --- a/src/menu/components/search/main-search/dragsearch/index.jsx +++ b/src/menu/components/search/main-search/dragsearch/index.jsx @@ -7,7 +7,7 @@ import Card from './card' import './index.scss' -const Container = ({list, showField, handleList, handleMenu, deleteMenu }) => { +const Container = ({list, setting, handleList, handleMenu, deleteMenu }) => { const [cards, setCards] = useState(list) const moveCard = (id, atIndex) => { const { card, index } = findCard(id) @@ -84,42 +84,36 @@ drop() {} }) - const appType = sessionStorage.getItem('appType') + let labelwidth = setting.searchLwidth !== undefined ? setting.searchLwidth : 33.3 + let advanceType = setting.advanceType || 'modal' return ( <div ref={drop} className="ant-row"> - {cards.length > 0 ? <Col key="preaction" className="action pre-action" span={6}> + {cards.map(card => { + let _ratio = card.ratio || 6 + if (card.advanced === 'true' && advanceType !== 'pulldown') { + _ratio = 6 + } + return ( + <Col className="mk-search-item-wrap" key={card.uuid} span={_ratio}> + <Card + id={`${card.uuid}`} + card={card} + moveCard={moveCard} + copyCard={copyCard} + editCard={editCard} + delCard={delCard} + findCard={findCard} + /> + </Col> + ) + })} + {cards.length > 0 ? <Col key="nextaction" className={'mk-search-item-wrap action' + (setting.show === 'false' ? ' hide-button' : '')} span={setting.searchRatio || 6}> <div className="ant-row ant-form-item" style={{lineHeight: '40px', height: '55px', marginBottom: 0}}> - <div className="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"> - </div> - <div className="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16" style={{whiteSpace: 'nowrap'}}> + <div className="ant-col ant-form-item-label" style={{width: labelwidth + '%'}}></div> + <div className="ant-col ant-form-item-control-wrapper" style={{whiteSpace: 'nowrap'}}> <Button type="primary">鎼滅储</Button> - {appType !== 'mob' ? <Button style={{ marginLeft: 8 }}>閲嶇疆</Button> : null} - <div style={{position: 'absolute', top: 0, bottom: 0, left: 0, right: 0}}></div> - </div> - </div> - </Col> : null} - {cards.map(card => ( - <Col key={card.uuid} span={card.ratio || 6}> - <Card - id={`${card.uuid}`} - card={card} - showField={showField} - moveCard={moveCard} - copyCard={copyCard} - editCard={editCard} - delCard={delCard} - findCard={findCard} - /> - </Col> - ))} - {cards.length > 0 ? <Col key="nextaction" className="action next-action" span={6}> - <div className="ant-row ant-form-item" style={{lineHeight: '40px', height: '55px', marginBottom: 0}}> - <div className="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"> - </div> - <div className="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16" style={{whiteSpace: 'nowrap'}}> - <Button type="primary">鎼滅储</Button> - {appType !== 'mob' ? <Button style={{ marginLeft: 8 }}>閲嶇疆</Button> : null} + <Button style={{ marginLeft: 8 }}>閲嶇疆</Button> <div style={{position: 'absolute', top: 0, bottom: 0, left: 0, right: 0}}></div> </div> </div> diff --git a/src/menu/components/search/main-search/index.jsx b/src/menu/components/search/main-search/index.jsx index f6f0863..0010681 100644 --- a/src/menu/components/search/main-search/index.jsx +++ b/src/menu/components/search/main-search/index.jsx @@ -416,12 +416,12 @@ let _style = resetStyle(card.style) return ( - <div className={`main-search-edit-list ${card.wrap.float} ${card.wrap.show || ''}`} onClick={this.clickComponent} id={card.uuid} style={_style}> + <div className={`main-search-edit-list ${card.wrap.float} ${showField ? 'show-field' : ''}`} onClick={this.clickComponent} id={card.uuid} style={_style}> <FieldsComponent config={card} type="search" /> <Switch checkedChildren={dict['model.switch.open']} size="small" unCheckedChildren={dict['model.switch.close']} defaultChecked={showField} onChange={this.onFieldChange} /> <DragElement list={card.search} - showField={showField} + setting={card.wrap} handleList={this.handleList} handleMenu={this.handleSearch} deleteMenu={this.deleteElement} diff --git a/src/menu/components/search/main-search/index.scss b/src/menu/components/search/main-search/index.scss index e3fa843..85f779d 100644 --- a/src/menu/components/search/main-search/index.scss +++ b/src/menu/components/search/main-search/index.scss @@ -29,12 +29,10 @@ padding: 0 12px!important; } } - >.ant-row:not(.ant-form-item) { - > .ant-col { - display: inline-block; - float: none; - vertical-align: top; - } + .mk-search-item-wrap { + display: inline-block; + float: none; + vertical-align: top; } .ant-row.ant-form-item .ant-col { padding: 0; @@ -86,6 +84,14 @@ width: 100%; } } + .mk-search-item-wrap.action { + .ant-form-item-label, .ant-form-item-control-wrapper { + display: inline-block; + } + } + .mk-search-item-wrap.action.hide-button { + display: none; + } .ant-calendar-picker { min-width: 100px!important; width: 100%; @@ -108,28 +114,19 @@ } } } -.main-search-edit-list:not(.right) { - .pre-action { - display: none!important; - } -} + .main-search-edit-list.right { - .next-action { - display: none!important; - } >.ant-row { - >.ant-col { - float: right; - } + text-align: right; } } -.main-search-edit-list.false { - >.ant-row { - >.ant-col.action { - display: none; - } + +.main-search-edit-list:not(.show-field) { + .ant-form-explain { + display: none; } } + .main-search-edit-list::after { display: block; content: ' '; diff --git a/src/menu/components/search/main-search/options.jsx b/src/menu/components/search/main-search/options.jsx index 117f5ff..8f39286 100644 --- a/src/menu/components/search/main-search/options.jsx +++ b/src/menu/components/search/main-search/options.jsx @@ -36,22 +36,72 @@ required: true }, { + type: 'radio', + field: 'advanceType', + label: '楂樼骇鎼滅储', + initval: wrap.advanceType || 'modal', + required: false, + options: [ + {value: 'modal', label: '寮圭獥'}, + {value: 'drawer', label: '鎶藉眽'}, + {value: 'pulldown', label: '涓嬫媺'} + ], + controlFields: [ + {field: 'advanceWidth', values: ['modal', 'drawer']}, + {field: 'drawerPlacement', values: ['drawer']} + ] + }, + { + type: 'radio', + field: 'drawerPlacement', + label: '鎶藉眽鏂瑰悜', + initval: wrap.drawerPlacement || 'right', + required: false, + options: [ + {value: 'right', label: '鍙充晶'}, + {value: 'left', label: '宸︿晶'}, + {value: 'top', label: '涓婁晶'}, + {value: 'bottom', label: '涓嬩晶'} + ] + }, + { type: 'number', field: 'advanceWidth', - label: '楂樼骇鎼滅储', + label: '寮圭獥瀹藉害', initval: wrap.advanceWidth || 1000, - tooltip: '楂樼骇鎼滅储寮圭獥鐨勫搴︼紝娉細褰撳搴﹀�煎皬浜�100鏃惰〃绀哄崰绐楀彛鐨勭櫨鍒嗘瘮锛屽ぇ浜�100鏃惰〃绀哄搴︾殑缁濆鍊笺��', + tooltip: '楂樼骇鎼滅储寮圭獥鐨勫搴︼紝娉細褰撳搴﹀�煎皬浜�100鏃惰〃绀哄崰绐楀彛鐨勭櫨鍒嗘瘮锛屽ぇ浜�100鏃惰〃绀哄搴︾殑缁濆鍊笺�傚綋浣跨敤涓婁笅鏄剧ず鐨勬娊灞夋椂浠h〃鎶藉眽楂樺害銆�', min: 10, max: 3000, precision: 0, required: false }, { + type: 'number', + field: 'searchRatio', + label: '鎸夐挳姣斾緥', + initval: wrap.searchRatio || 6, + tooltip: '鎼滅储鍙婇噸缃寜閽墍鍗犳瘮渚嬨�傛爡鏍煎竷灞�锛屾瘡琛岀瓑鍒嗕负24鍒椼��', + min: 1, + max: 24, + precision: 0, + required: true + }, + { + type: 'number', + field: 'searchLwidth', + label: '鎸夐挳鍋忕Щ', + initval: wrap.searchLwidth !== undefined ? wrap.searchLwidth : 33.3, + tooltip: '鎼滅储鎸夐挳璺濆乏渚х殑鐧惧垎姣旓紝鍙傜収鎼滅储鏉′欢鐨勫悕绉板搴︺��', + min: 0, + max: 100, + precision: 10, + required: true + }, + { type: 'radio', field: 'float', label: '瀵归綈', initval: wrap.float || 'left', - tooltip: '鍙冲榻愭椂锛岄殣钘忔悳绱㈡寜閽��', required: false, options: [ {value: 'left', label: '宸﹀榻�'}, diff --git a/src/menu/components/share/searchcomponent/dragsearch/card.jsx b/src/menu/components/share/searchcomponent/dragsearch/card.jsx index f6f78e3..1a5c88e 100644 --- a/src/menu/components/share/searchcomponent/dragsearch/card.jsx +++ b/src/menu/components/share/searchcomponent/dragsearch/card.jsx @@ -121,8 +121,6 @@ <Form.Item labelCol={{style: {width: labelwidth + '%'}}} wrapperCol={{style: {width: (100 - labelwidth) + '%'}}} - // labelCol={{xs: { span: 24 }, sm: { span: 8 }}} - // wrapperCol = {{xs: { span: 24 }, sm: { span: 16 }}} label={card.labelShow !== 'false' ? card.label : ''} required={card.required === 'true'} > diff --git a/src/menu/components/table/edit-table/options.jsx b/src/menu/components/table/edit-table/options.jsx index 3ed37ec..977367f 100644 --- a/src/menu/components/table/edit-table/options.jsx +++ b/src/menu/components/table/edit-table/options.jsx @@ -205,18 +205,18 @@ {value: 'ghost', label: '閫忔槑'}, ] }, - { - type: 'radio', - field: 'show', - label: '鎼滅储鎸夐挳', - initval: wrap.show || 'true', - tooltip: '鎼滅储鏉′欢瀛樺湪鏃讹紝鍙�夋嫨鏄惁鏄剧ず鎼滅储鎸夐挳銆�', - required: false, - options: [ - {value: 'true', label: '鏄剧ず'}, - {value: 'false', label: '闅愯棌'}, - ] - }, + // { + // type: 'radio', + // field: 'show', + // label: '鎼滅储鎸夐挳', + // initval: wrap.show || 'true', + // tooltip: '鎼滅储鏉′欢瀛樺湪鏃讹紝鍙�夋嫨鏄惁鏄剧ず鎼滅储鎸夐挳銆�', + // required: false, + // options: [ + // {value: 'true', label: '鏄剧ず'}, + // {value: 'false', label: '闅愯棌'}, + // ] + // }, { type: 'color', field: 'borderColor', @@ -243,17 +243,17 @@ // precision: 0, // required: false // }, - { - type: 'number', - field: 'advanceWidth', - label: '楂樼骇鎼滅储', - initval: wrap.advanceWidth || 1000, - tooltip: '楂樼骇鎼滅储寮圭獥鐨勫搴︼紝娉細褰撳搴﹀�煎皬浜�100鏃惰〃绀哄崰绐楀彛鐨勭櫨鍒嗘瘮锛屽ぇ浜�100鏃惰〃绀哄搴︾殑缁濆鍊笺��', - min: 10, - max: 3000, - precision: 0, - required: false - }, + // { + // type: 'number', + // field: 'advanceWidth', + // label: '楂樼骇鎼滅储', + // initval: wrap.advanceWidth || 1000, + // tooltip: '楂樼骇鎼滅储寮圭獥鐨勫搴︼紝娉細褰撳搴﹀�煎皬浜�100鏃惰〃绀哄崰绐楀彛鐨勭櫨鍒嗘瘮锛屽ぇ浜�100鏃惰〃绀哄搴︾殑缁濆鍊笺��', + // min: 10, + // max: 3000, + // precision: 0, + // required: false + // }, { type: 'radio', field: 'permission', diff --git a/src/menu/components/table/normal-table/options.jsx b/src/menu/components/table/normal-table/options.jsx index 04ab313..c6caecc 100644 --- a/src/menu/components/table/normal-table/options.jsx +++ b/src/menu/components/table/normal-table/options.jsx @@ -141,18 +141,18 @@ {value: 'always', label: '鏁版嵁鍔犺浇'}, ] }, - { - type: 'radio', - field: 'show', - label: '鎼滅储鎸夐挳', - initval: wrap.show || 'true', - tooltip: '鎼滅储鏉′欢瀛樺湪鏃讹紝鍙�夋嫨鏄惁鏄剧ず鎼滅储鎸夐挳銆�', - required: false, - options: [ - {value: 'true', label: '鏄剧ず'}, - {value: 'false', label: '闅愯棌'}, - ] - }, + // { + // type: 'radio', + // field: 'show', + // label: '鎼滅储鎸夐挳', + // initval: wrap.show || 'true', + // tooltip: '鎼滅储鏉′欢瀛樺湪鏃讹紝鍙�夋嫨鏄惁鏄剧ず鎼滅储鎸夐挳銆�', + // required: false, + // options: [ + // {value: 'true', label: '鏄剧ず'}, + // {value: 'false', label: '闅愯棌'}, + // ] + // }, { type: 'color', field: 'borderColor', @@ -179,18 +179,18 @@ // precision: 0, // required: false // }, - { - type: 'number', - field: 'advanceWidth', - label: '楂樼骇鎼滅储', - initval: wrap.advanceWidth || 1000, - tooltip: '楂樼骇鎼滅储寮圭獥鐨勫搴︼紝娉細褰撳搴﹀�煎皬浜�100鏃惰〃绀哄崰绐楀彛鐨勭櫨鍒嗘瘮锛屽ぇ浜�100鏃惰〃绀哄搴︾殑缁濆鍊笺��', - min: 10, - max: 3000, - precision: 0, - required: false, - forbid: appType === 'mob' - }, + // { + // type: 'number', + // field: 'advanceWidth', + // label: '楂樼骇鎼滅储', + // initval: wrap.advanceWidth || 1000, + // tooltip: '楂樼骇鎼滅储寮圭獥鐨勫搴︼紝娉細褰撳搴﹀�煎皬浜�100鏃惰〃绀哄崰绐楀彛鐨勭櫨鍒嗘瘮锛屽ぇ浜�100鏃惰〃绀哄搴︾殑缁濆鍊笺��', + // min: 10, + // max: 3000, + // precision: 0, + // required: false, + // forbid: appType === 'mob' + // }, { type: 'select', field: 'doubleClick', diff --git a/src/tabviews/zshare/topSearch/advanceform/index.jsx b/src/tabviews/zshare/topSearch/advanceform/index.jsx index ae479bd..b8b3023 100644 --- a/src/tabviews/zshare/topSearch/advanceform/index.jsx +++ b/src/tabviews/zshare/topSearch/advanceform/index.jsx @@ -52,7 +52,7 @@ if (content) { fields.push( - <Col span={item.ratio || 6} key={index}> + <Col className="mk-search-col" span={item.ratio || 6} key={index}> <Form.Item labelCol={item.labelCol} wrapperCol={item.wrapperCol} diff --git a/src/tabviews/zshare/topSearch/advanceform/index.scss b/src/tabviews/zshare/topSearch/advanceform/index.scss index 50a24d0..b3cdf80 100644 --- a/src/tabviews/zshare/topSearch/advanceform/index.scss +++ b/src/tabviews/zshare/topSearch/advanceform/index.scss @@ -1,10 +1,16 @@ .advance-search { background: #ffffff; margin-bottom: 35px; + + .mk-search-col { + display: inline-block; + float: none; + vertical-align: top; + } .ant-form-item { display: flex; margin-bottom: 0px; - min-height: 60px; + min-height: 55px; .ant-form-explain { white-space: nowrap; } diff --git a/src/tabviews/zshare/topSearch/index.jsx b/src/tabviews/zshare/topSearch/index.jsx index 58e1ba7..0732185 100644 --- a/src/tabviews/zshare/topSearch/index.jsx +++ b/src/tabviews/zshare/topSearch/index.jsx @@ -1,8 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { is, fromJS } from 'immutable' -import { Form, Row, Col, Button, notification, Modal } from 'antd' -import { CloseOutlined } from '@ant-design/icons' +import { fromJS } from 'immutable' +import { Form, Row, Col, Button, notification, Modal, Drawer } from 'antd' +import { CloseOutlined, DownOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' @@ -10,8 +10,6 @@ import asyncComponent from '@/utils/asyncComponent' import asyncSpinComponent from '@/utils/asyncSpinComponent' import Utils from '@/utils/utils.js' -import zhCN from '@/locales/zh-CN/main.js' -import enUS from '@/locales/en-US/main.js' import MKInput from './mkInput' import './index.scss' @@ -32,16 +30,10 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, searchlist: null, // 鎼滅储椤� - reset: true, // 鎺у埗缁勫悎鎼滅储椤归噸缃� - float: '', // 娴姩 - showButton: true, // 鏄惁鏄剧ず鎼滅储鎸夐挳 - showAdvanced: false, // 鏄惁鏄剧ず楂樼骇鎼滅储 - searchStyle: null, // 鎼滅储鏉′欢鏍峰紡 + setting: {}, advanceValues: [], // 楂樼骇鎼滅储鏉′欢淇濆瓨鍊� visible: false, - adModelWidth: '1000px', hasReqFields: false } @@ -55,47 +47,67 @@ let mainItems = [] // 浜戠鎴栧崟鐐规暟鎹� let localItems = [] // 鏈湴鏁版嵁 let deForms = [] // 娴嬭瘯绯荤粺锛屽崟涓姹� - let float = '' - let showButton = true - let searchStyle = null let advanceValues = [] - let showAdvanced = false - let adModelWidth = 1000 let linkFields = {} let record = {} let hasReqFields = false - if (setting && setting.advanceWidth) { - adModelWidth = setting.advanceWidth - } else if (config && config.wrap && config.wrap.advanceWidth) { - adModelWidth = config.wrap.advanceWidth + let forbid = false // header涓笉璁剧疆楂樼骇鎼滅储 + let _setting = {showAdv: false} + + if (setting) { + _setting.show = setting.show !== 'false' + _setting.float = setting.float || 'left' + _setting.advanceType = setting.advanceType || 'modal' + _setting.advWidth = setting.advanceWidth || 1000 + _setting.placement = setting.drawerPlacement || 'right' + _setting.ratio = setting.searchRatio || 6 + _setting.labelwidth = setting.searchLwidth !== undefined ? setting.searchLwidth : 33.3 + _setting.style = null + } else if (config && config.wrap) { + _setting.show = config.wrap.show !== 'false' + _setting.advanceType = config.wrap.advanceType || 'modal' + _setting.advWidth = config.wrap.advanceWidth || 1000 + _setting.placement = config.wrap.drawerPlacement || 'right' + _setting.ratio = config.wrap.searchRatio || 6 + _setting.labelwidth = config.wrap.searchLwidth !== undefined ? config.wrap.searchLwidth : 33.3 + _setting.style = null + + if (config.type === 'search') { + _setting.float = config.wrap.float || 'left' + _setting.style = config.style + } else { + _setting.float = 'right' + _setting.show = false + forbid = true + } } - if (adModelWidth < 100) { - adModelWidth = adModelWidth + 'vw' - } else { - adModelWidth = adModelWidth + 'px' + _setting.labelCol = {style: {width: _setting.labelwidth + '%'}} + _setting.wrapperCol = {style: {width: (100 - _setting.labelwidth) + '%'}} + + if (_setting.advanceType === 'drawer') { + if (_setting.placement === 'top' || _setting.placement === 'bottom') { + _setting.advHeight = _setting.advWidth > 100 ? _setting.advWidth + 'px' : _setting.advWidth + 'vh' + _setting.advWidth = '100vw' + } else { + _setting.advWidth = _setting.advWidth > 100 ? _setting.advWidth + 'px' : _setting.advWidth + 'vw' + } + } else if (_setting.advanceType === 'modal') { + if (_setting.advWidth < 100) { + _setting.advWidth = _setting.advWidth + 'vw' + } else { + _setting.advWidth = _setting.advWidth + 'px' + } } if (searchlist) { - if (setting && setting.show === 'false') { - showButton = false - } _searchlist = fromJS(searchlist).toJS() } else if (config) { _searchlist = fromJS(config.search).toJS() - if (config.type === 'search' && config.subtype === 'mainsearch') { - float = config.wrap.float - showButton = config.wrap.show !== 'false' - searchStyle = config.style - } else { - showButton = false - float = 'right' - } } _searchlist.forEach(item => { - // if (item.type === 'link') { if (item.linkField) { linkFields[item.linkField] = linkFields[item.linkField] || [] linkFields[item.linkField].push({field: item.field, uuid: item.uuid}) @@ -116,8 +128,8 @@ hasReqFields = true } - if (showButton && item.advanced) { - showAdvanced = true + if (item.advanced && !forbid) { + _setting.showAdv = true } else { item.advanced = false } @@ -207,12 +219,8 @@ }) this.setState({ - float, - showButton, - searchStyle, + setting: _setting, hasReqFields, - showAdvanced, - adModelWidth, advanceValues, searchlist: _list }, () => { @@ -222,10 +230,6 @@ this.improveSearch(mainItems, localItems) } }) - } - - shouldComponentUpdate (nextProps, nextState) { - return !is(fromJS(this.state), fromJS(nextState)) } // 鏌ヨ涓嬫媺鑿滃崟 @@ -469,12 +473,11 @@ getFields() { const { getFieldDecorator } = this.props.form - const { dict, showButton, showAdvanced, float, visible } = this.state + const { visible, setting } = this.state const fields = [] - let lastRadio = 6 this.state.searchlist.forEach((item, index) => { - if (item.hidden || item.advanced) return + if (item.hidden || (item.advanced && (setting.advanceType !== 'pulldown' || !visible))) return const _rules = [ { @@ -484,9 +487,7 @@ ] let content = null - let className = '' let field = item.field - lastRadio = item.ratio || 6 if (item.type === 'text') { content = (<MKInput config={item} onInputSubmit={this.handleSubmit} />) @@ -498,15 +499,13 @@ field = item.datefield content = <DateGroup position={index} config={item} onChange={(val, type) => this.dateGroupChange(val, type, item)} /> } else if (item.type === 'checkcard') { - className = 'checkcard' content = <MKCheckCard config={item} onChange={(val) => this.cardChange(val, item)} /> } if (content) { fields.push( - <Col span={item.ratio || 6} key={index}> + <Col className="mk-search-col" span={item.ratio || 6} key={index}> <Form.Item - className={className} label={item.labelShow !== 'false' ? item.label : ''} labelCol={item.labelCol} wrapperCol={item.wrapperCol} @@ -521,34 +520,71 @@ } }) - if (showButton) { - let action = ( - <Col span={lastRadio < 6 ? 6 : lastRadio} style={{ whiteSpace: 'nowrap' }} className="search-button" key="actions"> - <Form.Item label={' '} colon={false} style={{ minHeight: '40px' }}> - <Button type="primary" onClick={this.handleSubmit}> - {dict['main.search']} - </Button> - <Button style={{ marginLeft: 8 }} onClick={this.handleReset}> - {dict['main.reset']} - </Button> - {showAdvanced && !visible ? <Button type="link" onClick={this.handleAdvance}> - 楂樼骇 + if (setting.show || setting.showAdv) { + fields.push( + <Col span={setting.searchRatio} style={{ whiteSpace: 'nowrap' }} className="mk-search-col search-button" key="actions"> + <Form.Item + label={' '} + colon={false} + labelCol={setting.labelCol} + wrapperCol={setting.wrapperCol} + > + {setting.show ? <Button type="primary" onClick={this.handleSubmit}> + 鎼滅储 + </Button> : null} + {setting.show ? <Button style={{ marginLeft: 8 }} onClick={this.handleReset}> + 閲嶇疆 + </Button> : null} + {setting.showAdv ? <Button className={visible ? 'visible' : ''} type="link" onClick={this.handleAdvance}> + 楂樼骇{setting.advanceType === 'pulldown' ? <DownOutlined /> : null} </Button> : null} </Form.Item> </Col> ) - if (float === 'right') { - fields.unshift(action) - } else { - fields.push(action) - } } return fields } handleAdvance = () => { - this.setState({visible: true}) + const { setting, visible } = this.state + + if (setting.advanceType !== 'pulldown' && visible) { + return + } + + this.setState({visible: !visible}) + + if (setting.advanceType === 'pulldown') { + if (visible) { + let advanceValues = [] + this.state.searchlist.forEach(item => { + if (!item.advanced) return + + let val = this.record[item.field] + if (val || val === 0) { + if (item.precision === 'hour') { + if (/,/ig.test(val)) { + val = val.split(',').map(m => m + ':00').join(',') + } else { + val = val + ':00' + } + } + advanceValues.push({field: item.field, type: item.type, label: item.label, value: val}) + } + }) + this.setState({advanceValues}) + } else { + let list = this.state.searchlist.map(item => { + if (!item.advanced) return item + + item.initval = this.record[item.field] + + return item + }) + this.setState({searchlist: list}) + } + } } handleSubmit = () => { @@ -573,7 +609,7 @@ notification.warning({ top: 92, - message: this.state.dict['form.required.input'] + labels.join('銆�') + ' !', + message: '璇疯緭鍏�' + labels.join('銆�') + ' !', duration: 3 }) return @@ -740,7 +776,7 @@ } render() { - const { float, searchStyle, visible, searchlist, showAdvanced, advanceValues, adModelWidth } = this.state + const { visible, searchlist, advanceValues, setting } = this.state const formItemLayout = { labelCol: { xs: { span: 24 }, @@ -754,10 +790,10 @@ return ( <> - <Form {...formItemLayout} className={`top-search ${float}`} style={searchStyle}> + <Form {...formItemLayout} className={`top-search mk-float-${setting.float}`} style={setting.style}> <Row gutter={24}>{this.getFields()}</Row> - <Row gutter={24}> - {showAdvanced ? <div className="advanced-list"> + {advanceValues.length && (setting.advanceType !== 'pulldown' || (setting.advanceType === 'pulldown' && !visible)) ? <Row gutter={24}> + <div className="advanced-list"> {advanceValues.map((item, index) => { return ( <div key={index}> @@ -766,14 +802,14 @@ <CloseOutlined onClick={() => this.closeAdvanceForm(item)} /> </div>) })} - </div> : null} - </Row> + </div> + </Row> : null} </Form> - <Modal + {setting.advanceType === 'modal' ? <Modal title="楂樼骇鎼滅储" maskClosable={false} visible={visible} - width={adModelWidth} + width={setting.advWidth} closable={false} footer={null} destroyOnClose @@ -784,7 +820,24 @@ advanceSubmit={this.handleOk} handleClose={() => this.setState({visible: false})} /> - </Modal> + </Modal> : null} + {setting.advanceType === 'drawer' ? <Drawer + title="楂樼骇鎼滅储" + width={setting.advWidth} + height={setting.advHeight} + maskClosable={false} + onClose={() => this.setState({visible: false})} + visible={visible} + placement={setting.placement} + destroyOnClose + > + <MutilForm + searchlist={searchlist} + record={this.record} + advanceSubmit={this.handleOk} + handleClose={() => this.setState({visible: false})} + /> + </Drawer> : null} </> ) } diff --git a/src/tabviews/zshare/topSearch/index.scss b/src/tabviews/zshare/topSearch/index.scss index 6529efb..492c8c7 100644 --- a/src/tabviews/zshare/topSearch/index.scss +++ b/src/tabviews/zshare/topSearch/index.scss @@ -1,16 +1,17 @@ .top-search { background: #ffffff; + + .mk-search-col { + display: inline-block; + float: none; + vertical-align: top; + } .ant-form-item { display: flex; margin-bottom: 0px; - min-height: 60px; + min-height: 55px; .ant-form-explain { white-space: nowrap; - } - } - .ant-form-item.checkcard { - .ant-form-item-control { - line-height: 1; } } .ant-form-item-control-wrapper { @@ -42,7 +43,7 @@ } } .search-button { - min-height: 60px; + min-height: 55px; .ant-btn-link, .ant-btn-link:hover, .ant-btn-link:active{ border-color: transparent; span { @@ -54,16 +55,26 @@ height: auto; min-height: 28px; } + .anticon-down { + transition: transform 0.3s; + // top: 3px!important; + margin-left: 2px; + } + .visible { + .anticon-down { + transform: rotate(180deg); + } + } } .advanced-list { font-size: 13px; - padding: 0 12px; + padding: 2px 12px; + text-align: left; > div { display: inline-block; margin-right: 10px; - border: 1px solid #dddddd; padding: 0 4px 0 4px; - background: rgba(0, 0, 0, 0.02); + box-shadow: 0 0 2px #dddddd; .anticon-close { margin-left: 5px; @@ -92,10 +103,8 @@ margin-top: 3px; } } -.top-search.right { +.top-search.mk-float-right { >.ant-row { - >.ant-col { - float: right; - } + text-align: right; } } diff --git a/src/templates/sharecomponent/searchcomponent/dragsearch/card.jsx b/src/templates/sharecomponent/searchcomponent/dragsearch/card.jsx index 6183e23..c5856d5 100644 --- a/src/templates/sharecomponent/searchcomponent/dragsearch/card.jsx +++ b/src/templates/sharecomponent/searchcomponent/dragsearch/card.jsx @@ -12,7 +12,7 @@ const { MonthPicker, WeekPicker, RangePicker } = DatePicker const CheckCard = asyncComponent(() => import('@/templates/modalconfig/checkCard')) -const Card = ({ id, card, showField, moveCard, copyCard, findCard, editCard, delCard }) => { +const Card = ({ id, card, moveCard, copyCard, findCard, editCard, delCard }) => { const originalIndex = findCard(id).index const [{ isDragging }, drag] = useDrag({ item: { type: 'search', id, originalIndex }, @@ -126,16 +126,14 @@ <CloseOutlined className="close" onClick={() => delCard(id)} /> </div> } trigger="hover"> - <div className={'page-card ' + (card.labelShow || '') + ' ' + type} style={{ opacity: opacity}}> + <div className={'page-card ' + (card.labelShow === 'false' ? 'label-hide ' : '') + type + (card.advanced === 'true' ? ' advanced' : '')} style={{ opacity: opacity}}> <div ref={node => drag(drop(node))} onDoubleClick={() => editCard(id)}> <Form.Item labelCol={{style: {width: labelwidth + '%'}}} wrapperCol={{style: {width: (100 - labelwidth) + '%'}}} - // labelCol={{xs: { span: 24 }, sm: { span: 8 }}} - // wrapperCol = {{xs: { span: 24 }, sm: { span: 16 }}} label={card.labelShow !== 'false' ? card.label : ''} required={card.required === 'true'} - help={showField ? card.field + (card.datefield ? ', ' + card.datefield : '') : ''} + help={(card.field || '') + (card.datefield ? ', ' + card.datefield : '') + (card.advanced === 'true' ? '锛堥珮绾ф悳绱級' : '')} > {formItem} </Form.Item> diff --git a/src/templates/sharecomponent/searchcomponent/dragsearch/index.jsx b/src/templates/sharecomponent/searchcomponent/dragsearch/index.jsx index c0907c6..f144c82 100644 --- a/src/templates/sharecomponent/searchcomponent/dragsearch/index.jsx +++ b/src/templates/sharecomponent/searchcomponent/dragsearch/index.jsx @@ -2,12 +2,14 @@ import { useDrop } from 'react-dnd' import { is, fromJS } from 'immutable' import update from 'immutability-helper' -import { Col, Button } from 'antd' +import { Col, Button, Popover } from 'antd' +import { EditOutlined } from '@ant-design/icons' + import Utils from '@/utils/utils.js' import Card from './card' import './index.scss' -const Container = ({list, show, showField, handleList, handleMenu, deleteMenu }) => { +const Container = ({list, setting, handleList, handleMenu, deleteMenu, handleSetting }) => { const [cards, setCards] = useState(list) const moveCard = (id, atIndex) => { const { card, index } = findCard(id) @@ -128,36 +130,45 @@ } }) - let radio = 6 - if (cards.length > 0) { - radio = cards[cards.length - 1].ratio || 6 - } + let radio = setting.searchRatio || 6 + let labelwidth = setting.searchLwidth !== undefined ? setting.searchLwidth : 33.3 + let advanceType = setting.advanceType || 'modal' return ( <div ref={drop} className="ant-row"> - {cards.map(card => ( - <Col key={card.uuid} span={card.ratio || 6}> - <Card - id={`${card.uuid}`} - card={card} - showField={showField} - moveCard={moveCard} - copyCard={copyCard} - editCard={editCard} - delCard={delCard} - findCard={findCard} - /> - </Col> - ))} - {cards.length > 0 && show !== 'false' ? <Col key="action" className="action" span={radio < 6 ? 6 : radio}> + {cards.map(card => { + let _ratio = card.ratio || 6 + if (card.advanced === 'true' && advanceType !== 'pulldown') { + _ratio = 6 + } + return ( + <Col className="mk-search-item-wrap" key={card.uuid} span={_ratio}> + <Card + id={`${card.uuid}`} + card={card} + moveCard={moveCard} + copyCard={copyCard} + editCard={editCard} + delCard={delCard} + findCard={findCard} + /> + </Col> + ) + })} + {cards.length > 0 ? <Col className={'mk-search-item-wrap action ' + (setting.show === 'false' ? 'hide-button' : '')} key="action" span={radio}> <div className="ant-row ant-form-item" style={{whiteSpace: 'nowrap', lineHeight: '40px', height: '55px', marginBottom: 0}}> - <div className="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"> - </div> - <div className="ant-col ant-form-item-control-wrapper ant-col-xs-24 ant-col-sm-16"> - <Button type="primary">鎼滅储</Button> - <Button style={{ marginLeft: 8 }}>閲嶇疆</Button> - <div style={{position: 'absolute', top: 0, bottom: 0, left: 0, right: 0}}></div> - </div> + <div className="ant-col ant-form-item-label" style={{width: labelwidth + '%'}}></div> + <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ + <div className="mk-popover-control"> + <EditOutlined className="edit" onClick={() => handleSetting()} /> + </div> + } trigger="hover"> + <div className="ant-col ant-form-item-control-wrapper"> + <Button type="primary">鎼滅储</Button> + <Button style={{ marginLeft: 8 }}>閲嶇疆</Button> + <div style={{position: 'absolute', top: 0, bottom: 0, left: 0, right: 0}}></div> + </div> + </Popover> </div> </Col> : null} {cards.length === 0 ? diff --git a/src/templates/sharecomponent/searchcomponent/index.jsx b/src/templates/sharecomponent/searchcomponent/index.jsx index c90b728..3429ae2 100644 --- a/src/templates/sharecomponent/searchcomponent/index.jsx +++ b/src/templates/sharecomponent/searchcomponent/index.jsx @@ -12,8 +12,9 @@ import { getSearchForm } from '@/templates/zshare/formconfig' import asyncComponent from '@/utils/asyncComponent' import MKEmitter from '@/utils/events.js' -import SearchForm from './searchform' import DragElement from './dragsearch' +import SearchForm from './searchform' +import SettingForm from './settingform' import './index.scss' const { confirm } = Modal @@ -28,11 +29,12 @@ state = { dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, - searchlist: null, // 鎼滅储鏉′欢闆� - sqlVerifing: false, // sql楠岃瘉涓� - visible: false, // 妯℃�佹鎺у埗 + searchlist: null, + sqlVerifing: false, + visible: false, showField: false, - card: null // 缂栬緫涓厓绱� + setVisible: false, + card: null } /** @@ -316,6 +318,22 @@ }) } + handleSetting = () => { + this.setState({ + setVisible: true + }) + } + + settingSubmit = () => { + const { config } = this.props + + this.settingFormRef.handleConfirm().then(res => { + this.setState({ + setVisible: false + }) + this.props.updatesearch({...config, setting: {...config.setting, ...res}}) + }) + } /** * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊 @@ -332,35 +350,30 @@ if (!is(fromJS(this.state), fromJS(nextState))) { return true } else if (this.props.config.wrap) { - return this.props.config.wrap.show !== nextProps.config.wrap.show + return !is(fromJS(nextProps.config.wrap), fromJS(this.props.config.wrap)) } else { - return this.props.config.setting.show !== nextProps.config.setting.show + return !is(fromJS(nextProps.config.setting), fromJS(this.props.config.setting)) } } render() { const { config } = this.props - const { dict, searchlist, visible, sqlVerifing, card, showField } = this.state - - let show = config.setting.show - if (config.wrap) { - show = config.wrap.show - } + const { dict, searchlist, visible, sqlVerifing, card, showField, setVisible } = this.state return ( - <div className={'model-table-search-list length' + searchlist.length}> + <div className={'model-table-search-list length' + searchlist.length + (showField ? ' show-field' : '')}> <Tooltip placement="bottomLeft" overlayClassName="middle" title="鍦ㄥ乏渚у伐鍏锋爮銆婃悳绱€�嬩腑锛岄�夋嫨瀵瑰簲鎼滅储妗嗘嫋鑷虫澶勬坊鍔狅紱鎴栫偣鍑绘寜閽�婃坊鍔犳悳绱㈡潯浠躲�嬫壒閲忔坊鍔狅紝閫夋嫨鎵归噺娣诲姞鏃讹紝闇�鎻愬墠閫夋嫨浣跨敤琛ㄣ��"> <QuestionCircleOutlined style={{color: '#c49f47', position: 'relative', left: '-15px', top: '5px'}} /> </Tooltip> <FieldsComponent config={{uuid: config.uuid, search: searchlist}} type="search" /> - <Switch checkedChildren={dict['model.switch.open']} unCheckedChildren={dict['model.switch.close']} defaultChecked={showField} onChange={this.onFieldChange} /> + <Switch className="switch-field-show" checkedChildren={dict['model.switch.open']} unCheckedChildren={dict['model.switch.close']} defaultChecked={showField} onChange={this.onFieldChange} /> <DragElement list={searchlist} - show={show} - showField={showField} + setting={config.wrap || config.setting} handleList={this.handleList} handleMenu={this.handleSearch} deleteMenu={this.deleteElement} + handleSetting={this.handleSetting} /> {/* 缂栬緫鎼滅储鏉′欢 */} <Modal @@ -381,6 +394,21 @@ wrappedComponentRef={(inst) => this.searchFormRef = inst} /> </Modal> + <Modal + title={'鎼滅储璁剧疆'} + visible={setVisible} + width={800} + maskClosable={false} + onOk={this.settingSubmit} + onCancel={() => this.setState({setVisible: false})} + destroyOnClose + > + <SettingForm + setting={config.wrap || config.setting} + inputSubmit={this.settingSubmit} + wrappedComponentRef={(inst) => this.settingFormRef = inst} + /> + </Modal> </div> ) } diff --git a/src/templates/sharecomponent/searchcomponent/index.scss b/src/templates/sharecomponent/searchcomponent/index.scss index 74c00ca..2d0f22c 100644 --- a/src/templates/sharecomponent/searchcomponent/index.scss +++ b/src/templates/sharecomponent/searchcomponent/index.scss @@ -7,7 +7,7 @@ .quickly-add { display: none; } - >.ant-switch { + .switch-field-show { position: absolute; z-index: 1; right: 20px; @@ -19,10 +19,23 @@ padding: 0 12px!important; } } - - .ant-row.ant-form-item .ant-col { - padding: 0; + + .mk-search-item-wrap { + display: inline-block; + float: none; + vertical-align: top; } + .mk-search-item-wrap.action { + .ant-form-item-label, .ant-form-item-control-wrapper { + display: inline-block; + } + } + .mk-search-item-wrap.action.hide-button { + span { + text-decoration: line-through #ff4d4f; + } + } + .page-card { position: relative; background: #ffffff; @@ -50,6 +63,20 @@ padding: 4px 20px 4px 5px; font-size: 13px; } + .check-card-edit-box { + .no-margin-bottom { + margin-bottom: 0px; + } + .card-cell { + padding: 4px 6px; + } + .card-color-cell { + min-height: 32px; + } + } + } + .ant-form-explain { + display: none; } } >div::after { @@ -65,7 +92,7 @@ z-index: 2; } } - .page-card.false { + .page-card.label-hide { .ant-form-item-label { display: none; } @@ -80,6 +107,11 @@ } } } + .page-card.advanced { + .ant-form-item-label label { + color: orange; + } + } .ant-calendar-picker { min-width: 100px!important; width: 100%; @@ -87,4 +119,11 @@ .check-card-edit-box { margin-top: 5px!important; } +} +.model-table-search-list.show-field { + .page-card { + .ant-form-explain { + display: block; + } + } } \ No newline at end of file diff --git a/src/templates/sharecomponent/searchcomponent/settingform/index.jsx b/src/templates/sharecomponent/searchcomponent/settingform/index.jsx new file mode 100644 index 0000000..e4e8adf --- /dev/null +++ b/src/templates/sharecomponent/searchcomponent/settingform/index.jsx @@ -0,0 +1,151 @@ +import React, {Component} from 'react' +import PropTypes from 'prop-types' +import { Form, Row, Col, Radio, Tooltip, InputNumber } from 'antd' +import { QuestionCircleOutlined } from '@ant-design/icons' + +// import './index.scss' + +class SettingForm extends Component { + static propTpyes = { + setting: PropTypes.object, + inputSubmit: PropTypes.func + } + + state = { + advanceType: '' + } + + UNSAFE_componentWillMount () { + const { setting } = this.props + + this.setState({ + advanceType: setting.advanceType || 'modal' + }) + } + + handleConfirm = () => { + // 琛ㄥ崟鎻愪氦鏃舵鏌ヨ緭鍏ュ�兼槸鍚︽纭� + return new Promise((resolve, reject) => { + this.props.form.validateFieldsAndScroll((err, values) => { + if (!err) { + resolve(values) + } else { + reject(err) + } + }) + }) + } + + render() { + const { setting } = this.props + const { getFieldDecorator } = this.props.form + const { advanceType } = this.state + + const formItemLayout = { + labelCol: { + xs: { span: 24 }, + sm: { span: 8 } + }, + wrapperCol: { + xs: { span: 24 }, + sm: { span: 16 } + } + } + + return ( + <div className="model-table-datasource-setting-form-box"> + <Form {...formItemLayout} className="model-setting-form"> + <Row gutter={24}> + <Col span={12}> + <Form.Item label="鎼滅储鎸夐挳"> + {getFieldDecorator('show', { + initialValue: setting.show || 'true' + })( + <Radio.Group> + <Radio value="true">鏄剧ず</Radio> + <Radio value="false">闅愯棌</Radio> + </Radio.Group> + )} + </Form.Item> + </Col> + <Col span={12}> + <Form.Item label={ + <Tooltip placement="topLeft" title="楂樼骇鎼滅储鐨勫睍寮�鏂瑰紡銆�"> + <QuestionCircleOutlined className="mk-form-tip" /> + 楂樼骇鎼滅储 + </Tooltip> + }> + {getFieldDecorator('advanceType', { + initialValue: setting.advanceType || 'modal' + })( + <Radio.Group onChange={(e) => this.setState({advanceType: e.target.value})}> + <Radio value="modal">寮圭獥</Radio> + <Radio value="drawer">鎶藉眽</Radio> + <Radio value="pulldown">涓嬫媺</Radio> + </Radio.Group> + )} + </Form.Item> + </Col> + {advanceType === 'drawer' ? <Col span={12}> + <Form.Item label={ + <Tooltip placement="topLeft" title="鎶藉眽灞曞紑鐨勬柟鍚戙��"> + <QuestionCircleOutlined className="mk-form-tip" /> + 鎶藉眽鏂瑰悜 + </Tooltip> + }> + {getFieldDecorator('drawerPlacement', { + initialValue: setting.drawerPlacement || 'right' + })( + <Radio.Group style={{whiteSpace: 'nowrap'}}> + <Radio value="right">鍙充晶</Radio> + <Radio value="left">宸︿晶</Radio> + <Radio value="top">涓婁晶</Radio> + <Radio value="bottom">涓嬩晶</Radio> + </Radio.Group> + )} + </Form.Item> + </Col> : null} + {advanceType !== 'pulldown' ? <Col span={12}> + <Form.Item label={ + <Tooltip placement="topLeft" title="楂樼骇鎼滅储妗嗙殑瀹藉害锛屾敞锛氬綋瀹藉害鍊煎皬浜�100鏃惰〃绀哄崰绐楀彛鐨勭櫨鍒嗘瘮锛屽ぇ浜�100鏃惰〃绀哄搴︾殑缁濆鍊笺�傚綋浣跨敤涓婁笅鏄剧ず鐨勬娊灞夋椂浠h〃鎶藉眽楂樺害銆�"> + <QuestionCircleOutlined className="mk-form-tip" /> + 寮圭獥瀹藉害 + </Tooltip> + }> + {getFieldDecorator('advanceWidth', { + initialValue: setting.advanceWidth || 1000 + })(<InputNumber min={10} max={3000} precision={0} onPressEnter={this.props.inputSubmit}/>)} + </Form.Item> + </Col> : null} + <Col span={12}> + <Form.Item label={ + <Tooltip placement="topLeft" title="鎼滅储鍙婇噸缃寜閽墍鍗犳瘮渚嬨�傛爡鏍煎竷灞�锛屾瘡琛岀瓑鍒嗕负24鍒椼��"> + <QuestionCircleOutlined className="mk-form-tip" /> + 姣斾緥 + </Tooltip> + }> + {getFieldDecorator('searchRatio', { + initialValue: setting.searchRatio || 6, + })(<InputNumber min={1} max={24} precision={0} onPressEnter={this.props.inputSubmit}/>)} + </Form.Item> + </Col> + <Col span={12}> + <Form.Item label={ + <Tooltip placement="topLeft" title="鎼滅储鎸夐挳璺濆乏渚х殑鐧惧垎姣旓紝鍙傜収鎼滅储鏉′欢鐨勫悕绉板搴︺��"> + <QuestionCircleOutlined className="mk-form-tip" /> + 鎸夐挳鍋忕Щ + </Tooltip> + }> + {getFieldDecorator('searchLwidth', { + initialValue: setting.searchLwidth !== undefined ? setting.searchLwidth : 33.3, + })(<InputNumber min={0} max={100} precision={1} onPressEnter={this.props.inputSubmit}/>)} + </Form.Item> + </Col> + </Row> + </Form> + </div> + ) + } +} + +export default Form.create()(SettingForm) \ No newline at end of file diff --git a/src/templates/sharecomponent/searchcomponent/settingform/index.scss b/src/templates/sharecomponent/searchcomponent/settingform/index.scss new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/templates/sharecomponent/searchcomponent/settingform/index.scss diff --git a/src/templates/sharecomponent/settingcalcomponent/index.jsx b/src/templates/sharecomponent/settingcalcomponent/index.jsx index ce14a2e..0c7b0d2 100644 --- a/src/templates/sharecomponent/settingcalcomponent/index.jsx +++ b/src/templates/sharecomponent/settingcalcomponent/index.jsx @@ -59,6 +59,13 @@ }) } + res.show = config.setting.show || 'true' + res.advanceType = config.setting.advanceType || 'modal' + res.advanceWidth = config.setting.advanceWidth || 1000 + res.drawerPlacement = config.setting.drawerPlacement || 'right' + res.searchRatio = config.setting.searchRatio || 6 + res.searchLwidth = config.setting.searchLwidth !== undefined ? config.setting.searchLwidth : 33.3 + this.setState({loading: false, visible: false}) this.props.updateConfig({...config, ...res}) diff --git a/src/templates/sharecomponent/settingcalcomponent/verifycard/settingform/index.jsx b/src/templates/sharecomponent/settingcalcomponent/verifycard/settingform/index.jsx index b4622fd..c07d5f6 100644 --- a/src/templates/sharecomponent/settingcalcomponent/verifycard/settingform/index.jsx +++ b/src/templates/sharecomponent/settingcalcomponent/verifycard/settingform/index.jsx @@ -1,6 +1,6 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Form, Row, Col, Input, Radio, Tooltip, notification, InputNumber } from 'antd' +import { Form, Row, Col, Input, Radio, Tooltip, notification } from 'antd' import { QuestionCircleOutlined } from '@ant-design/icons' import moment from 'moment' @@ -313,7 +313,7 @@ </Radio.Group>)} </Form.Item> </Col> - <Col span={8}> + {/* <Col span={8}> <Form.Item label={ <Tooltip placement="topLeft" title="楂樼骇鎼滅储寮圭獥鐨勫搴︼紝娉細褰撳搴﹀�煎皬浜�100鏃惰〃绀哄崰绐楀彛鐨勭櫨鍒嗘瘮锛屽ぇ浜�100鏃惰〃绀哄搴︾殑缁濆鍊笺��"> <QuestionCircleOutlined className="mk-form-tip" /> @@ -324,7 +324,7 @@ initialValue: setting.advanceWidth || 1000 })(<InputNumber min={10} max={3000} precision={0}/>)} </Form.Item> - </Col> + </Col> */} </Row> </Form> </div> diff --git a/src/templates/sharecomponent/settingcomponent/index.jsx b/src/templates/sharecomponent/settingcomponent/index.jsx index 75e4571..ca098d1 100644 --- a/src/templates/sharecomponent/settingcomponent/index.jsx +++ b/src/templates/sharecomponent/settingcomponent/index.jsx @@ -65,7 +65,7 @@ loading: true }) this.settingRef.handleConfirm().then(setting => { - let res = this.resetSetting(setting) + let res = this.resetSetting(setting, config.setting) this.setState({ visible: false, loading: false @@ -91,7 +91,7 @@ const { menu } = this.state this.settingRef.handleConfirm('loading').then(setting => { - let res = this.resetSetting(setting) + let res = this.resetSetting(setting, config.setting) let _config = {...config, setting: res} let newLText = Utils.formatOptions(FuncUtils.getTableFunc(setting, menu, _config)) // 鍒涘缓瀛樺偍杩囩▼sql let DelText = Utils.formatOptions(FuncUtils.dropfunc(setting.innerFunc)) // 鍒犻櫎瀛樺偍杩囩▼sql @@ -108,7 +108,7 @@ const { menu } = this.state this.settingRef.handleConfirm('loading').then(setting => { - let res = this.resetSetting(setting) + let res = this.resetSetting(setting, config.setting) let _config = {...config, setting: res} let _menu = { type: config.Template === 'CommonTable' ? 'main' : 'subtable', @@ -121,10 +121,17 @@ }) } - resetSetting = (s) => { + resetSetting = (s, ori) => { let setting = fromJS(s).toJS() let maxScript = 0 + setting.show = ori.show || 'true' + setting.advanceType = ori.advanceType || 'modal' + setting.advanceWidth = ori.advanceWidth || 1000 + setting.drawerPlacement = ori.drawerPlacement || 'right' + setting.searchRatio = ori.searchRatio || 6 + setting.searchLwidth = ori.searchLwidth !== undefined ? ori.searchLwidth : 33.3 + if (window.GLOB.funcs && window.GLOB.funcs.length > 0) { window.GLOB.funcs.forEach(m => { let reg = new RegExp('\\$ex@' + m.func_code + '@ex\\$', 'ig') diff --git a/src/templates/sharecomponent/settingcomponent/settingform/datasource/index.jsx b/src/templates/sharecomponent/settingcomponent/settingform/datasource/index.jsx index 4e7dce8..7a60231 100644 --- a/src/templates/sharecomponent/settingcomponent/settingform/datasource/index.jsx +++ b/src/templates/sharecomponent/settingcomponent/settingform/datasource/index.jsx @@ -682,7 +682,7 @@ </Radio.Group>)} </Form.Item> </Col> - <Col span={12}> + {/* <Col span={12}> <Form.Item label={ <Tooltip placement="topLeft" title="鍦ㄦ悳绱㈡潯浠跺瓨鍦ㄦ椂锛屾槸鍚︽樉绀烘悳绱㈠拰閲嶇疆鎸夐挳銆�"> <QuestionCircleOutlined className="mk-form-tip" /> @@ -697,7 +697,7 @@ <Radio value="false">闅愯棌</Radio> </Radio.Group>)} </Form.Item> - </Col> + </Col> */} {tableType !== '' ? <Col span={12}> <Form.Item label={ <Tooltip placement="topLeft" title="褰撴寜閽墽琛屽畬鎴愬苟杩斿洖涓婚敭鍊兼椂锛岄粯璁ら�変腑涓婚敭鍊煎搴旇銆傛敞锛氬湪鍚敤鏃犱汉鍊煎畧鍔熻兘鏃舵棤鏁堛��"> @@ -727,7 +727,7 @@ })(<InputNumber min={1} max={500} precision={0} />)} </Form.Item> </Col> - <Col span={12}> + {/* <Col span={12}> <Form.Item label={ <Tooltip placement="topLeft" title="楂樼骇鎼滅储寮圭獥鐨勫搴︼紝娉細褰撳搴﹀�煎皬浜�100鏃惰〃绀哄崰绐楀彛鐨勭櫨鍒嗘瘮锛屽ぇ浜�100鏃惰〃绀哄搴︾殑缁濆鍊笺��"> <QuestionCircleOutlined className="mk-form-tip" /> @@ -738,7 +738,7 @@ initialValue: setting.advanceWidth || 1000 })(<InputNumber min={10} max={3000} precision={0}/>)} </Form.Item> - </Col> + </Col> */} <Col span={12}> <Form.Item label={ <Tooltip placement="topLeft" title="鍙屽嚮琛ㄦ牸涓锛岃Е鍙戠殑鎸夐挳銆�"> diff --git a/src/templates/sharecomponent/treesettingcomponent/index.jsx b/src/templates/sharecomponent/treesettingcomponent/index.jsx index 856f307..141d90e 100644 --- a/src/templates/sharecomponent/treesettingcomponent/index.jsx +++ b/src/templates/sharecomponent/treesettingcomponent/index.jsx @@ -64,6 +64,13 @@ loading: false }) + res.show = config.setting.show || 'true' + res.advanceType = config.setting.advanceType || 'modal' + res.advanceWidth = config.setting.advanceWidth || 1000 + res.drawerPlacement = config.setting.drawerPlacement || 'right' + res.searchRatio = config.setting.searchRatio || 6 + res.searchLwidth = config.setting.searchLwidth !== undefined ? config.setting.searchLwidth : 33.3 + this.props.updatesetting({...config, setting: res}) MKEmitter.emit('modalStatus', false) diff --git a/src/templates/zshare/formconfig.jsx b/src/templates/zshare/formconfig.jsx index 6c3543b..c8f3df7 100644 --- a/src/templates/zshare/formconfig.jsx +++ b/src/templates/zshare/formconfig.jsx @@ -793,7 +793,7 @@ key: 'advanced', label: '楂樼骇鎼滅储', initVal: card.advanced || 'false', - tooltip: '鍦ㄩ殣钘忔悳绱㈡寜閽椂锛岄珮绾ф悳绱㈡棤鏁堛��', + tooltip: '鍦ㄩ珮绾ф悳绱互妯℃�佹鎴栨娊灞夊睍寮�鏃讹紝鎼滅储鏉′欢鍦ㄥ紑鍙戠晫闈㈠崰姣斾负6锛屽疄闄呮晥鏋滆鍦ㄨ繍琛屾椂鏌ョ湅銆�', forbid: appType === 'mob', options: [{ value: 'true', diff --git a/src/views/design/sidemenu/index.jsx b/src/views/design/sidemenu/index.jsx index c3caac8..db9232f 100644 --- a/src/views/design/sidemenu/index.jsx +++ b/src/views/design/sidemenu/index.jsx @@ -1,8 +1,8 @@ import React, {Component} from 'react' import { connect } from 'react-redux' import { is, fromJS } from 'immutable' -import { Menu, notification } from 'antd' -import { EditOutlined } from '@ant-design/icons' +import { Menu, notification, Popover } from 'antd' +import { EditOutlined, CloseOutlined, SwapOutlined, PlusOutlined, UnlockOutlined, SettingOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import { resetEditLevel, modifyMenuTree, modifyMainMenu } from '@/store/action' @@ -241,32 +241,69 @@ this.props.resetEditLevel(false) } + editmenu = (cell) => { + if (cell.type === 'CustomPage') { + let _param = { + MenuType: 'custom', + MenuId: cell.MenuID, + ParentId: cell.ParentId, + MenuName: cell.MenuName, + MenuNo: cell.MenuNo + } + _param = window.btoa(window.encodeURIComponent(JSON.stringify(_param))) + window.open(`#/menudesign/${_param}`) + } else { + + } + } + render () { - const { mainMenu } = this.props + const { mainMenu, editLevel } = this.props + + let isnew = false return ( <aside className="mk-sys-side-menu ant-menu-dark mk-edit"> - {!(this.props.editLevel === 'level2' || this.props.editLevel === 'level3') && + {!(editLevel === 'level2' || editLevel === 'level3') && <Menu openKeys={this.state.openKeys} onOpenChange={this.onOpenChange} mode="inline" theme="dark"> - {!this.props.editLevel && mainMenu ? <li className="sup-menu"><EditOutlined onClick={this.enterSubEdit} className="edit-check"/></li> : null} + {!editLevel && mainMenu ? <li className="sup-menu"><EditOutlined onClick={this.enterSubEdit} className="edit-check"/></li> : null} {this.state.subMenulist && this.state.subMenulist.map((item, index) => { return ( <SubMenu key={item.MenuID} title={ - <span className={!this.props.editLevel && index === 0 ? 'edit-control' : ''}> + <span className={!editLevel && index === 0 ? 'edit-control' : ''}> <MkIcon type={item.PageParam.Icon} /> <span>{item.MenuName}</span> </span> } > - {!this.props.editLevel ? <li className={'ant-menu-item ' + (item.children.length > 0 ? 'sub-menu' : '')}> - <EditOutlined onClick={(e) => {this.enterThrEdit(e, item)}} className="edit-check"/> + {!editLevel ? <li className={'ant-menu-item ' + (item.children.length > 0 ? 'sub-menu' : '')}> + {!isnew ? <EditOutlined onClick={(e) => {this.enterThrEdit(e, item)}} className="edit-check"/> : + <Popover overlayClassName="mk-popover-control-wrap mk-menu-control" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ + <div className="mk-popover-control"> + <PlusOutlined onClick={(e) => {this.enterThrEdit(e, item)}} className="mk-edit-menu"/> + <SwapOutlined onClick={(e) => {this.enterThrEdit(e, item)}} className="mk-edit-menu mk-swap"/> + <UnlockOutlined onClick={(e) => {this.enterThrEdit(e, item)}} className="mk-edit-menu"/> + </div> + } trigger="hover" placement="top"> + <SettingOutlined className="edit-check"/> + </Popover>} </li> : null} {item.children.map(cell => { return ( <Menu.Item key={cell.MenuID}> - <a href={cell.src} id={cell.MenuID} onClick={(e) => this.changemenu(e, cell)}>{cell.MenuName}</a> + {editLevel !== 'HS' && isnew ? + <Popover overlayClassName="mk-popover-control-wrap mk-menu-control" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ + <div className="mk-popover-control"> + <EditOutlined className="edit" onClick={() => this.editmenu(cell)} /> + <CloseOutlined className="close" onClick={() => {}} /> + </div> + } trigger="hover" placement="top"> + <span className="editable-menu-item">{cell.MenuName}</span> + </Popover> : + <a href={cell.src} id={cell.MenuID} onClick={(e) => this.changemenu(e, cell)}>{cell.MenuName}</a> + } </Menu.Item> ) })} @@ -274,7 +311,7 @@ ) })} </Menu>} - {this.props.editLevel === 'level2' ? + {editLevel === 'level2' ? <EditSecMenu menulist={this.state.subMenulist} menuTree={this.props.menuTree} @@ -283,7 +320,7 @@ exitEdit={this.exitEdit} /> : null } - {this.props.editLevel === 'level3' && this.state.editMenu ? + {editLevel === 'level3' && this.state.editMenu ? <EditThdMenu menulist={this.state.editMenu.children} supMenuList={this.state.subMenulist} diff --git a/src/views/design/sidemenu/index.scss b/src/views/design/sidemenu/index.scss index c3e8ff7..b457b5f 100644 --- a/src/views/design/sidemenu/index.scss +++ b/src/views/design/sidemenu/index.scss @@ -11,6 +11,10 @@ a { padding-left: 48px; } + .editable-menu-item { + display: block; + padding-left: 48px; + } } .ant-menu-sub.ant-menu-inline { position: relative; @@ -58,6 +62,7 @@ color: #ffffff; } } + .edit-control + .ant-menu-submenu-arrow { display: none; } @@ -116,4 +121,24 @@ a { cursor: pointer; } +} +.mk-popover-control-wrap { + .mk-edit-menu { + font-size: 18px; + cursor: pointer; + padding: 10px 15px; + } + .anticon-plus.mk-edit-menu { + color: #26C281; + } + .mk-edit-menu.mk-swap { + color: #1890ff; + transform: rotate(90deg); + } + .anticon-unlock.mk-edit-menu { + color: orange; + } +} +.mk-menu-control.mk-popover-control-wrap { + padding-bottom: 0px; } \ No newline at end of file -- Gitblit v1.8.0