---
tags: React
---

# ChatX_Web [UI] 新增、編輯社群平台

## 1. 項目簡介

* clone 專案至本機
`git clone http://192.168.1.136/IQ-Channel/ChatX_Web.git`

* 建立自己的開發分支
`git branch robin`

* 開發工作於自己的分支進行
`git checkout robin`

* 完成後發 push 遠端，並發 merge request 到 master，群組內通知 lian
`git push origin robin`

* 要測試一些實驗性方法可以建立其他分支，但不要 push 到 remote


## 2. 實作流程

### 新增Web平台

==components/Sysconfig/Platformdialog==

export default class Platformdialog extends Component {
  constructor(props) {
    super(props)
    this.filechange = this.filechange.bind(this)
    this.submithandle = this.submithandle.bind(this)
    //紀錄新增平台中，目前所選擇的平台
    this.selectplatformhandle = this.selectplatformhandle.bind(this)
    //紀錄新增平台中，身分識別模式是否開啟
    this.selectidcheckhandle = this.selectidcheckhandle.bind(this)

    //紀錄目前狀態
    this.state = {
      platformvalue: '',
      idcheckvalue: ''
    }
  }
  
  componentDidMount() {
    const { data } = this.props
    this.ename.value = data.typename || "PlatformLINE"
    //平台ID預設為小於15位英數字夾雜的亂數
    this.platformid.value = data.platformid || Math.random().toString(36).substring(2, 15)
    this.platformname.value = data.platformname || null
  }
  
  submithandle(e) {
    const { submit, data, onClose } = this.props
    {
      this.ename.value == "PlatformWeb" ? (this.mode.value == "1" ? submit({ ...data, typename: this.ename.value, platformid: this.platformid.value, platformname: this.platformname.value, attachment: data.attachment, mode: this.mode.value, inspectiontype: this.inspectiontype.value })
        : submit({ ...data, typename: this.ename.value, platformid: this.platformid.value, platformname: this.platformname.value, attachment: data.attachment, mode: this.mode.value })) 
        : submit({ ...data, typename: this.ename.value, platformid: this.platformid.value, platformname: this.platformname.value, attachment: data.attachment })
    }
    onClose(e)
  }
  
  selectplatformhandle(e) {
    this.setState({
      platformvalue: e.target.value
    })
  }
  
  selectidcheckhandle(e) {
    this.setState({
      idcheckvalue: e.target.value
    })
  }

  render() {
    let uuidv4id = uuidv4()
    //alter是代表是否點擊編輯平台、mode代表是否開啟身分識別模式、inspectiontype代表手機登入or身分證登入
    const { onClose, data, device, alter, mode, inspectiontype } = this.props
    return (
      <div className={device == "mobile" ? "f-col platformdialog f-sk0" : "f-row platformdialog f-sk0"}>
        <Avatar
          uuid={data.attachment}

          Img={appsbutton}
          Icon={
            <label htmlFor={uuidv4id}>
              <img className="gbcfff05 csp" src={img} alt="" />
              <input className="hidden" type='file' accept="image/*" id={uuidv4id} ref={el => this.file = el} onChange={this.filechange} />
            </label>

          }
          defaultimg={!data.attachment}
        />

        <div className="f-col f1">
          <div className="f-row aic"><span>顯示名稱</span><input className="input-o f1" type="text" placeholder="顯示名稱" ref={el => this.platformname = el} /></div>
          <div>
            <span>平台類型</span>
            //新增onChange去紀錄目前選到的platform
            <select disabled={!!data.typename} ref={el => this.ename = el} onChange={this.selectplatformhandle}>
              <option value="PlatformLINE">LINE</option>
              <option value="PlatformMessenger">Messenger</option>
              <option value="PlatformWeb">Web</option>
            </select>
          </div>
          <div className="f-row aic">
            <span >平台ID</span><input disabled={true} className="input-o f1" type="text" placeholder="平台ID" ref={el => this.platformid = el} />
          </div>
          /*如果目前選到的platform是web才會顯示*/
          {this.state.platformvalue === "PlatformWeb" && <div className="f-row aic">
            <span>身分識別模式</span>
            <select disabled={!!data.mode} onChange={this.selectidcheckhandle} ref={el => this.mode = el}>
              <option value="0">關閉</option>
              <option value="1">ID 登錄</option>
            </select>
          </div>}
          /*如果身分識別模式選擇ID登陸，則會顯示*/
          {this.state.idcheckvalue === "1" && <div className="f-row aic">
            <span>ID 格式檢查</span>
            <select disabled={!!data.inspectiontype} ref={el => this.inspectiontype = el}>
              <option value="1">手機號碼</option>
              <option value="2">身分證字號</option>
            </select>
          </div>}
          //如果點選編輯平台，才會顯示這裡
          {alter === true && (data.typename == "PlatformWeb") && <div className="f-row aic">
            <span>身分識別模式</span>
            <select disabled={true} value={mode}>
              <option value="0">關閉</option>
              <option value="1">ID 登錄</option>
            </select>
          </div>}
          //如果點選編輯平台，並且身分識別模式點選ID登陸，才會顯示這裡
          {alter === true && (data.typename == "PlatformWeb") && (mode == "1") && <div className="f-row aic">
            <span>ID 格式檢查</span><select disabled={true} value={inspectiontype}>
              <option value="1">手機號碼</option>
              <option value="2">身分證字號</option>
            </select>

        </div>

      </div>
    )
  }
}

==/components/Sysconfig/Platform==
在手機板以及電腦版的編輯社群平台，多了alter、mode、inspectiontype這三個參數

<LightBox
    opencomponent={<FaPencil onClick={() => onclick(data)}></FaPencil>}
    title={`編輯社群平台 `}
>
    //alter=true 代表是點選編輯平台    mode是該平台使否有開啟身分識別模式    inspectiontype是該平台是手機登錄or身分證登錄
    <Platformdialog submit={submit} alter={true} mode = {data.mode} inspectiontype = {data.inspectiontype}></Platformdialog>
</LightBox>

==/components/utils/switchicon==
新增Web平台的圖片

import Web from '../../img/Web.png'
export default (platformtype) => {
  switch (platformtype) {
    case "PlatformLINE":
      return (<img className="icon" src={Line} alt="Line" />)
    case "PlatformMessenger":
      return (<img className="icon" src={message} alt="MESSAGE" />)
    //新增Web平台的圖片
    case "PlatformWeb":
      return (<img className="icon" src={Web} alt="Web" />)
  }
}

==/components/utils/switchplatform==

export default (platformtype) => {
  switch (platformtype) {
    case "PlatformLINE":
      return "Line"
    case "PlatformMessenger":
      return "Messenger"
    //新增Web平台
    case "PlatformWeb":
      return "Web"
  }
}

## 成果畫面



Web icon的來源網址: [link](https://www.flaticon.com/free-icon/language_1246334#term=web&page=1&position=33)