Skip to content

C
CivManage
Commit aef5a577 authored by 邓超's avatar 邓超
Browse files
Options

fix: 修改消息平台传值为“”问题，修复运维痕迹报错问题

parent 28265e23
Pipeline #52392 passed with stages
          Hide whitespace changes
          Inline Side-by-side
          Showing with 593 additions and 586 deletions
          src/pages/log/omsLog/index.jsx
          View file @ aef5a577
          ...@@ -37,8 +37,7 @@ const OmsLog = () => { ...@@ -37,8 +37,7 @@ const OmsLog = () => {
          width: 150, width: 150,
          defaultSortOrder: 'descend', defaultSortOrder: 'descend',
          sortDirections: ['descend', 'ascend'], sortDirections: ['descend', 'ascend'],
          sorter: (a, b) => sorter: (a, b) => new Date(a.LogTime).getTime() - new Date(b.LogTime).getTime(),
          new Date(a.LogTime).getTime() - new Date(b.LogTime).getTime(),
          }, },
          { {
          title: '接口名称', title: '接口名称',
          ...@@ -65,8 +64,8 @@ const OmsLog = () => { ...@@ -65,8 +64,8 @@ const OmsLog = () => {
          width: 850, width: 850,
          ellipsis: 'true', ellipsis: 'true',
          render: record => ( render: record => (
          <Tooltip placement="left" title={decodeURI(record)}> <Tooltip placement="left" title={record}>
          {decodeURI(record)} {record}
          </Tooltip> </Tooltip>
          ), ),
          }, },
          ...@@ -110,10 +109,7 @@ const OmsLog = () => { ...@@ -110,10 +109,7 @@ const OmsLog = () => {
          const searchStyle1 = val => { const searchStyle1 = val => {
          let n; let n;
          if (showSearchStyle) { if (showSearchStyle) {
          n = val.replace( n = val.replace(new RegExp(label, 'g'), `<span style='color:red'>${label}</span>`);
          new RegExp(label, 'g'),
          `<span style='color:red'>${label}</span>`,
          );
          } else { } else {
          n = val; n = val;
          } }
          ...@@ -180,10 +176,7 @@ const OmsLog = () => { ...@@ -180,10 +176,7 @@ const OmsLog = () => {
          const setTime = time => { const setTime = time => {
          setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss')); setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
          setStartTime( setStartTime(
          moment( moment(new Date(new Date().getTime() - time * 60 * 60 * 1000), 'YYYY-MM-DD HH:mm:ss'),
          new Date(new Date().getTime() - time * 60 * 60 * 1000),
          'YYYY-MM-DD HH:mm:ss',
          ),
          ); );
          }; };
          const handleReset = () => { const handleReset = () => {
          ...@@ -249,8 +242,8 @@ const OmsLog = () => { ...@@ -249,8 +242,8 @@ const OmsLog = () => {
          <Button <Button
          type="primary" type="primary"
          style={{ marginLeft: '10px' }} style={{ marginLeft: '10px' }}
          onClick={() =>{ onClick={() => {
          getData() getData();
          setShowSearchStyle(true); setShowSearchStyle(true);
          }} }}
          > >
          ...@@ -278,8 +271,7 @@ const OmsLog = () => { ...@@ -278,8 +271,7 @@ const OmsLog = () => {
          dataSource={data} dataSource={data}
          scroll={{ x: 'max-content', y: 'calc(100vh - 230px)' }} scroll={{ x: 'max-content', y: 'calc(100vh - 230px)' }}
          pagination={{ pagination={{
          showTotal: (total, range) => showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
          `第${range[0]}-${range[1]} 条/共 ${total} 条`,
          pageSizeOptions: [10, 20, 50, 100], pageSizeOptions: [10, 20, 50, 100],
          defaultPageSize: 20, defaultPageSize: 20,
          showQuickJumper: true, showQuickJumper: true,
          ......
          src/pages/log/serviceLog/index.jsx
          View file @ aef5a577
          ...@@ -60,10 +60,7 @@ const ServiceLog = () => { ...@@ -60,10 +60,7 @@ const ServiceLog = () => {
          message: '时间设置有误', message: '时间设置有误',
          description: '起始时间应该早于结束时间', description: '起始时间应该早于结束时间',
          }); });
          } else if ( } else if ((startMonth !== endMonth && startYear === endYear) || startYear !== endYear) {
          (startMonth !== endMonth && startYear === endYear) ||
          startYear !== endYear
          ) {
          notification.info({ notification.info({
          message: '时间设置提示', message: '时间设置提示',
          description: '不允许跨月份查询', description: '不允许跨月份查询',
          ...@@ -133,14 +130,11 @@ const ServiceLog = () => { ...@@ -133,14 +130,11 @@ const ServiceLog = () => {
          }, },
          ]; ];
          // 模糊查询匹配的样式 // 模糊查询匹配的样式
          const searchStyle = val => { const searchStyle = val => {
          let n; let n;
          if (showSearchStyle) { if (showSearchStyle) {
          n = val.replace( n = val.replace(new RegExp(searchWord, 'g'), `<span style='color:red'>${searchWord}</span>`);
          new RegExp(searchWord, 'g'),
          `<span style='color:red'>${searchWord}</span>`,
          );
          } else { } else {
          n = val; n = val;
          } }
          ...@@ -242,12 +236,7 @@ const ServiceLog = () => { ...@@ -242,12 +236,7 @@ const ServiceLog = () => {
          const setTime = (time, value) => { const setTime = (time, value) => {
          setTimeInterval(value); setTimeInterval(value);
          setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss')); setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
          setStartTime( setStartTime(moment(new Date(new Date().getTime() - time * 60 * 1000), 'YYYY-MM-DD HH:mm:ss'));
          moment(
          new Date(new Date().getTime() - time * 60 * 1000),
          'YYYY-MM-DD HH:mm:ss',
          ),
          );
          }; };
          // 设置返回状态 // 设置返回状态
          const changeStatus = value => { const changeStatus = value => {
          ...@@ -337,9 +326,7 @@ const ServiceLog = () => { ...@@ -337,9 +326,7 @@ const ServiceLog = () => {
          <Spin spinning={loading} tip="loading"> <Spin spinning={loading} tip="loading">
          <Row style={{ background: 'white' }}> <Row style={{ background: 'white' }}>
          <Col span={8} style={{ paddingTop: '8px', paddingLeft: '5px' }}> <Col span={8} style={{ paddingTop: '8px', paddingLeft: '5px' }}>
          <span style={{ fontSize: '14px', fontWeight: '600' }}> <span style={{ fontSize: '14px', fontWeight: '600' }}>访问量统计</span>
          访问量统计
          </span>
          <span style={{ paddingLeft: '60%' }}>间隔：</span> <span style={{ paddingLeft: '60%' }}>间隔：</span>
          <Select <Select
          defaultValue="每小时" defaultValue="每小时"
          ...@@ -355,14 +342,10 @@ const ServiceLog = () => { ...@@ -355,14 +342,10 @@ const ServiceLog = () => {
          </Select> </Select>
          </Col> </Col>
          <Col span={7} offset={1} style={{ paddingTop: '8px' }}> <Col span={7} offset={1} style={{ paddingTop: '8px' }}>
          <span style={{ fontSize: '14px', fontWeight: '600' }}> <span style={{ fontSize: '14px', fontWeight: '600' }}>接口调用频次统计</span>
          接口调用频次统计
          </span>
          </Col> </Col>
          <Col span={7} offset={1} style={{ paddingTop: '8px' }}> <Col span={7} offset={1} style={{ paddingTop: '8px' }}>
          <span style={{ fontSize: '14px', fontWeight: '600' }}> <span style={{ fontSize: '14px', fontWeight: '600' }}>接口平均耗时统计</span>
          接口平均耗时统计
          </span>
          </Col> </Col>
          </Row> </Row>
          <Row className={styles.chart}> <Row className={styles.chart}>
          ...@@ -403,12 +386,7 @@ const ServiceLog = () => { ...@@ -403,12 +386,7 @@ const ServiceLog = () => {
          Path: { alias: '接口调用频次' }, Path: { alias: '接口调用频次' },
          }} }}
          > >
          <Axis <Axis name="Path" label="" title={{ offset: 20 }} className={styles.fontColor} />
          name="Path"
          label=""
          title={{ offset: 20 }}
          className={styles.fontColor}
          />
          <Axis name="Count" title /> <Axis name="Count" title />
          <Interval position="Path*Count" /> <Interval position="Path*Count" />
          <Tooltip shared lock /> <Tooltip shared lock />
          ...@@ -442,8 +420,7 @@ const ServiceLog = () => { ...@@ -442,8 +420,7 @@ const ServiceLog = () => {
          dataSource={dataTable} dataSource={dataTable}
          scroll={{ x: 'max-content', y: 'calc(100vh - 580px)' }} scroll={{ x: 'max-content', y: 'calc(100vh - 580px)' }}
          pagination={{ pagination={{
          showTotal: (total, range) => showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
          `第${range[0]}-${range[1]} 条/共 ${total} 条`,
          pageSizeOptions: [10, 20, 50, 100], pageSizeOptions: [10, 20, 50, 100],
          defaultPageSize: 20, defaultPageSize: 20,
          showQuickJumper: true, showQuickJumper: true,
          ......
          src/pages/platformCenter/messageManage/projectManage/components/IISAgentConfig/VisibleIISAgentConfig.jsx
          View file @ aef5a577
          import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react';
          import SiteModal from '@/components/Modal/SiteModa'; import SiteModal from '@/components/Modal/SiteModa';
          import { Checkbox, Input, Button, Card, InputNumber, Form, Radio, DatePicker, Switch, Select, message } from 'antd' import {
          import HourOfDaySelect from './HourOfDaySelect' Checkbox,
          import DayOfWeekSelect from './DayOfWeekSelect' Input,
          import styles from './VisibleIISAgentConfig.less' Button,
          import moment from 'moment' Card,
          InputNumber,
          Form,
          Radio,
          DatePicker,
          Switch,
          Select,
          message,
          } from 'antd';
          import HourOfDaySelect from './HourOfDaySelect';
          import DayOfWeekSelect from './DayOfWeekSelect';
          import styles from './VisibleIISAgentConfig.less';
          import moment from 'moment';
          import { tr } from 'voca'; import { tr } from 'voca';
          import { EditOutlined, InfoCircleOutlined } from '@ant-design/icons'; import { EditOutlined, InfoCircleOutlined } from '@ant-design/icons';
          const { Item } = Form; const { Item } = Form;
          const { TextArea } = Input; const { TextArea } = Input;
          let unitType = { Hour: '小时', Minute: '分钟', Second: '秒' } let unitType = { Hour: '小时', Minute: '分钟', Second: '秒' };
          const hours = { '1': '星期一', '2': '星期二', '3': '星期三', '4': '星期四', '5': '星期五', '6': '星期六', '7': '星期天' } const hours = {
          '1': '星期一',
          '2': '星期二',
          '3': '星期三',
          '4': '星期四',
          '5': '星期五',
          '6': '星期六',
          '7': '星期天',
          };
          const VisibleIISAgentConfig = props => { const VisibleIISAgentConfig = props => {
          const [loading, setLoading] = useState(false);
          const [loading, setLoading] = useState(false); const [previewVisible, setPreviewVisible] = useState(false);
          const [previewVisible, setPreviewVisible] = useState(false) const [selectRole, setSelectRole] = useState([]);
          const [selectRole, setSelectRole] = useState([]) const [isReentrant, setIsReentrant] = useState(false);
          const [isReentrant, setIsReentrant] = useState(false) const [postCheck, setPostCheck] = useState(false);
          const [postCheck, setPostCheck] = useState(false) const [reenCheck, setReenCheck] = useState(false);
          const [reenCheck, setReenCheck] = useState(false) const [logCheck, setLogCheck] = useState(false);
          const [logCheck, setLogCheck] = useState(false) const [isEndTimeShow, setIsEndTimeShow] = useState(false);
          const [isEndTimeShow, setIsEndTimeShow] = useState(false) const [isLoopShow, setIsLoopShow] = useState(false);
          const [isLoopShow, setIsLoopShow] = useState(false) const [isDayLoopShow, setIsDayLoopShow] = useState(false);
          const [isDayLoopShow, setIsDayLoopShow] = useState(false) const [isWeekLoopShow, setIsWeekLoopShow] = useState(false);
          const [isWeekLoopShow, setIsWeekLoopShow] = useState(false) const [waitCheck, setWaitCheck] = useState(false);
          const [waitCheck, setWaitCheck] = useState(false) const [isUse, setIsUse] = useState(true);
          const [isUse, setIsUse] = useState(true) const [interval, setInterval] = useState(1);
          const [interval, setInterval] = useState(1) const [loop_unit, setLoop_unit] = useState('Hour');
          const [loop_unit, setLoop_unit] = useState('Hour') const [exeType, setExeType] = useState(true);
          const [exeType, setExeType] = useState(true) const [isType, setIsType] = useState('重复执行');
          const [isType, setIsType] = useState('重复执行') const [isTypeValue, setIsTypeValue] = useState('BYLOOP');
          const [isTypeValue, setIsTypeValue] = useState('BYLOOP') const [time_out, setTime_out] = useState(30);
          const [time_out, setTime_out] = useState(30) const [weekData, setWeekData] = useState([]);
          const [weekData, setWeekData] = useState([]) const [exeTime, setExeTime] = useState(moment().format('YYYY-MM-DD 00:00:00'));
          const [exeTime, setExeTime] = useState(moment().format('YYYY-MM-DD 00:00:00')) const [selectValues, setSelectValues] = useState([]);
          const [selectValues, setSelectValues] = useState([]) const [form] = Form.useForm();
          const [form] = Form.useForm(); const dateFormat = 'YYYY-MM-DD HH:mm:ss';
          const dateFormat = 'YYYY-MM-DD HH:mm:ss'; const { agentConfig, value, onIISAgentSubmit } = props;
          const { agentConfig, value, onIISAgentSubmit } = props useEffect(() => {
          useEffect(() => { if (agentConfig) {
          if (agentConfig) { let startTime =
          let startTime = agentConfig.LoopMode === 'ByOnce' ? moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00').add(1, 'days') : moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00') agentConfig.LoopMode === 'ByOnce'
          form.setFieldsValue({ ? moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00').add(1, 'days')
          is_enable: agentConfig.Enabled, : moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00');
          url_type: agentConfig.Absolute ? true : false, form.setFieldsValue({
          url_path: agentConfig.Url, is_enable: agentConfig.Enabled,
          request_header: agentConfig.CustomHeader, url_type: agentConfig.Absolute ? true : false,
          plan_type: agentConfig.LoopMode, url_path: agentConfig.Url,
          start_time: agentConfig.StartFrom ? moment(agentConfig.StartFrom, dateFormat) : startTime, request_header: agentConfig.CustomHeader,
          end_time: agentConfig.EndAt ? moment(agentConfig.EndAt, dateFormat) : '', plan_type: agentConfig.LoopMode,
          loop_mode: agentConfig.LoopMode, start_time: agentConfig.StartFrom ? moment(agentConfig.StartFrom, dateFormat) : startTime,
          interval: agentConfig.Interval, end_time: agentConfig.EndAt ? moment(agentConfig.EndAt, dateFormat) : null,
          loop_unit: agentConfig.LoopUnit, loop_mode: agentConfig.LoopMode,
          hour_of_day: agentConfig.HourOfDay && agentConfig.HourOfDay.split(","), interval: agentConfig.Interval,
          day_of_week: agentConfig.DayOfWeek, loop_unit: agentConfig.LoopUnit,
          time_out: agentConfig.Timeout || 30, hour_of_day: agentConfig.HourOfDay && agentConfig.HourOfDay.split(','),
          post_state: agentConfig.UsePostState, day_of_week: agentConfig.DayOfWeek,
          reentrant: agentConfig.AllowReentrant, time_out: agentConfig.Timeout || 30,
          enable_log: agentConfig.AllowLog, post_state: agentConfig.UsePostState,
          }) reentrant: agentConfig.AllowReentrant,
          let startTimeValue = agentConfig.LoopMode === 'ByOnce' ? moment().add(1, 'days').format('YYYY-MM-DD 00:00:00') : moment().format('YYYY-MM-DD 00:00:00') enable_log: agentConfig.AllowLog,
          setExeTime(agentConfig.StartFrom ? agentConfig.StartFrom : startTimeValue) });
          setIsUse(agentConfig.Enabled) let startTimeValue =
          changeLoopMode(agentConfig.LoopMode) agentConfig.LoopMode === 'ByOnce'
          setReenCheck(agentConfig.AllowReentrant) ? moment()
          setPostCheck(agentConfig.UsePostState) .add(1, 'days')
          setLogCheck(agentConfig.AllowLog) .format('YYYY-MM-DD 00:00:00')
          setInterval(agentConfig.Interval) : moment().format('YYYY-MM-DD 00:00:00');
          setLoop_unit(agentConfig.LoopUnit) setExeTime(agentConfig.StartFrom ? agentConfig.StartFrom : startTimeValue);
          setWaitCheck(agentConfig.UseTimeout || false) setIsUse(agentConfig.Enabled);
          setTime_out(agentConfig.Timeout) changeLoopMode(agentConfig.LoopMode);
          if (agentConfig.LoopMode === 'ByOnce') { setReenCheck(agentConfig.AllowReentrant);
          setIsType('执行一次') setPostCheck(agentConfig.UsePostState);
          form.setFieldsValue({ setLogCheck(agentConfig.AllowLog);
          type: '执行一次' setInterval(agentConfig.Interval);
          }) setLoop_unit(agentConfig.LoopUnit);
          setExeType(false) setWaitCheck(agentConfig.UseTimeout || false);
          } setTime_out(agentConfig.Timeout);
          else { if (agentConfig.LoopMode === 'ByOnce') {
          setIsType('重复执行') setIsType('执行一次');
          form.setFieldsValue({
          type: '重复执行'
          })
          if (agentConfig.LoopMode === 'ByDay') {
          setSelectValues(agentConfig.HourOfDay.split(','))
          }
          else if (agentConfig.LoopMode === 'ByWeek') {
          setWeekData(agentConfig.DayOfWeek.split(','))
          }
          setExeType(true)
          }
          } else {
          form.setFieldsValue({
          type: '重复执行',
          url_type: false,
          loop_mode: 'BYLOOP',
          start_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00')
          })
          setExeTime(moment().format('YYYY-MM-DD 00:00:00'))
          setIsType('重复执行')
          changeLoopMode('BYLOOP')
          setIsUse(true)
          setInterval(1)
          setLoop_unit('Hour')
          }
          }, [agentConfig])
          useEffect(() => {
          if (value) {
          form.setFieldsValue({
          name: value
          })
          setSelectRole(props.value)
          }
          }, [props])
          const handleCancel = () => {
          setPreviewVisible(false)
          }
          const handleOk = async () => {
          let fv = form.getFieldValue()
          if ((fv.loop_mode === 'ByDay' && !selectValues.length) || (fv.loop_mode === 'ByWeek' && !weekData.length)) {
          message.warning('请选择计划执行日')
          return false
          }
          let data = {
          Url: fv.url_path,
          CustomHeader: fv.request_header || '',
          StartFrom: fv.start_time && fv.start_time.format(dateFormat),
          EndAt: fv.end_time && fv.end_time.format(dateFormat),
          LoopMode: fv.loop_mode === 'ByOnce' ? 'BYLOOP' : fv.loop_mode,
          LoopUnit: loop_unit,
          MonthOfYear: null,
          WeekOfMonth: null,
          DayOfWeek: fv.day_of_week ? fv.day_of_week.toString() : '',
          DayOfMonth: null,
          HourOfDay: fv.hour_of_day && fv.hour_of_day.toString(),
          Interval: interval.toString(),
          UsePostState: fv.post_state,
          AllowReentrant: fv.reentrant,
          AllowLog: fv.enable_log,
          Enabled: isUse,
          Timeout: fv.time_out ? parseInt(fv.time_out) : 30,
          Absolute: fv.url_type,
          SiteInfo: null,
          Name: fv.name,
          Tolerate: null,
          UseTimeout: waitCheck
          }
          fv.time_out ? data.MillisecondsTimeout = parseInt(fv.time_out) : ''
          setPreviewVisible(false)
          await onIISAgentSubmit && onIISAgentSubmit(
          data
          )
          }
          const handleClick = () => {
          if (value) {
          setPreviewVisible(true)
          } else {
          message.error("请先输入方案名称！")
          }
          }
          const onPostChange = (value) => {
          setIsReentrant(value)
          setPostCheck(value)
          form.setFieldsValue({ form.setFieldsValue({
          post_state: value type: '执行一次',
          }) });
          } setExeType(false);
          const onReenChange = (value) => { } else {
          setReenCheck(value) setIsType('重复执行');
          form.setFieldsValue({
          reentrant: value
          })
          }
          const onLogChange = (value) => {
          setLogCheck(value)
          form.setFieldsValue({ form.setFieldsValue({
          enable_log: value type: '重复执行',
          }) });
          } if (agentConfig.LoopMode === 'ByDay') {
          setSelectValues(agentConfig.HourOfDay.split(','));
          const changeLoopMode = (value) => { } else if (agentConfig.LoopMode === 'ByWeek') {
          setIsTypeValue(value) setWeekData(agentConfig.DayOfWeek.split(','));
          switch (value) {
          case "ByOnce":
          setIsEndTimeShow(false)
          setIsLoopShow(true)
          setIsWeekLoopShow(false)
          setIsDayLoopShow(false)
          break
          case "BYLOOP":
          setIsEndTimeShow(true)
          setIsLoopShow(true)
          setIsWeekLoopShow(false)
          setIsDayLoopShow(false)
          break
          case "ByDay":
          setIsEndTimeShow(true)
          setIsLoopShow(false)
          setIsWeekLoopShow(false)
          setIsDayLoopShow(true)
          break
          case "ByWeek":
          setIsEndTimeShow(true)
          setIsLoopShow(false)
          setIsWeekLoopShow(true)
          setIsDayLoopShow(true)
          break
          } }
          setExeType(true);
          }
          } else {
          form.setFieldsValue({
          type: '重复执行',
          url_type: false,
          loop_mode: 'BYLOOP',
          start_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00'),
          });
          setExeTime(moment().format('YYYY-MM-DD 00:00:00'));
          setIsType('重复执行');
          changeLoopMode('BYLOOP');
          setIsUse(true);
          setInterval(1);
          setLoop_unit('Hour');
          } }
          const onLoopModeChange = (e) => { }, [agentConfig]);
          changeLoopMode(e.target.value)
          if (e.target.value === 'BYLOOP') { useEffect(() => {
          form.setFieldsValue({ if (value) {
          hour_of_day: '', form.setFieldsValue({
          day_of_week: '' name: value,
          }) });
          } setSelectRole(props.value);
          }
          const onChange = (value) => {
          setIsUse(value)
          }
          const handleExe = (e) => {
          let obj = form.getFieldValue()
          let value = e.target.value
          setIsType(value)
          if (value === '执行一次') {
          changeLoopMode('ByOnce')
          setLoop_unit('Second')
          form.setFieldsValue({
          loop_mode: 'ByOnce',
          hour_of_day: '',
          day_of_week: '',
          end_time: obj.start_time
          })
          if (!agentConfig) {
          form.setFieldsValue({
          start_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00').add(1, 'days'),
          end_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00').add(1, 'days')
          })
          setExeTime(moment().add(1, 'days').format('YYYY-MM-DD 00:00:00'))
          }
          setExeType(false)
          } else {
          changeLoopMode('BYLOOP')
          setExeType(true)
          form.setFieldsValue({
          loop_mode: 'BYLOOP',
          end_time: ''
          })
          if (!agentConfig) {
          form.setFieldsValue({
          start_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00'),
          hour_of_day: '',
          day_of_week: ''
          })
          setExeTime(moment().format('YYYY-MM-DD 00:00:00'))
          }
          }
          } }
          const onWait = (e) => { }, [props]);
          setWaitCheck(e) const handleCancel = () => {
          setPreviewVisible(false);
          };
          const handleOk = async () => {
          let fv = form.getFieldValue();
          if (
          (fv.loop_mode === 'ByDay' && !selectValues.length) ||
          (fv.loop_mode === 'ByWeek' && !weekData.length)
          ) {
          message.warning('请选择计划执行日');
          return false;
          } }
          const changeUnit = (e) => { let data = {
          setLoop_unit(e) Url: fv.url_path,
          CustomHeader: fv.request_header || '',
          StartFrom: fv.start_time && fv.start_time.format(dateFormat),
          EndAt: fv.end_time && fv.end_time.format(dateFormat),
          LoopMode: fv.loop_mode === 'ByOnce' ? 'BYLOOP' : fv.loop_mode,
          LoopUnit: loop_unit,
          MonthOfYear: null,
          WeekOfMonth: null,
          DayOfWeek: fv.day_of_week ? fv.day_of_week.toString() : '',
          DayOfMonth: null,
          HourOfDay: fv.hour_of_day && fv.hour_of_day.toString(),
          Interval: interval.toString(),
          UsePostState: fv.post_state,
          AllowReentrant: fv.reentrant,
          AllowLog: fv.enable_log,
          Enabled: isUse,
          Timeout: fv.time_out ? parseInt(fv.time_out) : 30,
          Absolute: fv.url_type,
          SiteInfo: null,
          Name: fv.name,
          Tolerate: null,
          UseTimeout: waitCheck,
          };
          fv.time_out ? (data.MillisecondsTimeout = parseInt(fv.time_out)) : '';
          setPreviewVisible(false);
          (await onIISAgentSubmit) && onIISAgentSubmit(data);
          };
          const handleClick = () => {
          if (value) {
          setPreviewVisible(true);
          } else {
          message.error('请先输入方案名称！');
          } }
          const changeInterval = (e) => { };
          setInterval(e) const onPostChange = value => {
          setIsReentrant(value);
          setPostCheck(value);
          form.setFieldsValue({
          post_state: value,
          });
          };
          const onReenChange = value => {
          setReenCheck(value);
          form.setFieldsValue({
          reentrant: value,
          });
          };
          const onLogChange = value => {
          setLogCheck(value);
          form.setFieldsValue({
          enable_log: value,
          });
          };
          const changeLoopMode = value => {
          setIsTypeValue(value);
          switch (value) {
          case 'ByOnce':
          setIsEndTimeShow(false);
          setIsLoopShow(true);
          setIsWeekLoopShow(false);
          setIsDayLoopShow(false);
          break;
          case 'BYLOOP':
          setIsEndTimeShow(true);
          setIsLoopShow(true);
          setIsWeekLoopShow(false);
          setIsDayLoopShow(false);
          break;
          case 'ByDay':
          setIsEndTimeShow(true);
          setIsLoopShow(false);
          setIsWeekLoopShow(false);
          setIsDayLoopShow(true);
          break;
          case 'ByWeek':
          setIsEndTimeShow(true);
          setIsLoopShow(false);
          setIsWeekLoopShow(true);
          setIsDayLoopShow(true);
          break;
          } }
          const InputTimeOut = (e) => { };
          setTime_out(e) const onLoopModeChange = e => {
          changeLoopMode(e.target.value);
          if (e.target.value === 'BYLOOP') {
          form.setFieldsValue({
          hour_of_day: '',
          day_of_week: '',
          });
          } }
          const changeStartTime = (e) => { };
          setExeTime(moment(e).format('YYYY-MM-DD HH:mm:ss')) const onChange = value => {
          let obj = form.getFieldValue() setIsUse(value);
          if (obj.loop_mode === 'ByOnce') };
          setLoop_unit('Second') const handleExe = e => {
          let obj = form.getFieldValue();
          let value = e.target.value;
          setIsType(value);
          if (value === '执行一次') {
          changeLoopMode('ByOnce');
          setLoop_unit('Second');
          form.setFieldsValue({
          loop_mode: 'ByOnce',
          hour_of_day: '',
          day_of_week: '',
          end_time: obj.start_time,
          });
          if (!agentConfig) {
          form.setFieldsValue({ form.setFieldsValue({
          end_time: moment(e).format('YYYY-MM-DD HH:mm:ss') start_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00').add(
          }) 1,
          } 'days',
          const changeDay = (data) => { ),
          console.log('data', data); end_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00').add(
          if (data) setSelectValues(data) 1,
          } 'days',
          const changeWeek = (data) => { ),
          if (data) setWeekData(data) });
          setExeTime(
          moment()
          .add(1, 'days')
          .format('YYYY-MM-DD 00:00:00'),
          );
          }
          setExeType(false);
          } else {
          changeLoopMode('BYLOOP');
          setExeType(true);
          form.setFieldsValue({
          loop_mode: 'BYLOOP',
          end_time: '',
          });
          if (!agentConfig) {
          form.setFieldsValue({
          start_time: moment(new Date(new Date().toLocaleDateString()), 'YYYY-MM-DD 00:00:00'),
          hour_of_day: '',
          day_of_week: '',
          });
          setExeTime(moment().format('YYYY-MM-DD 00:00:00'));
          }
          } }
          return ( };
          <div className={styles.agent_container}> const onWait = e => {
          <Input value={selectRole} disabled={true} /> setWaitCheck(e);
          <div className={styles.select_btn} onClick={handleClick}><EditOutlined style={{ fontSize: '18px' }} /></div> };
          <SiteModal const changeUnit = e => {
          {...props} setLoop_unit(e);
          title="编辑定时任务" };
          bodyStyle={{ width: '100%', minHeight: '100px' }} const changeInterval = e => {
          style={{ top: 100, borderRadius: '20px' }} setInterval(e);
          width="800px" };
          destroyOnClose const InputTimeOut = e => {
          cancelText="取消" setTime_out(e);
          okText="确认" };
          forceRender const changeStartTime = e => {
          visible={previewVisible} setExeTime(moment(e).format('YYYY-MM-DD HH:mm:ss'));
          onOk={() => handleOk()} let obj = form.getFieldValue();
          confirmLoading={loading} if (obj.loop_mode === 'ByOnce') setLoop_unit('Second');
          onCancel={handleCancel} form.setFieldsValue({
          end_time: moment(e).format('YYYY-MM-DD HH:mm:ss'),
          > });
          <div className={styles.IISAgent_container}> };
          <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}> const changeDay = data => {
          <Item console.log('data', data);
          label="计划名称" if (data) setSelectValues(data);
          name="name" };
          > const changeWeek = data => {
          <Input placeholder="请输入计划名称" disabled={true} /> if (data) setWeekData(data);
          </Item> };
          return (
          <Item <div className={styles.agent_container}>
          label="URL路径" <Input value={selectRole} disabled={true} />
          > <div className={styles.select_btn} onClick={handleClick}>
          <Item <EditOutlined style={{ fontSize: '18px' }} />
          label="" </div>
          name="url_type" <SiteModal
          style={{ marginBottom: '0.2rem' }} {...props}
          > title="编辑定时任务"
          <Radio.Group > bodyStyle={{ width: '100%', minHeight: '100px' }}
          <Radio value={false}>相对路径(便于配置迁移)</Radio> style={{ top: 100, borderRadius: '20px' }}
          <Radio value={true}>绝对路径(用于外链)</Radio> width="800px"
          </Radio.Group> destroyOnClose
          </Item> cancelText="取消"
          <Item okText="确认"
          label="" forceRender
          name="url_path" visible={previewVisible}
          style={{ marginBottom: '0' }} onOk={() => handleOk()}
          > confirmLoading={loading}
          <TextArea rows={3} placeholder="请输入URL名称" /> onCancel={handleCancel}
          </Item> >
          </Item> <div className={styles.IISAgent_container}>
          <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
          <Item label="计划名称" name="name">
          <Input placeholder="请输入计划名称" disabled={true} />
          </Item>
          <Item <Item label="URL路径">
          label="请求头" <Item label="" name="url_type" style={{ marginBottom: '0.2rem' }}>
          name="request_header" <Radio.Group>
          > <Radio value={false}>相对路径(便于配置迁移)</Radio>
          <Input placeholder="请求头，选填" /> <Radio value={true}>绝对路径(用于外链)</Radio>
          </Item> </Radio.Group>
          <Item </Item>
          label="计划类型" <Item label="" name="url_path" style={{ marginBottom: '0' }}>
          name="type" <TextArea rows={3} placeholder="请输入URL名称" />
          > </Item>
          </Item>
          <Radio.Group onChange={handleExe}> <Item label="请求头" name="request_header">
          <Radio.Button value="重复执行">重复执行</Radio.Button> <Input placeholder="请求头，选填" />
          <Radio.Button value="执行一次">执行一次</Radio.Button> </Item>
          </Radio.Group> <Item label="计划类型" name="type">
          </Item> <Radio.Group onChange={handleExe}>
          {exeType && (<Item <Radio.Button value="重复执行">重复执行</Radio.Button>
          label="执行方式" <Radio.Button value="执行一次">执行一次</Radio.Button>
          name="loop_mode" </Radio.Group>
          > </Item>
          <Radio.Group onChange={onLoopModeChange}> {exeType && (
          <Radio value={"BYLOOP"}>循环</Radio> <Item label="执行方式" name="loop_mode">
          <Radio value={"ByDay"}>每天</Radio> <Radio.Group onChange={onLoopModeChange}>
          <Radio value={"ByWeek"}>每周</Radio> <Radio value={'BYLOOP'}>循环</Radio>
          </Radio.Group> <Radio value={'ByDay'}>每天</Radio>
          </Item>)} <Radio value={'ByWeek'}>每周</Radio>
          <Item </Radio.Group>
          label="开始时间" </Item>
          wrapperCol={{ span: 28 }} )}
          style={{ marginBottom: '0' }} <Item label="开始时间" wrapperCol={{ span: 28 }} style={{ marginBottom: '0' }}>
          > <div style={{ display: 'flex' }}>
          <div style={{ display: 'flex' }}> <Item label="" name="start_time" style={{ marginRight: '1rem' }}>
          <Item <DatePicker showTime onChange={changeStartTime} />
          label="" </Item>
          name="start_time" {isEndTimeShow && (
          style={{ marginRight: '1rem' }} <Item label="结束时间" name="end_time">
          > <DatePicker showTime />
          <DatePicker showTime onChange={changeStartTime} /> </Item>
          </Item> )}
          { </div>
          isEndTimeShow && ( </Item>
          <Item
          label="结束时间"
          name="end_time"
          >
          <DatePicker showTime />
          </Item>
          )
          }
          </div>
          </Item> {isLoopShow && isType === '重复执行' && (
          <Card style={{ width: 600, margin: '0 0 1rem 3.6rem', height: '8rem' }}>
          <div className={styles.loopShow}>
          { <span> 每</span>
          isLoopShow && (isType === '重复执行') && ( <InputNumber
          <Card style={{ width: 600, margin: '0 0 1rem 3.6rem', height: '8rem' }}> min={0}
          <div className={styles.loopShow}> value={interval}
          <span> 每</span> style={{ margin: '0 0.5rem' }}
          <InputNumber min={0} value={interval} style={{ margin: '0 0.5rem' }} onChange={changeInterval} placeholder="请输入循环周期" /> onChange={changeInterval}
          <Select value={loop_unit} onChange={changeUnit} style={{ width: '8rem', margin: '0 0.5rem' }} > placeholder="请输入循环周期"
          <Select.Option value="Hour">小时</Select.Option> />
          <Select.Option value="Minute">分钟</Select.Option> <Select
          <Select.Option value="Second">秒</Select.Option> value={loop_unit}
          </Select> onChange={changeUnit}
          <span> 执行一次</span> style={{ width: '8rem', margin: '0 0.5rem' }}
          </div> >
          </Card> <Select.Option value="Hour">小时</Select.Option>
          <Select.Option value="Minute">分钟</Select.Option>
          ) <Select.Option value="Second">秒</Select.Option>
          } </Select>
          { <span> 执行一次</span>
          isDayLoopShow && ( </div>
          <Item </Card>
          label="日循环" )}
          name="hour_of_day" {isDayLoopShow && (
          > <Item label="日循环" name="hour_of_day">
          <HourOfDaySelect changeDay={changeDay} /> <HourOfDaySelect changeDay={changeDay} />
          </Item> </Item>
          ) )}
          } {isWeekLoopShow && (
          { <Item label="周循环" name="day_of_week">
          isWeekLoopShow && ( <DayOfWeekSelect changeWeek={changeWeek} />
          <Item </Item>
          label="周循环" )}
          name="day_of_week" {isTypeValue === 'ByDay'
          > ? !selectValues.length && (
          <DayOfWeekSelect changeWeek={changeWeek} /> <span style={{ color: '#f00' }} className={styles.exeTime}>
          </Item> <InfoCircleOutlined style={{ marginRight: '0.2rem' }} />
          ) 必须选择计划执行时刻
          } </span>
          {isTypeValue === 'ByDay' ? !selectValues.length && (<span style={{ color: '#f00' }} className={styles.exeTime} ><InfoCircleOutlined style={{ marginRight: '0.2rem' }} />必须选择计划执行时刻</span>) : ''} )
          : ''}
          {isTypeValue === 'ByWeek' ? !weekData.length && (<span style={{ color: '#f00' }} className={styles.exeTime} ><InfoCircleOutlined style={{ marginRight: '0.2rem' }} />必须选择计划执行时刻</span>) : ''}
          <Item
          label="说明"
          >
          <div style={{ color: '#909EB6FF', fontSize: '12px' }}>
          {isType === '执行一次' && (<span>
          在{exeTime}执行一次
          </span>)}
          {isType === '重复执行' && isTypeValue === 'ByDay' && (<span style={{ color: selectValues.length ? '#909EB6FF' : '#f00' }}>
          从{exeTime}开始{selectValues.length ? '，在每天' : ''}{selectValues.length ? selectValues.map((item, index) => {
          return item.length > 1 ? `${item}:00${index == selectValues.length - 1 ? '' : '，'}` : `0${item}:00${index == selectValues.length - 1 ? '' : '，'}`
          }) : ''}{selectValues.length ? '执行' : ''}
          </span>)}
          {isType === '重复执行' && isTypeValue === 'ByWeek' && (<span style={{ color: weekData.length ? '#909EB6FF' : '#f00' }}>
          从{exeTime}开始{weekData.length ? ',在每周' : ''}{weekData.length ? weekData.map((item, index) => {
          return `${hours[item]}${index == weekData.length - 1 ? '' : '，'}`
          }) : ''}{weekData.length && selectValues.length ? selectValues.map((item, index) => {
          return item.length > 1 ? `${item}:00${index == selectValues.length - 1 ? '' : '，'}` : `0${item}:00${index == selectValues.length - 1 ? '' : '，'}`
          }) : ''} {weekData.length ? '执行' : ''}
          </span>)}
          {isType === '重复执行' && isTypeValue === 'BYLOOP' && (<span style={{ color: '#909EB6FF' }}>
          从{exeTime}开始，每{interval}{unitType[loop_unit]}执行一次。
          </span>)}
          </div>
          </Item>
          <Item
          label="其他设置"
          wrapperCol={{ span: 28 }}
          style={{ marginBottom: '0' }}
          > <div style={{ display: 'flex' }}>
          <div style={{ display: 'flex' }}>
          <Item
          name="wait"
          style={{ marginRight: '0.5rem' }}
          >
          <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={onWait} checked={waitCheck} />
          </Item>
          <div style={{ paddingTop: '0.3rem' }}>请求等待时间（单位：秒）</div>
          </div>
          {waitCheck && (<Item
          name="time_out"
          >
          <div>
          <InputNumber value={time_out} onChange={InputTimeOut} />
          </div>
          </Item>)}
          </div></Item>
          <Item
          label=" "
          wrapperCol={{ span: 28 }}
          colon={false}
          style={{ marginBottom: '0' }}
          > <div style={{ display: 'flex' }}>
          <Item
          name="post_state"
          style={{ marginRight: '0.5rem' }}
          >
          <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={onPostChange} checked={postCheck} />
          </Item>
          <div style={{ paddingTop: '0.3rem' }}>使用POST维持状态(上一次返回结果传入下一次请求)</div>
          </div>
          </Item>
          <Item
          label=" "
          wrapperCol={{ span: 28 }}
          colon={false}
          style={{ marginBottom: '0' }}
          > {isTypeValue === 'ByWeek'
          <div style={{ display: 'flex' }}> ? !weekData.length && (
          <Item <span style={{ color: '#f00' }} className={styles.exeTime}>
          style={{ marginRight: '0.5rem' }} <InfoCircleOutlined style={{ marginRight: '0.2rem' }} />
          name="reentrant" 必须选择计划执行时刻
          > </span>
          <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={onReenChange} disabled={isReentrant} checked={reenCheck} /> )
          </Item> : ''}
          <div style={{ paddingTop: '0.3rem' }}>允许重入(上一次未执行完，也会执行下一次请求)</div> <Item label="说明">
          </div> <div style={{ color: '#909EB6FF', fontSize: '12px' }}>
          </Item> {isType === '执行一次' && <span>在{exeTime}执行一次</span>}
          <Item {isType === '重复执行' && isTypeValue === 'ByDay' && (
          label=" " <span style={{ color: selectValues.length ? '#909EB6FF' : '#f00' }}>
          wrapperCol={{ span: 28 }} 从{exeTime}开始{selectValues.length ? '，在每天' : ''}
          colon={false} {selectValues.length
          style={{ marginBottom: '0' }} ? selectValues.map((item, index) => {
          return item.length > 1
          ? `${item}:00${index == selectValues.length - 1 ? '' : '，'}`
          : `0${item}:00${index == selectValues.length - 1 ? '' : '，'}`;
          })
          : ''}
          {selectValues.length ? '执行' : ''}
          </span>
          )}
          {isType === '重复执行' && isTypeValue === 'ByWeek' && (
          <span style={{ color: weekData.length ? '#909EB6FF' : '#f00' }}>
          从{exeTime}开始{weekData.length ? ',在每周' : ''}
          {weekData.length
          ? weekData.map((item, index) => {
          return `${hours[item]}${index == weekData.length - 1 ? '' : '，'}`;
          })
          : ''}
          {weekData.length && selectValues.length
          ? selectValues.map((item, index) => {
          return item.length > 1
          ? `${item}:00${index == selectValues.length - 1 ? '' : '，'}`
          : `0${item}:00${index == selectValues.length - 1 ? '' : '，'}`;
          })
          : ''}{' '}
          {weekData.length ? '执行' : ''}
          </span>
          )}
          {isType === '重复执行' && isTypeValue === 'BYLOOP' && (
          <span style={{ color: '#909EB6FF' }}>
          从{exeTime}开始，每{interval}
          {unitType[loop_unit]}执行一次。
          </span>
          )}
          </div>
          </Item>
          <Item label="其他设置" wrapperCol={{ span: 28 }} style={{ marginBottom: '0' }}>
          {' '}
          <div style={{ display: 'flex' }}>
          <div style={{ display: 'flex' }}>
          <Item name="wait" style={{ marginRight: '0.5rem' }}>
          <Switch
          checkedChildren="开启"
          unCheckedChildren="关闭"
          onChange={onWait}
          checked={waitCheck}
          />
          </Item>
          <div style={{ paddingTop: '0.3rem' }}>请求等待时间（单位：秒）</div>
          </div>
          > {waitCheck && (
          <div style={{ display: 'flex' }}> <Item name="time_out">
          <Item <div>
          name="enable_log" <InputNumber value={time_out} onChange={InputTimeOut} />
          style={{ marginRight: '0.5rem' }} </div>
          > </Item>
          <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={onLogChange} checked={logCheck} /> )}
          </Item> </div>
          <div style={{ paddingTop: '0.3rem' }}>记录日志(小于每分钟一次的请求不会记录)</div> </Item>
          </div> <Item label=" " wrapperCol={{ span: 28 }} colon={false} style={{ marginBottom: '0' }}>
          </Item> {' '}
          <Item <div style={{ display: 'flex' }}>
          label="禁用计划" <Item name="post_state" style={{ marginRight: '0.5rem' }}>
          style={{ color: '#f00' }} <Switch
          name="is_enable" checkedChildren="开启"
          > unCheckedChildren="关闭"
          <Switch checkedChildren="开启" unCheckedChildren="关闭" checked={isUse} onChange={onChange} /> onChange={onPostChange}
          </Item> checked={postCheck}
          </Form> />
          </Item>
          <div style={{ paddingTop: '0.3rem' }}>
          使用POST维持状态(上一次返回结果传入下一次请求)
          </div>
          </div>
          </Item>
          <Item label=" " wrapperCol={{ span: 28 }} colon={false} style={{ marginBottom: '0' }}>
          <div style={{ display: 'flex' }}>
          <Item style={{ marginRight: '0.5rem' }} name="reentrant">
          <Switch
          checkedChildren="开启"
          unCheckedChildren="关闭"
          onChange={onReenChange}
          disabled={isReentrant}
          checked={reenCheck}
          />
          </Item>
          <div style={{ paddingTop: '0.3rem' }}>
          允许重入(上一次未执行完，也会执行下一次请求)
          </div> </div>
          </SiteModal> </div>
          </Item>
          <Item label=" " wrapperCol={{ span: 28 }} colon={false} style={{ marginBottom: '0' }}>
          <div style={{ display: 'flex' }}>
          <Item name="enable_log" style={{ marginRight: '0.5rem' }}>
          <Switch
          checkedChildren="开启"
          unCheckedChildren="关闭"
          onChange={onLogChange}
          checked={logCheck}
          />
          </Item>
          <div style={{ paddingTop: '0.3rem' }}>记录日志(小于每分钟一次的请求不会记录)</div>
          </div>
          </Item>
          <Item label="禁用计划" style={{ color: '#f00' }} name="is_enable">
          <Switch
          checkedChildren="开启"
          unCheckedChildren="关闭"
          checked={isUse}
          onChange={onChange}
          />
          </Item>
          </Form>
          </div> </div>
          ) </SiteModal>
          } </div>
          export default VisibleIISAgentConfig; );
          \ No newline at end of file };
          export default VisibleIISAgentConfig;
          src/pages/productCenter/webConfig/components/siteConfigDrawer.js
          View file @ aef5a577
          ...@@ -270,7 +270,10 @@ export default props => { ...@@ -270,7 +270,10 @@ export default props => {
          <div className={styles.colorBox}> <div className={styles.colorBox}>
          <div <div
          className={styles.colorSwatch} className={styles.colorSwatch}
          onClick={() => setDisplayColorPicker(!displayColorPicker)} onClick={e => {
          e.stopPropagation();
          setDisplayColorPicker(!displayColorPicker);
          }}
          > >
          <div>{color}</div> <div>{color}</div>
          <div <div
          ...@@ -282,11 +285,22 @@ export default props => { ...@@ -282,11 +285,22 @@ export default props => {
          }} }}
          /> />
          </div> </div>
          <div className={styles.popover}>
          {displayColorPicker ? ( {displayColorPicker ? (
          <div className={styles.popover}>
          <div
          onClick={() => setDisplayColorPicker(false)}
          style={{
          position: 'fixed',
          top: '0px',
          right: '0px',
          bottom: '0px',
          left: '0px',
          }}
          />
          <SketchPicker color={color} onChange={e => colorChange(e)} width="230px" /> <SketchPicker color={color} onChange={e => colorChange(e)} width="230px" />
          ) : null} </div>
          </div> ) : null}
          </div> </div>
          </Form.Item> </Form.Item>
          <Form.Item label="产品类型" name="productType"> <Form.Item label="产品类型" name="productType">
          ......
          src/pages/productCenter/webConfig/components/siteConfigDrawer.less
          View file @ aef5a577
          .siteConfigContainer {} .siteConfigContainer {}
          .mask {
          position: fixed;
          top: 0;
          left: 0;
          width: 100vh;
          height: 100vh;
          // z-index: 1;
          }
          .colorBox { .colorBox {
          .colorSwatch { .colorSwatch {
          display: flex; display: flex;
          ......
          Markdown is supported
          0% or
          You are about to add 0 people to the discussion. Proceed with caution.
          Finish editing this message first!
          Please register or to comment