NEZ-2153 feat: Task issue 详情页面开发(草稿版)

nezha-fronted/src/components/common/bottomBox/bottomBox.vue

@@ -66,6 +66,8 @@
         <record-rule-eval-log v-if="from === fromRoute.recordRule && targetTab === 'recordRule'" :from="from" :obj="obj" :tabs="tabs.recordRule" @changeTab="changeTab" :targetTab.sync="targetTab"></record-rule-eval-log>
         <!--alertRule Tab-->
         <alertMessageTabNew v-if="from === fromRoute.alertSilence && targetTab === 'alertMessageTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertSilence" @changeTab="changeTab" :targetTab.sync="targetTab"></alertMessageTabNew>
+        <!--issue Tab-->
+        <issueTab v-if="from === fromRoute.issue && targetTab === 'issue'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.alertSilence" @changeTab="changeTab" :targetTab.sync="targetTab"></issueTab>
       </div>
     </div>
   </div>
@@ -75,6 +77,7 @@
 import cabinetTab from './tabs/cabinetTab'
 import alertMessageTab from './tabs/alertMessageTab'
 import alertMessageTabNew from './tabs/alertMessageTabNew'
+import issueTab from './tabs/issueTab'
 import alertRuleEvalLog from './tabs/alertRuleEvalLog'
 import assetSubTab from './tabs/assetSubTab'
 import endpointQuery from './tabs/endpointQuery'
@@ -114,7 +117,8 @@ export default {
     assetSubTab,
     alertRuleEvalLog,
     IpDetails,
-    recordRuleEvalLog
+    recordRuleEvalLog,
+    issueTab
   },
   props: {
     isFullScreen: Boolean, // 是否全屏
@@ -266,6 +270,9 @@ export default {
         ],
         alertSilence: [
           { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true }
+        ],
+        issue: [
+          { prop: 'issue', name: this.$t('overall.issue'), active: true }
         ]
       }
     }

nezha-fronted/src/components/common/bottomBox/tabs/issueTab.vue

@@ -0,0 +1,405 @@
+<template>
+  <div>
+ <el-container>
+  <el-container>
+    <el-header >
+        <span>this is a title</span>
+        <div>
+            <ul id="menu">
+                <li>
+                    <i class="nz-icon nz-icon-label"></i>
+                    <div>
+                        <span>{{ this.issuedetailsData.type }}</span>
+                        <span class="describe">Type</span>
+                    </div>
+                </li>
+                  <li>
+                    <i class="nz-icon nz-icon-label"></i>
+                    <div>
+                        <span>{{ priorityEnums(issuedetailsData.priority) }}</span>
+                        <span class="describe">Priority</span>
+                    </div>
+                </li>
+                  <li>
+                    <i class="nz-icon nz-icon-label"></i>
+                    <div>
+                        <span>{{ stateEnums(this.issuedetailsData.state) }}</span>
+                        <span class="describe">state</span>
+                    </div>
+                </li>
+                  <li>
+                    <i class="nz-icon nz-icon-user"></i>
+                    <div>
+                        <span>{{ this.issuedetailsData.reporter.username }}</span>
+                        <span class="describe" >Reporter</span>
+                    </div>
+                </li>
+                  <li>
+                    <i class="nz-icon nz-icon-user"></i>
+                    <div>
+                        <span>{{ this.issuedetailsData.assignee.username }}</span>
+                        <span class="describe">Assignee</span>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </el-header>
+    <el-main>
+           <div>
+            <span class="description" >
+                <i class="nz-icon nz-icon-arrow-right fold" v-if="foldShow" @click="foldFun"></i>
+                <i class="nz-icon nz-icon-arrow-down  open" v-if="openShow" @click="openFun"></i>
+            </span>
+            <span class="description-title">Description</span>
+            <div class="description-content"  v-if="openShow" v-html="this.contents">
+            </div>
+           </div>
+              <div class="relate-assets-box">
+            <span class="relate-assets" >
+                <i class="nz-icon nz-icon-arrow-right fold" v-if="assetsfoldShow" @click="assetsfoldFun"></i>
+                <i class="nz-icon nz-icon-arrow-down  open" v-if="assetsopenShow" @click="assetsopenFun"></i>
+            </span>
+            <span class="relate-assets-title">Relate-assets</span>
+            <div class="relate-assets-content"  v-if="assetsopenShow "  >
+                 <div v-for="(item, index) in this.assets" :key="index"  >{{item.name}}</div>
+            </div>
+           </div>
+    </el-main>
+    <!-- <el-footer>Footer</el-footer> -->
+  </el-container>
+    <el-aside width="400px" class="aside-box">
+        <span>动态</span>
+        <template>
+                <el-tabs v-model="activeName" @tab-click="handleClick">
+                    <el-tab-pane label="全部" name="first">
+                        <div class="change ">
+                            <i class="nz-icon nz-icon-edit"></i>
+                            <span>老王 Created issue {{this.time}}</span>
+                             <!-- <div v-for="(item, index) in changeData" :key="index" v-html="item.content" ></div> -->
+                        </div>
+                        <div class="content first-content">
+                               <i class="nz-icon nz-icon-edit"></i>
+                            <span>老王 Add comment {{this.time}}</span>
+                               <div class="content-data" v-for="(item, index) in contentData" :key="index" v-html="item.content" ></div>
+                        </div>
+                    </el-tab-pane>
+                    <el-tab-pane label="评论" name="content">
+                        <div class="content">
+                               <i class="nz-icon nz-icon-edit"></i>
+                            <span>老王 Add comment {{this.time}}</span>
+                            <div class="content-data" v-for="(item, index) in contentData" :key="index" v-html="item.content" ></div>
+                        </div>
+                    </el-tab-pane>
+                    <el-tab-pane label="变更记录" name="change">
+                        <div class="change">
+                            <i class="nz-icon nz-icon-edit"></i>
+                            <span>老王 Created issue {{this.time}}</span>
+                            <!-- <div  v-html="this.changeData" ></div> -->
+                        </div>
+                    </el-tab-pane>
+                </el-tabs>
+        </template>
+         <el-footer class="footer-box">
+            <div class="add-comment-btn">
+            <el-button type="text" v-if="addcommentShow"  @click="addcommentBtn">Add comment</el-button>
+
+             <div v-if="textareaShow" class="textareas">
+                <el-input
+                type="textarea"
+                :autosize="{ minRows: 2, maxRows: 4}"
+                placeholder="多行输入"
+                v-model="textarea">
+                </el-input>
+               <div class="btn-box">
+                 <el-button size="mini" @click="addFun">Add</el-button>
+                <el-button size="mini" @click="cancelBtn">Cancel</el-button>
+               </div>
+             </div>
+        </div>
+        </el-footer>
+    </el-aside>
+</el-container>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'issueTab',
+  data () {
+    return {
+      url: '/issue',
+      activeName: 'first',
+      textareaShow: false, // 底部输入框显示状态
+      addcommentShow: true, // 底部按钮显示状态
+      openShow: false, // 展开折叠图标显示状态
+      foldShow: true, // 展开折叠图标显示状态
+      assetsopenShow: false, // 展开折叠图标显示状态
+      assetsfoldShow: true, // 展开折叠图标显示状态
+      textarea: '', // 底部输入框内容
+      issuedetailsData: [], // issue详情data
+      changeData: [], // 变更data
+      contentData: [], // 评论data
+      assets: [],
+      contents: [],
+      time: '',
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      }
+    }
+  },
+  created () {
+    this.axiosss()
+  },
+  methods: {
+    handleNodeClick (data) {
+      console.log(data)
+    },
+    handleClick (tab, event) {
+      console.log(tab, event)
+    },
+    addcommentBtn () {
+      this.textareaShow = true
+      this.addcommentShow = false
+    },
+    cancelBtn () {
+      this.textareaShow = false
+      this.addcommentShow = true
+    },
+    // 处理后台返回的html特殊标签   ----已经弃用 之前有插件处理
+    delHtmlTag (str) {
+      return str.replace(/<[^>]+>/g, '').replace(/&nbsp;/ig, '')
+    },
+    addFun () {
+      const params = {
+        issueId: 1,
+        content: this.textarea
+      }
+      this.$post('/issue/activity', params).then(response => { // 问题动态 新增
+        if (response.code === 200) {
+        //   console.log(response, 1)
+          this.axiosss()
+        }
+      })
+    },
+    axiosss () {
+      this.$get(`${this.url}/${1}`).then(response => { // issue详情接口
+        if (response.code === 200) {
+          this.issuedetailsData = response.data
+          this.contents = this.issuedetailsData.content
+          this.assets = this.issuedetailsData.assets
+          //   console.log(this.issuedetailsData, 3)
+        }
+      })
+      this.$get(`${this.url}/activity?issueId=1&type=1&pageSize=-1`).then(response => { // issue动态详情接口-变更记录
+        if (response.code === 200) {
+          this.changeData = response.data.list
+          this.time = response.time
+          console.log(response.time)
+        //   console.log(this.changeData, 1)
+        //   console.log(response.data, 2)
+        }
+      })
+      this.$get(`${this.url}/activity?issueId=1&type=2&pageSize=-1`).then(response => { // issue动态详情接口-评论
+        if (response.code === 200) {
+          this.contentData = response.data.list
+        //   console.log(this.contentData, 2)
+        }
+      })
+    },
+    // priority 枚举转换
+    priorityEnums (data) {
+      if (data == 1) {
+        data = '高'
+      } else if (data == 2) {
+        data = '中'
+      } else {
+        data = '低'
+      }
+      return data
+    },
+    // state 枚举转换
+    stateEnums (data) {
+      if (data == 1) {
+        data = '打开'
+      } else if (data == 2) {
+        data = '已指派'
+      } else if (data == 3) {
+        data = '处理中'
+      } else if (data == 4) {
+        data = '挂起'
+      } else if (data == 5) {
+        data = '已解决'
+      } else if (data == 6) {
+        data = '关闭'
+      } else if (data == 7) {
+        data = '取消'
+      }
+      return data
+    },
+    foldFun () {
+      this.openShow = true
+      this.foldShow = false
+    },
+    openFun () {
+      this.openShow = false
+      this.foldShow = true
+    },
+    assetsfoldFun () {
+      this.assetsopenShow = true
+      this.assetsfoldShow = false
+    },
+    assetsopenFun () {
+      this.assetsopenShow = false
+      this.assetsfoldShow = true
+    }
+  }
+}
+</script>
+
+<style>
+ #menu {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap;
+ }
+ #menu li {
+  display: flex;
+  flex-wrap: wrap;
+  width: 200px;
+  height: 80px;
+  margin-top: 40px;
+  position: relative;
+ }
+ #menu li i{
+    font-size: 40px;
+    margin-right: 10px;
+ }
+ #menu li .describe {
+    position: absolute;
+    bottom: 40px;
+    right: 100px;
+    width: 50px;
+    /* color: $--color-text-regular; */
+ }
+  #menu li i,div{
+  line-height: 100%;
+ }
+ .theme-light  .el-header{
+    height: 150px !important;
+    padding: 20px !important;
+  }
+
+  .theme-light  .el-aside {
+    height: 630px !important;
+     padding: 20px !important;
+  }
+
+ .theme-light  .el-main {
+    height: 480px !important;
+     padding: 20px !important;
+  }
+  body > .el-container {
+    margin-bottom: 40px;
+  }
+
+  .el-container:nth-child(5) .el-aside,
+  .el-container:nth-child(6) .el-aside {
+    line-height: 260px;
+  }
+
+  .el-container:nth-child(7) .el-aside {
+    line-height: 320px;
+  }
+  .el-tabs {
+    margin-top: 20px !important;
+  }
+  .footer-box{
+    position: relative;
+    height: 130px !important;
+  }
+  .add-comment-btn{
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    /* border: rgba(180, 176, 176, 0.847) 1px solid; */
+    width: 395px;
+    height: 40px;
+    line-height: 100%;
+  }
+.theme-light .el-button--text{
+    margin-left: 15px !important;
+  }
+  .textareas{
+    width: 395px;
+    position: absolute;
+    bottom: 50px;
+    left: 0px;
+  }
+  .btn-box{
+    position: absolute;
+    /* bottom: -40px; */
+    right: 45px;
+  }
+  .description{
+    position: relative;
+    line-height: 100%;
+  }
+ .description i {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    cursor:pointer;/*鼠标变小手*/
+    border: 1px solid;
+}
+.description-title {
+    margin-left: 20px;
+}
+.description-content {
+    margin-left: 20px;
+    margin-top: 12px;
+    white-space:pre-wrap;
+}
+.relate-assets-box {
+    margin-top: 20px;
+}
+.relate-assets{
+     position: relative;
+    line-height: 100%;
+}
+.relate-assets i {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    cursor:pointer;/*鼠标变小手*/
+    border: 1px solid;
+}
+.relate-assets-title {
+    margin-left: 20px;
+}
+.relate-assets-content {
+    margin-left: 20px;
+    margin-top: 12px;
+}
+.relate-assets-content div{
+    margin-top: 12px;
+}
+.content-data{
+    margin-top: 10px;
+    margin-left: 20px;
+}
+.first-content{
+    border-bottom: 1px solid;
+    border-top: 1px solid;
+    margin-top: 20px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+.ql-container.ql-snow{
+    border: 0 !important;
+}
+.theme-light .el-textarea{
+    width: 350px !important;
+}
+</style>

nezha-fronted/src/components/common/table/settings/issueTable.vue

@@ -95,7 +95,7 @@
         {{ $t("overall.option") }}
       </div>
       <div slot-scope="scope" class="table-operation-items">
-        <button class="table-operation-item" @click="showBottomBox('recordRule', scope.row)" :title="$t('overall.view')"><i class="nz-icon nz-icon-view1"></i></button>
+        <button class="table-operation-item" @click="showBottomBox('issue', scope.row)" :title="$t('overall.view')"><i class="nz-icon nz-icon-view1"></i></button>
         <el-dropdown size="medium" v-has="['record_rule_edit','record_rule_delete']" trigger="click" @command="tableOperation">
           <div class="table-operation-item table-operation-item--more" :title="$t('overall.moreOperations')">
             <i class="nz-icon nz-icon-more3"></i>