开发记录

那你笑一个嘛
107 阅读1分钟

遇到数组中两个相同的时候字体变红提示

  1. 新建 colors = []
  2. 新建 json = {}
  3. 选中的list map 有的数 json中加1，没有的等于1
  4. 判断json中的值是否大于1，大于1的时候colors[index] = true
  5. 根据数组中true or false 提示字体
let json = {};
fieldMappingList.map(item => json[item.mappingFieldName] ? json[item.mappingFieldName]++ : (json[item.mappingFieldName] = 1));
let colors = [];
fieldMappingList.map((item, i) => json[item.mappingFieldName] > 1 && (colors[i] = true));
css
className = { colors[index] && 'repeat' }

页面表格中的内容超出3行省略号

.btn-text{
    height: 65px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

页面递归渲染

1.首先写出dom节点作为一个组件
function Node(_item) {
  return (
    <>
      <Button>点击增加</Button>
      <div>123</div>
    </>
  )
}
2.父节点数据调用
  < div className = 'change-task-detail' >
  {
    parentNode.map((item, index) => <Node item={item} key={index} />)
  }
</div >
3.点击循环输出的时候

function Node(_item) {
  let [item, setItem] = useState(_item);//页面拉取的数据
  let [open, setOpen] = useState(false);//设置一个变量来控制按钮的展开收起
  return (
    <>
      <CaretRightOutlined className={`icon ${open}`} onClick={() => {
        open = !open;
        setOpen(open);
        if (!item.list && open) {
          //满足open为true并且没有调用接口的时候才掉用
          getNode(item.id).then(res => {
            if (res.success) {
              setItem({ ...item, list: res.data }); //页面拉取的数据拼接
            };
          });
        }
      }} />
      <div>{item.name}</div>
      {open && item.list?.map((sub, key) => <Node item={sub} key={key} />)}
	//open是打开的并且接口拉取的有值的时候才展示
    </>
  )
}

css
.icon,.icon.true {
  position: absolute;
  left: -20px;
  top: 3px;
}
.icon {
  transition: transform 0.3s;
}
.icon.true {
  transform: rotate(90deg);
}

自定义table 写form 当页面的逻辑相互嵌套时

<table className='assessment-task-result-table'>
  <tbody>
    <tr>
      <th>节点名称</th>
      <th>计划整改时间</th>
      <th>影响类型</th>
      <th>动作类型</th>
      <th>风险等级</th>
      <th>整改建议</th>
      {/* <th>操作</th> */}
    </tr>
    <Form.List name="assessInfo" >
      {(fields, { add, remove }) => (
        <>
          {fields.map(({ key, name, fieldKey, ...restField }, index) => {
            let data = form.getFieldValue();
            let current = data.assessInfo[index];
            let needTableCodeList = true;
            if (current && !requiredList.includes(current.affectType)) {
              needTableCodeList = false;
              delete current.tableCodeList;
            }
            return (
              (
                <tr key={fieldKey}>
                  <td>
                    <Item
                      {...restField}
                      name={[name, 'nodeName']}
                      fieldKey={[fieldKey, 'nodeName']}
                    >
                      <Input disabled={true} />
                    </Item>
                  </td>
                  <td>
                    <Item
                      {...restField}
                      name={[name, 'planRectifyTime']}
                      fieldKey={[fieldKey, 'planRectifyTime']}
                      rules={[{ required: true, message: '请选择' }]}
                    >
                      <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" disabled={taskState === 'finish'} />
                    </Item>
                  </td>
                  <td>
                    <Row>
                      <Col>
                        <Item
                          {...restField}
                          name={[name, 'affectType']}
                          fieldKey={[fieldKey, 'affectType']}
                          rules={[{ required: true, message: '请选择' }]}
                        >
                          <Select
                            style={{ width: 166 }}
                            laceholder='请选择'
                            dropdownClassName='select-content-width'
                            dropdownMatchSelectWidth={false}
                            onChange={(e) => onLinkage(e, fieldKey)}
                            disabled={taskState === 'finish'}
                          >
                            {
                              affectTypeList.map((item) =>
                                <Option key={item.code}>{item.name}</Option>
                              )
                            }
                          </Select>
                        </Item>
                      </Col>
                      {
                        requiredList.includes(current?.affectType) &&
                        <Col>
                          <Item
                            {...restField}
                            name={[name, 'tableCodeList']}
                            fieldKey={[fieldKey, 'tableCodeList']}
                            rules={[{ required: true, message: '请输入' }]}
                          >
                            <Input placeholder='请输入影响的列名，英文逗号分隔' disabled={!current?.affectType || taskState === 'finish'} />
                          </Item>
                        </Col>
                      }

                    </Row>
                  </td>
                  <td>
                    <Item
                      {...restField}
                      name={[name, 'actionType']}
                      fieldKey={[fieldKey, 'actionType']}
                      rules={[{ required: true, message: '请选择' }]}
                    >
                      <Select
                        laceholder='请选择'
                        disabled={!current?.affectType || taskState === 'finish'}
                      >
                        {
                          actionTypeList.map((item) =>
                            <Option key={item.code}>{item.name}</Option>
                          )
                        }
                      </Select>
                    </Item>
                  </td>
                  <td>
                    <Item
                      {...restField}
                      name={[name, 'riskLevel']}
                      fieldKey={[fieldKey, 'riskLevel']}
                      rules={[{ required: true, message: '请选择' }]}
                    >
                      <Select
                        disabled={!current?.affectType || taskState === 'finish'}
                      >
                        {
                          nodeLeveelList.map((item) =>
                            <Option key={item.code}>{item.name}</Option>
                          )
                        }
                      </Select>
                    </Item>
                  </td>
                  <td>
                    <Item
                      {...restField}
                      name={[name, 'rectifySuggest']}
                      fieldKey={[fieldKey, 'rectifySuggest']}
                      rules={[{ required: true, message: '请选择' }]}
                    >
                      <Input.TextArea placeholder='请输入' disabled={!current?.affectType || taskState === 'finish'} autoComplete='off' />
                    </Item>
                  </td>
                  {/* <td style={{ paddingTop: 0 }}>
                          <Space>
                              {
                                  fields.length > 1 &&
                                  <MinusCircleOutlined onClick={() => { remove(name) }} />
                              }
                              {
                                  <PlusCircleOutlined onClick={() => {
                                      add();
                                      let data = form.getFieldValue();
                                      let length = data.assessInfo.length ;
                                      let source = data.assessInfo[index];
                                      let copy = data.assessInfo[length - 1] = {};
                                      debugger
                                      data.assessInfo = [...data.assessInfo.slice(0,index + 1) , copy , ...data.assessInfo.slice(index + 1 , length - 1)]
                                      copy.nodeName = source.nodeName;
                                      copy.planRectifyTime = source.planRectifyTime;
                                      // if(copyData.planRectifyTime){
                                      //     data.assessInfo[index + 1].planRectifyTime = copyData.planRectifyTime;
                                      // }
                                      form.setFieldsValue(data);
                                  }} />
                              }
                          </Space>
                      </td> */}
                </tr>
              )
            )
          })}
        </>
      )}
    </Form.List>
  </tbody>
</table>

css
  .stencil - table {
  .ant - col - 18 {
    max - width: 95 %;
  }
  .ant - row {
    .ant - col {
      .ant - row {
        max - width: 100 %;
      }
    }
  }
  width: 100 %;

  > tbody {
    > tr {
      border: 1px solid #f0f0f0;
      border - top: none;

      &:hover {
        background: #fafafa;
      }

      > th {
        text - align: left;
        background: #fafafa;
        padding: 16px;
        background: 0.3s ease;
      }

      > td {
        padding - top: 25px;
        .ant - row {
          .ant - col - 18 {
            max - width: 95 % !important;
          }
        }
      }
    }
  }
}

手写复制功能函数

import { message } from 'antd';

function copy(html) {
  let div = document.createElement('div');
  div.innerHTML = html;
  document.body.appendChild(div);
  div.className = 'copy';
  if (document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(div);
    range.select();
  } else if (window.getSelection) {
    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(div);
    selection.removeAllRanges();
    selection.addRange(range);
  }
  document.execCommand('Copy');
  div.remove();
  message.success('复制成功');
}

export default copy;

下拉框同条数据选择之后显示为不可点击

{
  title: '模型字段名称',
    dataIndex: 'mappingCode',
      key: 'mappingCode',
        width: 250,
          render: (text, record, index) =>
            <Select
              optionLabelProp="label"
              allowClear
              value={record.mappingCode}
              onChange={(key) => {
                let block = {
                  fieldCode: record.fieldCode,
                  mappingCode: key
                };
                record.mappingCode = key;
                let _processSelectJson = processSelectJson;
                if (key) {
                  _processSelectJson[index] = block;
                } else {
                  _processSelectJson[index] = null;
                }
                this.setState({ processSelectJson: _processSelectJson });
              }
              }
            >
              {
                processFiledsList?.map((i) =>
                  <Option key={i.key} label={i.value} disabled={processSelectJson?.find(item => item?.mappingCode === i.key)}>
                    <div className="demo-option-label-item">
                      {i.require && <StarTwoTone role="img" twoToneColor="#ffec3d" style={{ marginRight: 8 }} />}
                      {i.value}
                    </div>
                  </Option>
                )
              }
            </Select>
},

modal用自身button

const handleOk = async () => {
    const values = await form.validateFields();
    if (values) {
        ...
    }
};

数组子集位置互换

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[1] = fruits.splice(2,1,"Orange")[0] 
splice(起始位置， 删除的个数，插入的个数) 返回值为删除的数
将Apple删除替换成Orange返回的是删除的数Apple 此时第二个位置再次设置为Apple完成换位置


up
function upGo(fieldData,index){
    if(index!=0){
        fieldData[index] = fieldData.splice(index-1, 1, fieldData[index])[0];
    }else{
        fieldData.push(fieldData.shift());
    }
}

down
function downGo(fieldData,index) {
    if(index!=fieldData.length-1){
        fieldData[index] = fieldData.splice(index+1, 1, fieldData[index])[0];
    }else{
        fieldData.unshift( fieldData.splice(index,1)[0]);
    }
}

input无过期记录提示

autoComplete='off'

removeEventListener监听路由变化 渲染面包屑

class AppLayout extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      breadcrumb: null,
    };
  }
  componentDidMount() {
    this.handleBreadcrumb();
    window.addEventListener('hashchange', this.handleBreadcrumb);
  }

  componentWillUnmount() {
    window.removeEventListener('hashchange', this.handleBreadcrumb);
  }

  handleBreadcrumb = () => {
    this.setState({
      breadcrumb: this.navigator(),
    })
  }

  navigator = () => {
    let navs = [];
    let isSubset = false;
    routes.find(key => {
      if (key.path === location?.hash?.slice(1)) {
        navs = typeof (key.navs) === 'object' ? key.navs : []
        isSubset = key.isSubset ? true : false;
      }
    })
    navs = navs?.map(item => {
      let [title, link] = item.split('||')
      return { title, link }
    })
    return (
      isSubset ? <SubNav title={navs[0].title} link={navs[0].link} /> :
        <Breadcrumb style={{ padding: `${navs.length > 0 ? "12px 0" : ''}` }}>
          {navs?.map((item, i) =>
            <Breadcrumb.Item key={i}>
              {item.link ? <a href={item.link}>{item.title}</a> : item.title}
            </Breadcrumb.Item>)
          }
        </Breadcrumb>
    )
  }

  render() {
    const { breadcrumb } = this.state;
    return (
      <Content>
        {breadcrumb}
      </Content>
    );
  }
}
avatar
文章
阅读
粉丝