BorderGateway/code/web/client/src/sections/edition/components/addModel.jsx

'use strict';
import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import { Popconfirm, Button, Popover, Skeleton, Form, Tag, Modal, Collapse, Input } from '@douyinfe/semi-ui';
import { IconSearch, IconHelpCircle, IconAlertCircle, IconMinusCircle, IconPlusCircle, IconPlus, IconRefresh } from '@douyinfe/semi-icons';
import { SkeletonScreen } from "$components";

const AddModel = props => {
   const { dispatch, user, error, actions, close, dataToModal, editionData, cancel } = props
   const { edition } = actions
   const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
   const [limits, setLimits] = useState()//每页实际条数
   const [detailV, setDetailV] = useState(false)
   const [property, setProperty] = useState([{ key: 'hb', value: 'ture' }])
   const [attributeValue, setattributeValue] = useState({})
   const api = useRef()

   useEffect(() => {
      if (dataToModal?.properties) {
         let data = []
         for (let k in dataToModal?.properties) {
            data.push({ key: k, value: dataToModal?.properties[k] })
         }
         setProperty(data)
      }
   }, [])

   useEffect(() => {
      let data = {}
      property?.map(v => {
         if (v.key) {
            data[v.key] = v.value
         }
      })
      setattributeValue(data)
   }, [property])

   return (
      <>
         <Modal
            title={dataToModal?.id ? '修改网关' : '新增网关'}
            // okText={okText}
            visible={true}
            onOk={() => {
               api.current.validate().then(r => {
                  // console.log(r);
                  r.properties = JSON.stringify(attributeValue)
                  if (dataToModal?.id) {
                     dispatch(edition.putedge(dataToModal?.id, r)).then(res => {
                        console.log(res)
                        if (res.success) {
                           close()
                        }
                     })
                  } else {
                     dispatch(edition.postedge(r)).then(res => {
                        // console.log(res);
                        if (res.success) {
                           close()
                        }
                     })
                  }

               })
            }}
            width={500}
            onCancel={() => cancel()}
         >
            <Form
               getFormApi={(formApi) => (api.current = formApi)}
               layout="horizontal"
               labelAlign="right"
               labelWidth="114px"
               style={{ display: 'flex', flexDirection: 'column' }}
            >
               <Form.Input
                  field='serialNo'
                  label='设备序列号:'
                  labelPosition="left"
                  hideButtons={true}
                  placeholder='请输入设备序列号'
                  style={{ width: 240, marginBottom: 12 }}
                  initValue={dataToModal?.serialNo || ''}
                  disabled={dataToModal?.id ? true : false}
                  rules={[{ required: true, message: "请输入设备序列号" }, { pattern: "^[a-zA-Z0-9]{4,20}$", message: "必须4~20位数字或字母" },]}
               />
               <Form.Input
                  field='name'
                  label='设备名称:'
                  labelPosition="left"
                  hideButtons={true}
                  placeholder='请输入设备名称'
                  style={{ width: 240, marginBottom: 12 }}
                  initValue={dataToModal?.name || ''}
                  rules={[{ required: true, message: "请输入设备名称" }]}
               />
               {/* <Form.Input
                  field='properties'
                  label='设备属性:'
                  labelPosition="left"
                  hideButtons={true}
                  placeholder='请输入设备属性'
                  style={{ width: 240, marginBottom: 12 }}
                  initValue={JSON.stringify(dataToModal?.properties) || ''}
               // rules={[{ required: true, message: "请输入设备属性" }, { pattern: "^[0-9]+$", message: "只能输入数字" },]}
               /> */}
               <Form.Input
                  field='hardwareName' label='硬件信息:'
                  labelPosition="left"
                  hideButtons={true}
                  placeholder='请输入硬件信息'
                  style={{ width: 240, marginBottom: 12 }}
                  initValue={dataToModal?.hardwareName || ''}
               // rules={[{ required: true, message: "请输入硬件信息" }, { pattern: "^[0-9]+$", message: "只能输入数字" },]}
               />
               <Form.Select
                  field="softwareVer"
                  label='软件信息:'
                  labelPosition="left"
                  placeholder='请选择软件版本'
                  style={{ width: 240, marginBottom: 12 }}
                  initValue={dataToModal?.softwareVer || ''}
               // rules={[{ required: true, message: "请选择软件版本" }]}
               >
                  {editionData?.map((v, i) => <Form.Select.Option key={'softwareVer' + i} value={v}>{v}</Form.Select.Option>)}
               </Form.Select>

               <div style={{ display: 'flex', marginBottom: 12 }}>
                  <div style={{ width: 114, height: 44, padding: '6px 16px 6px 0', textIndent: 38, fontWeight: 600, color: 'var(--semi-color-text-0)', fontSize: 14 }}>设备属性:</div>
                  <Collapse style={{ width: 270, background: 'var(--semi-color-fill-0)' }}>
                     <Collapse.Panel header={<div style={{ width: 260, whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{JSON.stringify(attributeValue)}</div>} itemKey="1">
                        <div style={{ background: 'white', paddingBottom: 10, position: 'relative' }}>
                           <div style={{ display: 'flex', marginBottom: 10 }}>
                              <div style={{ width: 104, fontWeight: 600, marginLeft: 6 }}>key:</div>
                              <div style={{ width: 94, fontWeight: 600, }}>value:</div>
                           </div>
                           {property?.map((v, i) =>
                              <div key={'properties' + i} style={{ marginBottom: 10 }}>
                                 <Input value={v.key} style={{ width: 90, marginLeft: 6 }}
                                    onChange={e => {
                                       console.log(e);
                                       property?.splice(i, 1, { key: e, value: v.value })
                                       setProperty([...property])
                                    }}
                                 /> --
                                 <Input value={v.value} style={{ width: 90 }}
                                    onChange={e => {
                                       property?.splice(i, 1, { key: v.key, value: e })
                                       setProperty([...property])
                                    }}
                                 />
                                 {property?.length > 1 ? <IconMinusCircle onClick={() => {
                                    console.log(i);
                                    console.log(property);
                                    property?.splice(i, 1)
                                    setProperty([...property])
                                 }} /> : ""}
                              </div>)}
                           <IconPlusCircle style={{ position: 'absolute', bottom: 0, right: 0 }}
                              onClick={() => {
                                 setProperty([...property, { key: '', value: '' }])
                              }}
                           />
                        </div>

                     </Collapse.Panel>
                  </Collapse>
               </div>
            </Form>
         </Modal>
      </>

   );
}

function mapStateToProps (state) {
   const { auth, global } = state;
   return {
      user: auth.user,
      error: auth.error,
      actions: global.actions,
      apiRoot: global.apiRoot,
      isRequesting: auth.isRequesting
   }
}

export default connect(mapStateToProps)(AddModel);