fix: 带颜色选项支持颜色选择

package.json

 {
   "name": "panda-xform",
-  "version": "6.10.19",
-  "description": "6.10.19 关联表单选中不显示配置问题",
+  "version": "6.10.20",
+  "description": "6.10.20 带颜色选项支持颜色选择",
   "keywords": [
     "panda-xform"
   ],

src/core/FormDesigner/config/settings.js

@@ -57,10 +57,25 @@ const layoutWidgets = [
         displayType: 'row',
         labelWidth: 75,
       },
+      isText: {
+        title: '是否为纯文本',
+        type: 'boolean',
+        widget: 'IsText',
+        default: false,
+      },
+      contentText: {
+        title: '纯文本内容',
+        type: 'string',
+        widget: 'ContentText',
+        hidden: "{{!formData.isText}}",
+        dependencies: ['IsText'],
+      },
       contentHTML: {
-        title: '控件内容',
+        title: '富文本内容',
         type: 'string',
         widget: 'ContentHTML',
+        hidden: "{{formData.isText}}",
+        dependencies: ['IsText'],
       },
       styleHTML: {
         title: '控件样式',

src/core/FormRender/index.js

@@ -12,6 +12,13 @@ import { isObject, getFieldInfo } from '../../utils'
 import { getWatch } from './watch'
 import styles from '../../main.less'
 
+const getLabelWidth = (schema) => {
+  if (['TextHTML', 'RelationForm', 'AreaTask'].includes(schema.widget)) {
+    return 1
+  }
+  return 110
+}
+
 const XRender = (props, ref) => {
 
   useImperativeHandle(ref, () => (
@@ -77,7 +84,7 @@ const XRender = (props, ref) => {
               ...child[s],
               title: ['RelationForm', 'AreaTask'].includes(child[s].widget) ? '' : child[s].title,
               titleShow: child[s].title || child[s].titleShow,
-              labelWidth: ['RelationForm', 'AreaTask'].includes(child[s].widget) ? 1 : 110,
+              labelWidth: getLabelWidth(child[s]),
               presetValue: value || child[s].presetValue || '',
               textDefalut: child[s].presetValue,
               formDisabled: disabled,

src/core/widgets/settings/groupBase/IsText/index.js

+import React, { useEffect } from 'react'
+import { Switch } from 'antd'
+
+const IsText = (props) => {
+
+  const { value, onChange, addons } = props
+
+  const switchChange = (checked) => {
+    if (addons) {
+      onChange(checked)
+    }
+  }
+
+  return (
+    <Switch
+      checked={value}
+      checkedChildren={'纯文本'}
+      unCheckedChildren={'富文本'}
+      onChange={switchChange}
+    >
+    </Switch>
+  )
+
+}
+
+export default IsText
\ No newline at end of file

src/core/widgets/settings/groupBase/index.js

@@ -11,6 +11,7 @@ import HiddenCondition from './HiddenCondition'
 import SwitchDefault from './SwitchDefault'
 import RichTextDefault from './RichTextDefault'
 import IsHidden from './IsHidden'
+import IsText from './IsText'
 
 const groupBase = {
   FieldNames,
@@ -26,6 +27,7 @@ const groupBase = {
   SwitchDefault,
   RichTextDefault,
   IsHidden,
+  IsText,
 }
 
 export default groupBase
\ No newline at end of file

src/core/widgets/settings/groupSource/SimpleList/index.js

@@ -6,6 +6,7 @@ import DragTable from '../../../../components/DragTable'
 import { CheckOutlined, DeleteOutlined, MenuOutlined } from '@ant-design/icons'
 import { colors } from '../../../../../constant'
 import { getNanoid } from '../../../../../utils'
+import { SketchPicker } from 'react-color'
 
 const SimpleList = (props) => {
 
@@ -14,6 +15,8 @@ const SimpleList = (props) => {
   const [visible, setVisible] = useState(false)
   const [text, setText] = useState('')
   const [loading, setLoading] = useState(true)
+  const [currentColor, setCurrentColor] = useState('')
+  const [currentRgba, setCurrentRgba] = useState('')
 
   useEffect(() => {
     if (addons) {
@@ -103,7 +106,31 @@ const SimpleList = (props) => {
             <div>
               <div className={styles.colorTop}>
                 <div className={styles.topLeft}>请选择颜色</div>
-                <div className={styles.topRight} onClick={() => rest(index)}>重置</div>
+                <div className={styles.topRight}>
+                  <Popconfirm
+                    overlayClassName={styles.Popconfirmtitle}
+                    placement="topLeft"
+                    icon={false}
+                    title={
+                      <SketchPicker width="217px" color={currentColor} onChange={e => {
+                        setCurrentRgba(`rgb(${e.rgb.r}, ${e.rgb.g}, ${e.rgb.b})`)
+                        setCurrentColor(e.hex)
+                      }} />
+                    }
+                    onConfirm={() => {
+                      let array = []
+                      value.forEach((v, i2) => {
+                        if (index === i2) {
+                          v.color = currentRgba
+                        }
+                        array.push({ ...v })
+                      })
+                      onChange(array)
+                    }}
+                  >
+                    <div className={styles.colorsSelect}></div>
+                  </Popconfirm>
+                </div>
               </div>
               <div className={styles.colorBox}>
                 {
@@ -154,7 +181,7 @@ const SimpleList = (props) => {
       return columns.filter(v => v.dataIndex !== 'color')
     }
     return columns
-  }, [value, color])
+  }, [value, color, currentColor])
 
   const switchChange = (checked) => {
     addons.setValue('color', checked)

src/core/widgets/settings/groupSource/SimpleList/index.less

@@ -3,56 +3,81 @@
     display: flex;
     justify-content: space-between;
   }
+
   .box {
     padding: 0 5px;
+
     .item {
       margin-top: 5px;
     }
   }
+
   .footer {
     margin-top: 4px;
+
     span {
       display: inline-block;
       color: #1495ff;
+
       &:nth-child(2) {
         margin: 0 5px;
         width: 2px;
         height: 11px;
         background: #a5a5a5;
       }
+
       &:hover {
         cursor: pointer;
       }
     }
   }
 }
+
 .colorTop {
   display: flex;
   justify-content: space-between;
+
   .topLeft {
     font-size: 15px;
     font-weight: 700;
     color: #707070;
   }
+
   .topRight {
     font-size: 12px;
     color: #41b3ec;
+
     &:hover {
       cursor: pointer;
     }
   }
 }
+
 .colorBox {
   width: 130px;
   display: flex;
   flex-wrap: wrap;
 }
+
+.colorsSelect {
+  width: 20px;
+  height: 20px;
+  border: 1px solid #40a9ff;
+  border-radius: 2px;
+  background: linear-gradient(135deg, rgb(255, 77, 79), rgb(115, 209, 61), rgb(89, 126, 247), rgb(54, 207, 201));
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
 .colors {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   margin-top: 6px;
   margin-left: 6px;
+
   &:hover {
     cursor: pointer;
   }

src/core/widgets/settings/groupStyle/ContentText/index.js

+import React, { useMemo, useEffect, useState } from 'react'
+import { Input } from 'antd'
+import { PlusOutlined } from '@ant-design/icons'
+import Drag from '../../../../components/Drag'
+
+const ContentText = (props) => {
+
+  const { value, addons, onChange } = props
+  const { title } = addons.formData
+  const [visible, setVisible] = useState(false)
+  const [areaValue, setAreaValue] = useState('')
+
+  const inputChange = (e) => {
+    onChange(e.target.value)
+  }
+
+  const areaChange = (e) => {
+    setAreaValue(e.target.value)
+  }
+
+  const onOk = () => {
+    onChange(areaValue)
+    setVisible(false)
+  }
+
+  const onCancel = () => {
+    setVisible(false)
+  }
+
+  const iconClick = () => {
+    setAreaValue(value)
+    setVisible(true)
+  }
+
+  return (
+    <div>
+      <Input
+        value={value}
+        onChange={inputChange}
+        addonAfter={<PlusOutlined onClick={iconClick} />}
+      />
+      <Drag
+        width='500px'
+        getContainer={false}
+        title={props.schema.title || '图标选择'}
+        visible={visible}
+        onOk={onOk}
+        onCancel={onCancel}
+      >
+        <Input.TextArea rows={5} value={areaValue} onChange={areaChange} />
+      </Drag>
+    </div>
+  )
+
+}
+
+export default ContentText
\ No newline at end of file

src/core/widgets/settings/groupStyle/index.js

@@ -4,6 +4,7 @@ import Formatting from './Formatting';
 import DecimalDigits from './DecimalDigits';
 import FileTypeSelect from './FileTypeSelect';
 import ContentHTML from './ContentHTML';
+import ContentText from './ContentText';
 import StyleHTML from './StyleHTML';
 import RadioGroupW from './RadioGroupW';
 import CheckBoxGroup from './CheckBoxGroup';
@@ -15,6 +16,7 @@ const groupStyle = {
   DecimalDigits,
   FileTypeSelect,
   ContentHTML,
+  ContentText,
   StyleHTML,
   RadioGroupW,
   CheckBoxGroup,

src/core/widgets/text/TextHTML/index.js

@@ -3,7 +3,13 @@ import React from 'react'
 const TextHTML = (props) => {
 
   const { value, onChange, schema } = props
-  const { contentHTML, styleHTML } = schema
+  const { isText, contentHTML, contentText, styleHTML } = schema
+
+  if (isText) {
+    return (
+      <div>{contentText}</div>
+    )
+  }
 
   return (
     <div style={{ width: '100%', ...styleHTML }}>