thoth-frontend-test/src/views/Platform/bugManage/bugQuery.vue

<template>
  <div class="set-background">
    <el-form :model="form">
      <div class="block">
        <h3 style="margin:0 0 30px 0">标题 :&nbsp;&nbsp;&nbsp;{{ form.bugName }}</h3>
        <div style="display:flex;margin-bottom:10px">
          <el-form-item label="级别 : " prop="priority" style="display:flex;" label-width="48px">
            <el-select v-model="form.priority" placeholder="级别" style="width:80%;" @change="priorityChange">
              <el-option v-for="item in bugLevelStr" :key="item.name" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态 : " prop="status" style="display:flex;" label-width="48px">
            <el-select v-model="form.status" placeholder="状态" style="width:80%;" @change="statusChange">
              <el-option v-for="item in bugStatusStr" :key="item.name" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
          <el-button type="primary" style="height:40px" @click="enterUpdate">编 辑</el-button>
        </div>
        <div class="display-messege">
          <span style="white-space:nowrap">描述 :&nbsp;&nbsp;&nbsp;</span><div id="specialP" class="add-border" v-html="form.bugDescribe" />
        </div>
        <div class="display-messege">
          <div class="divide-threeparts">任务 :&nbsp;&nbsp;&nbsp;{{ form.taskName }}</div>
          <div class="divide-threeparts">业务线 :&nbsp;&nbsp;&nbsp;{{ bizId }}</div>
          <div class="divide-threeparts">平台类型 :&nbsp;&nbsp;&nbsp;{{ form.platformTypeName }}</div>
        </div>
        <div class="display-messege">
          <div class="divide-threeparts">类型 :&nbsp;&nbsp;&nbsp;{{ bugType }}</div>
          <div class="divide-threeparts">业务模块 :&nbsp;&nbsp;&nbsp;{{ form.clientName }}</div>
          <div class="divide-threeparts">所处阶段 :&nbsp;&nbsp;&nbsp;{{ form.stageName }}</div>
        </div>
        <div class="display-messege-end">
          <div class="divide-threeparts">发现方式 :&nbsp;&nbsp;&nbsp;{{ form.discoveryMethodName }}</div>
          <div class="divide-threeparts">问题原因 :&nbsp;&nbsp;&nbsp;{{ form.reasomName }}</div>
          <div class="divide-threeparts">工程模块 :&nbsp;&nbsp;&nbsp;{{ form.bizModuleName }}</div>
        </div>
      </div>
      <div class="block">
        <div class="display-messege">
          <div class="divide-threeparts">创建人 :&nbsp;&nbsp;&nbsp;{{ form.creatorList }}</div>
          <div class="divide-threeparts"><span>bug责任人 :</span>&nbsp;&nbsp;&nbsp;{{ form.assignerList }}</div>
          <div class="divide-threeparts"><span>当前处理人 :</span>&nbsp;&nbsp;&nbsp;{{ currentHandler }}</div>
        </div>
        <div class="display-messege">
          <div class="divide-threeparts">开始开发时间 :&nbsp;&nbsp;&nbsp;{{ form.startDevTime }}</div>
          <div class="divide-threeparts">创建时间 :&nbsp;&nbsp;&nbsp;{{ form.gmtCreate }}</div>
          <div class="divide-threeparts">提交测试时间 :&nbsp;&nbsp;&nbsp;{{ form.waitTestTime }}</div>
        </div>
        <div class="display-messege">
          <div class="divide-threeparts">是否过夜 :&nbsp;&nbsp;&nbsp;{{ form.overNigte }}</div>
          <div class="divide-threeparts">修复时间 :&nbsp;&nbsp;&nbsp;{{ form.finishTime }}</div>
          <div class="divide-threeparts">修复时长 :&nbsp;&nbsp;&nbsp;{{ form.fixTime }}</div>
        </div>
        <div class="display-messege-end">
          <div class="divide-threeparts">reopen次数 :&nbsp;&nbsp;&nbsp;{{ form.reopenTimes }}</div>
          <div class="divide-threeparts">reopen原因 :&nbsp;&nbsp;&nbsp;{{ form.reopenReason }}</div>
        </div>
      </div>
      <div class="block-end">
        <div class="display-messege">
          <div class="divide-threeparts">机型 :&nbsp;&nbsp;&nbsp;{{ form.model }}</div>
          <div class="divide-threeparts">地图类型 :&nbsp;&nbsp;&nbsp;{{ form.mapType }}</div>
          <div class="divide-threeparts">os类型 :&nbsp;&nbsp;&nbsp;{{ form.osType }}</div>
        </div>
        <div class="display-messege">
          <div class="divide-threeparts">地图版本号 :&nbsp;&nbsp;&nbsp;{{ form.mapVersion }}</div>
          <div class="divide-threeparts">网络类型 :&nbsp;&nbsp;&nbsp;{{ form.networkType }}</div>
          <div class="divide-threeparts">SDK版本 :&nbsp;&nbsp;&nbsp;{{ form.sdkVersion }}</div>
        </div>
        <div class="display-messege">
          <div class="divide-threeparts">app版本号 :&nbsp;&nbsp;&nbsp;{{ form.appVersion }}</div>
          <div class="divide-threeparts">修复结果 :&nbsp;&nbsp;&nbsp;{{ repairResult }}</div>
          <div class="divide-threeparts">修复方式 :&nbsp;&nbsp;&nbsp;{{ reasonsAndSolutionForTheProblem }}</div>
        </div>
        <div class="display-messege-end">
          <span style="white-space:nowrap">备注 :&nbsp;&nbsp;&nbsp;</span><div id="specialPAnother" class="add-border" v-html="form.remark" />
        </div>
      </div>
      <div class="block-end cla">
        <div class="display-messege">
          附件 :
          <el-upload
            ref="upload"
            class="upload-demo"
            list-type="picture-card"
            multiple
            :on-remove="handleRemove"
            :on-preview="handlePictureCardPreview"
            accept="image/jpeg, image/png, image/gif, audio/mp4, video/mp4, audio/mpeg, application/vnd.ms-excel"
            :file-list="fileList"
            action="http://star.xiaojukeji.com/upload/img.node"
            :on-success="handleChange"
          >
            <el-button slot="trigger" size="small" type="primary">上传附件</el-button>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" width="80%">
            <img width="100%" :src="dialogImageUrl" alt="图片加载失败···">
          </el-dialog>
        </div>
      </div>
    </el-form>
    <el-dialog :visible.sync="dialogInDevelopment" width="40%" @close="cancelInput()">
      <el-form ref="refeshDevelopmentDialog" :model="pauseData" :rules="serviceDataRules">
        <el-form-item label="开发RD" prop="pauseCurrentHandler" label-width="30%">
          <el-select v-model="pauseData.pauseCurrentHandler" multiple filterable placeholder="公司邮箱前缀" style="width:76%;" @visible-change="realTimeChange">
            <el-option
              v-for="item in optionsCurrentHandlerRD"
              :key="item.id"
              :label="item.name"
              :value="item.email"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogInDevelopment = false">取 消</el-button>
        <el-button type="primary" @click="queryFormData">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogWaitTest" width="40%" @close="cancelInput()">
      <el-form ref="refeshWaitTestDialog" :model="pauseData" :rules="serviceDataRules">
        <el-form-item label="验收QA" prop="pauseCurrentHandler" label-width="30%">
          <el-select v-model="pauseData.pauseCurrentHandler" multiple filterable placeholder="公司邮箱前缀" style="width:76%;" @visible-change="realTimeChange">
            <el-option
              v-for="item in optionsCurrentHandlerQA"
              :key="item.id"
              :label="item.name"
              :value="item.email"
            />
          </el-select>
        </el-form-item>
        <el-form-item style="flex-grow:1" label="问题原因" prop="reasonPause" label-width="30%">
          <el-select v-model="pauseData.reasonPause" placeholder="问题原因" style="width:76%;">
            <el-option v-for="item in reasonStr" :key="item.name" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item style="flex-grow:1" label="bug类型" prop="bugTypePause" label-width="30%">
          <el-select v-model="pauseData.bugTypePause" placeholder="bug类型" style="width:76%;">
            <el-option v-for="item in bugTypeStr" :key="item.code" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="修复方式" label-width="30%"><el-input v-model="pauseData.pauseReasonsAndSolutionForTheProblem" type="textarea" autocomplete="off" rows="3" style="width:76%;" /></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogWaitTest = false">取 消</el-button>
        <el-button type="primary" @click="queryFormDataTest">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogInRepairResult" width="40%">
      <el-form ref="refeshResultDialog" :model="pauseData" :rules="serviceDataRules">
        <el-form-item label="修复结果" prop="pauseRepairResult" label-width="30%">
          <el-select v-model="pauseData.pauseRepairResult" placeholder="修复结果" style="width:76%;">
            <el-option v-for="item in repairStr" :key="item.name" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item v-show="pauseData.pauseRepairResult === 2 || pauseData.pauseRepairResult === 5" label="原因" label-width="30%"><el-input v-model="formUpdateValue.notFixReason" type="textarea" autocomplete="off" rows="3" style="width:76%;" /></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogInRepairResult = false">取 消</el-button>
        <el-button type="primary" @click="queryFormDataRepair">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogInReopen" width="40%">
      <el-form ref="refeshReopenDialog" :model="pauseData" :rules="serviceDataRules">
        <el-form-item label="reopen原因" prop="pauseReopenReason" label-width="30%">
          <el-input v-model="pauseData.pauseReopenReason" type="textarea" autocomplete="off" rows="3" style="width:76%;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogInReopen = false">取 消</el-button>
        <el-button type="primary" @click="queryFormDataReopen">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { bugGetEnum, bugUpdate, bugGet } from '@/api/defectManage'
import { teamMembers } from '@/api/projectPage'
import axios from 'axios'

export default {
  data() {
    return {
      form: {
        id: ''
      },
      fileList: [],
      dialogInReopen: false,
      uptataKey: [],
      formUpdateValue: {},
      dialogVisible: false,
      dialogImageUrl: [],
      pauseData: {
        reasonPause: '',
        bugTypePause: '',
        pauseCurrentHandler: '',
        pauseRepairResult: '',
        pauseReasonsAndSolutionForTheProblem: '',
        pauseReopenReason: ''
      },
      serviceDataRules: {
        pauseCurrentHandler: [{ required: true, message: '处理人不能为空', trigger: 'blur' }],
        reasonPause: [{ required: true, message: '问题原因不能为空', trigger: 'change' }],
        bugTypePause: [{ required: true, message: 'bug类型不能为空', trigger: 'change' }],
        pauseRepairResult: [{ required: true, message: '修复结果不能为空', trigger: 'change' }],
        pauseReopenReason: [{ required: true, message: 'reopen原因不能为空', trigger: 'change' }]
        // pauseReasonsAndSolutionForTheProblem: [{ required: true, message: '修复方式不能为空', trigger: 'change' }]
      },
      bizId: '',
      optionsCurrentHandlerQA: [],
      optionsCurrentHandlerRD: [],
      currentHandler: '',
      formLabelWidth: '5.1%',
      twoLable: '20%',
      bugLevelStr: [],
      bugStatusStr: [],
      repairStr: [],
      repairResult: '',
      reasonsAndSolutionForTheProblem: '',
      userData: '',
      bugTypeStr: [],
      reasonStr: [],
      reason: [],
      bugType: [],
      bizIdEnumList: [],
      userInformation: localStorage.getItem('username'),
      userNames: localStorage.getItem('realname'),
      dialogInDevelopment: false,
      dialogWaitTest: false,
      dialogInRepairResult: false,
      fileDbList: []
    }
  },
  created() {
    this._initBegin()
    // this.getLocalStor()
  },
  methods: {
    handleRemove(file, fileList) {
      this.fileDbList = this.fileDbList.filter(item => {
        return item.name !== file.name
      })
      this.accessory = JSON.stringify(this.fileDbList)
      this.createFormData()
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleChange(response, file, fileList) {
      this.fileDbList.push({ 'name': file.name, 'url': 'http:' + file.response.url })
      this.accessory = JSON.stringify(this.fileDbList)
      this.$message({ showClose: true, message: '文件上传成功', type: 'success' })
      this.createFormData()
    },
    createFormData() {
      var form = {
        id: this.$route.query.id,
        accessory: this.accessory
      }
      this.userData = { id: '', ename: this.userInformation, name: this.userNames }
      this.objData = { bugBaseInfo: form, user: this.userData }
      bugUpdate(this.objData).then(res => {
        res.code === 200 ? this.successFun() : this.errorFun()
      })
    },
    // 先后获取
    async _initBegin() {
      await bugGetEnum().then(res => {
        this.bugStatusStr = res.data.bugEnumList
        this.bugLevelStr = res.data.priorityEnumList
        this.bizIdEnumList = res.data.bizIdEnumList
        this.bugTypeStr = res.data.bugTypeEnumList
        this.reasonStr = res.data.reasonEnumList
        this.repairStr = res.data.repairResultEnumList
      })
      bugGet(this.$route.query.id).then(res => {
        this.form = res.data
        this.$nextTick(() => {
          if (document.getElementById('specialP').childNodes[0])document.getElementById('specialP').childNodes[0].style.cssText = 'margin-top:0'
          if (document.getElementById('specialPAnother').childNodes[0])document.getElementById('specialPAnother').childNodes[0].style.cssText = 'margin-top:0'
        })
        this.fileList = []
        var str = res.data.accessory
        if (str !== '' && str !== null) {
          var obj = JSON.parse(str.split('{}')[0])
          for (var a of obj) {
            this.fileList.push(a)
            this.fileDbList.push(a)
          }
        }
        for (const a of this.bizIdEnumList) {
          if (this.form.bizId === a.code) {
            this.bizId = this.form.bizName
            this.currentHandler = this.form.currentHandlerList
            this.repairResult = this.form.repairResultName
            this.reason = this.form.reason
            this.bugType = this.form.bugTypeName
            this.reasonsAndSolutionForTheProblem = this.form.reasonsAndSolutionForTheProblem
            return
          } else {
            this.bizId = ''
          }
        }
      })
    },
    priorityChange() {
      this.formUpdateValue.currentHandler = this.form.currentHandler
      this.formUpdateValue.id = this.form.id
      this.formUpdateValue.priority = this.form.priority
      this.userData = { id: '', ename: this.userInformation, name: this.userNames }
      this.objData = { bugBaseInfo: this.formUpdateValue, user: this.userData }
      bugUpdate(this.objData).then(res => {
        if (res.code === 200) {
          this.successFun()
          if (this.$refs.refeshDevelopmentDialog !== undefined) {
            this.$refs.refeshDevelopmentDialog.resetFields()
          }
        } else {
          this.errorFun()
        }
        this.formUpdateValue = {}
      })
    },
    // 弹窗关闭时重置
    cancelInput() {
      this.pauseData.pauseCurrentHandler = ''
    },
    // reopen弹窗
    queryFormDataReopen() {
      this.$refs.refeshReopenDialog.validate((valid) => {
        if (valid) {
          this.formUpdateValue.currentHandler = this.form.currentHandler
          this.formUpdateValue.id = this.form.id
          this.formUpdateValue.status = this.form.status
          this.formUpdateValue.reopenReason = this.pauseData.pauseReopenReason
          this.userData = { id: '', ename: this.userInformation, name: this.userNames }
          this.objData = { bugBaseInfo: this.formUpdateValue, user: this.userData }
          bugUpdate(this.objData).then(res => {
            if (res.code === 200) {
              this.successFun()
              this._initBegin()
              if (this.$refs.refeshReopenDialog !== undefined) {
                this.$refs.refeshReopenDialog.resetFields()
              }
            } else {
              this.errorFun()
            }
          })
          this.dialogInReopen = false
          this.formUpdateValue = {}
        }
      })
    },
    statusChange(e) {
      if (e === 1) {
        this.dialogInDevelopment = true
        this.getMember() // 人员搜索
        this.pauseData.pauseCurrentHandler = this.form.assigner.split(',')
      } else if (e === 2) {
        this.dialogWaitTest = true
        this.getMember() // 人员搜索
        this.pauseData.pauseCurrentHandler = this.form.creator.split(',')
        this.pauseData.bugTypePause = this.form.bugType
      } else if (e === 3) {
        this.dialogInRepairResult = true
      } else if (e === 4) {
        this.dialogInReopen = true
      } else {
        this.formUpdateValue.currentHandler = this.form.currentHandler
        this.formUpdateValue.id = this.form.id
        this.formUpdateValue.status = this.form.status
        this.userData = { id: '', ename: this.userInformation, name: this.userNames }
        this.objData = { bugBaseInfo: this.formUpdateValue, user: this.userData }
        bugUpdate(this.objData).then(res => {
          if (res.code === 200) {
            this.successFun()
            this._initBegin()
            if (this.$refs.refeshDevelopmentDialog !== undefined) {
              this.$refs.refeshDevelopmentDialog.resetFields()
            }
          } else {
            this.errorFun()
          }
        })
        this.formUpdateValue = {}
      }
    },
    // 点击一次更新一次
    realTimeChange(e) {
      if (e === true) this.getMember()
    },
    // 人员搜索
    getMember() {
      const objDataRD = { bizId: this.form.bizId, email: '', role: 'rd' }
      const objDataQA = { bizId: this.form.bizId, email: '', role: 'qa' }
      axios.all([teamMembers(objDataRD), teamMembers(objDataQA)]).then(axios.spread((resRD, resQA) => {
        if (resRD.code === 200 && resQA.code === 200) {
          this.optionsCurrentHandlerRD = resRD.data
          this.optionsCurrentHandlerQA = resQA.data
        } else {
          this.errorFun('人员数据获取失败')
        }
      }))
    },
    queryFormData() {
      this.$refs.refeshDevelopmentDialog.validate((valid) => {
        if (valid) {
          if (this.dialogWaitTest || this.dialogInDevelopment) {
            this.form.currentHandler = this.pauseData.pauseCurrentHandler.join(',')
          }
          this.formUpdateValue.currentHandler = this.form.currentHandler
          this.formUpdateValue.id = this.form.id
          this.formUpdateValue.status = this.form.status
          this.userData = { id: '', ename: this.userInformation, name: this.userNames }
          this.objData = { bugBaseInfo: this.formUpdateValue, user: this.userData }
          bugUpdate(this.objData).then(res => {
            if (res.code === 200) {
              this.successFun()
              this._initBegin()
              if (this.$refs.refeshDevelopmentDialog !== undefined) {
                this.$refs.refeshDevelopmentDialog.resetFields()
              }
            } else {
              this.errorFun()
            }
            this.dialogInDevelopment = false
            this.formUpdateValue = {}
          })
        }
      })
    },
    queryFormDataTest() {
      this.$refs.refeshWaitTestDialog.validate((valid) => {
        if (valid) {
          if (this.dialogWaitTest || this.dialogInDevelopment) {
            this.form.currentHandler = this.pauseData.pauseCurrentHandler.join(',')
            this.form.reason = this.pauseData.reasonPause
            this.form.bugType = this.pauseData.bugTypePause
          }
          this.formUpdateValue.currentHandler = this.form.currentHandler
          this.formUpdateValue.id = this.form.id
          this.formUpdateValue.status = this.form.status
          this.formUpdateValue.reason = this.pauseData.reasonPause
          this.formUpdateValue.bugType = this.pauseData.bugTypePause
          this.formUpdateValue.reasonsAndSolutionForTheProblem = this.pauseData.pauseReasonsAndSolutionForTheProblem
          this.userData = { id: '', ename: this.userInformation, name: this.userNames }
          this.objData = { bugBaseInfo: this.formUpdateValue, user: this.userData }
          bugUpdate(this.objData).then(res => {
            if (res.code === 200) {
              this.successFun()
              this._initBegin()
              this.form.reasomName = this.reasonStr.filter(value => value.code === this.pauseData.reasonPause)[0].name
              this.bugType = this.bugTypeStr.filter(value => value.code === this.pauseData.bugTypePause)[0].name
              this.reasonsAndSolutionForTheProblem = this.form.reasonsAndSolutionForTheProblem
              if (this.$refs.refeshWaitTestDialog !== undefined) {
                this.$refs.refeshWaitTestDialog.resetFields()
              }
            } else {
              this.errorFun()
            }
            this.dialogWaitTest = false
            this.formUpdateValue = {}
          })
        }
      })
    },
    queryFormDataRepair() {
      this.$refs.refeshResultDialog.validate((valid) => {
        if (valid) {
          if (this.dialogInRepairResult) {
            this.form.repairResult = this.pauseData.pauseRepairResult
          }
          this.formUpdateValue.currentHandler = this.form.currentHandler
          this.formUpdateValue.id = this.form.id
          this.formUpdateValue.status = this.form.status
          this.formUpdateValue.repairResult = this.form.repairResult
          this.userData = { id: '', ename: this.userInformation, name: this.userNames }
          this.objData = { bugBaseInfo: this.formUpdateValue, user: this.userData }
          bugUpdate(this.objData).then(res => {
            if (res.code === 200) {
              this.successFun()
              this._initBegin()
              this.repairResult = this.form.repairResult
              if (this.$refs.refeshResultDialog !== undefined) {
                this.$refs.refeshResultDialog.resetFields()
              }
            } else {
              this.errorFun()
            }
            this.dialogInRepairResult = false
            this.formUpdateValue = {}
          })
        }
      })
    },
    enterUpdate() {
      this.$router.push({ name: '更新Bug', params: { formData: this.form }, query: { id: this.form.id }})
    },
    successFun() {
      this.$notify({ title: 'Success', message: 'Update Successfully', type: 'success', duration: 2000 })
    },
    errorFun() {
      this.$notify({ title: 'Failed', message: 'Update Failed', type: 'error', duration: 2000 })
    }
  }
}
</script>

<style>
 .cla .el-table td {
    padding:0px;
  }
</style>

<style lang="stylus" scoped>
  .set-background
    background-color #F2F3F6
    display flex
    justify-content center
    .block
      background-color rgba(255,255,255,1)
      box-shadow 0px 0px 11px 0px rgba(238,240,245,1)
      border-radius 7px
      width 82vw
      margin-top 25px
      padding 29px 50px
    .block >>> .el-form-item__content
      margin-left 0 !important
    .display-messege
      font-size 14px
      font-family PingFangSC-Regular,PingFangSC
      font-weight 400
      color rgba(51,59,74,1)
      display flex
      width 100%
      margin-bottom 40px
      .add-border
      .add-border >>> table
        border-collapse collapse
      .add-border >>> table tr td
         border solid 1px black
      .add-border >>> table tr th
         border solid 1px black
    .display-messege-end
      font-size 14px
      font-family PingFangSC-Regular,PingFangSC
      font-weight 400
      color rgba(51,59,74,1)
      display flex
      width 100%
      .add-border
      .add-border >>> table
        border-collapse collapse
      .add-border >>> table tr td
         border solid 1px black
      .add-border >>> table tr th
         border solid 1px black
    .divide-threeparts
      width 33.3%
      white-space pre-wrap
      word-wrap break-word
      padding-right 30px
      span
        white-space nowrap
    .block-end
      background-color rgba(255,255,255,1)
      box-shadow 0px 0px 11px 0px rgba(238,240,245,1)
      border-radius 7px
      width 82vw
      margin-top 25px
      padding 29px 50px
      margin-bottom 22px
      .wrap
        display flex
        flex-wrap wrap
      .wrap >>> .el-form-item__content
        width 250px
        display block
        word-break break-all
        word-wrap break-word
      // .remark-length >>> .el-form-item__content
      //   width 450px
      //   display block
      //   word-break break-all
      //   word-wrap break-word
</style>