添加我的收藏问题知识库

jero-web/src/views/documentManage/collection/components/problemKnowledgeBaseList.vue

@@ -0,0 +1,414 @@
+<template>
+  <div class="box">
+    <div class="collection-search-wrapper">
+      <div class="collection-search-header">
+        <div class="table-page-search-wrapper">
+          <a-form layout="inline" @keyup.enter.native="searchQuery">
+            <a-row :gutter="24">
+              <a-col :md="6" :sm="8">
+                <div class="box-title-text">
+                  <div class="title-text" :title="$t('title')">
+                    <span>{{$t('title')}}</span>
+                  </div>
+                  <a-input class="box-input" :placeholder="$t('PleaseEnter')+$t('title')"
+                           v-model="queryParams.title"></a-input>
+                </div>
+              </a-col>
+              <span style="float: right;overflow: hidden;margin-right: 11px"
+                    class="table-page-search-submitButtons">
+               <a-col :md="6" :sm="24">
+                  <a-button class="box-button" type="primary" @click="searchQuery">{{$t('query')}}</a-button>
+                  <a-button class="box-button" style="margin-left: 8px" @click="searchReset">{{$t('reset')}}</a-button>
+               </a-col>
+                 </span>
+            </a-row>
+          </a-form>
+        </div>
+      </div>
+    </div>
+    <div class="table-operator">
+      <div class="operator-text" @click="handleBatCancel">
+        <a-icon type="delete"/>
+        {{ $t('BatchCancel') }}
+      </div>
+    </div>
+    <div class="box-content">
+      <a-checkbox-group style="width: 100%" :defaultChecked="checkboxText"
+                        @change="checkboxTextChange" v-model="checkboxText">
+        <div v-for="item in conList" :key="item.id">
+          <div style="margin-bottom: 10px;position: relative">
+            <a-checkbox :value="item.id" class="checkbox-left"></a-checkbox>
+            <div class="text-text-right"
+                 @click="checkedClick(item)"
+                 :class="{ 'null-input':item.checked }">
+              <div class="text-header">
+                <a-tooltip placement="topLeft" overlayClassName="tooltip-index" :mouseEnterDelay="0.5">
+                  <template slot="title">
+                    <span v-html="item.title"></span>
+                  </template>
+                  <div class="text-header-text" style="cursor: pointer" v-html="item.title">
+
+                  </div>
+                </a-tooltip>
+              </div>
+              <!--                    <a-tooltip placement="topLeft" overlayClassName="tooltip-index" :mouseEnterDelay="0.5">-->
+              <!--                      <template slot="title">-->
+              <!--                        <span v-html="item.content"></span>-->
+              <!--                      </template>-->
+              <div class="text-content" v-html="item.content"
+              >
+              </div>
+              <!--                    </a-tooltip>-->
+            </div>
+            <div @click="CancelCollectionClick" class="text-text-right-text">{{$t('CancelCollection')}}</div>
+          </div>
+        </div>
+      </a-checkbox-group>
+    </div>
+    <div class="page" v-if="conList && conList.length > 0">
+      <a-pagination
+        :show-total="total => $t('total')+` ${total} `+$t('strip')"
+        show-quick-jumper
+        show-size-changer
+        :page-size.sync="pageSize"
+        :total="total"
+        :current="pageNo"
+        @change="pageOnChange"
+        @showSizeChange="SizeChange"
+      />
+    </div>
+    <JLoading :loading="loading">{{$t('dataLoading')}}</JLoading>
+  </div>
+</template>
+
+<script>
+  import { getAction, postAction, deleteAction, putAction } from '@/api/manage'
+  import { mapGetters } from 'vuex'
+
+  export default {
+    name: 'problemKnowledgeBaseList',
+    data() {
+      return {
+        conList: [],
+        total: 0,
+        pageSize: 10,
+        pageNo: 1,
+        checkboxText: [],
+        checkboxList: [],
+        loading: false,
+        queryParams: {},
+        url: {
+          getInfoList: '/problemKnowledgeBase/problemKnowledgeBaseEO/page'
+        }
+      }
+    },
+    mounted() {
+      this.getList()
+    },
+    watch: {
+      checkboxText: function(value) {
+        console.log(value)
+        this.conList.forEach(val => {
+          val.checked = false
+        })
+        if (value.length > 0) {
+          this.conList.forEach(val => {
+            value.forEach(res => {
+              if (res === val.id) {
+                val.checked = true
+              }
+            })
+          })
+        }
+        this.conList = [...this.conList]
+      }
+    },
+    methods: {
+      ...mapGetters(['userInfo']),
+      searchQuery() {
+        this.pageNo = 1
+        this.getList()
+      },
+      checkboxTextChange(value) {
+        this.checkboxText = JSON.parse(JSON.stringify(value))
+        if (this.checkboxList && this.checkboxList.length > 0) {
+          this.checkboxList.forEach(res => {
+            this.checkboxText.push(res)
+          })
+        }
+      },
+      searchReset() {
+        this.pageNo = 1
+        this.queryParams = {}
+        this.getList()
+      },
+      pageOnChange(page, pageSize) {
+        this.pageNo = page
+        this.checkboxList = JSON.parse(JSON.stringify(this.checkboxText))
+        this.getList()
+      },
+      SizeChange(page, pageSize) {
+        this.pageNo = 1
+        this.checkboxList = JSON.parse(JSON.stringify(this.checkboxText))
+        this.pageSize = pageSize
+        this.getList()
+      },
+      handleBatCancel() {
+        if (this.checkboxText && this.checkboxText.length > 0) {
+          let _this = this
+          this.$confirm({
+            content: _this.$t('BatchCancelCollection'),
+            onOk() {
+              getAction('', {}).then((res) => {
+                if (res.success) {
+                  _this.$message.success(_this.$t('OperationSuccessful'))
+                  _this.getList()
+                } else {
+                  _this.$message.warning(res.message)
+                }
+              })
+            }
+          })
+        } else {
+          this.$message.warning(this.$t('selectLeastOne'))
+        }
+      },
+      CancelCollectionClick(val) {
+        let _this = this
+        this.$confirm({
+          content: _this.$t('confirmCancelCollection'),
+          onOk() {
+            getAction('', {}).then((res) => {
+              if (res.success) {
+                _this.$message.success(_this.$t('OperationSuccessful'))
+                _this.getList()
+              } else {
+                _this.$message.warning(res.message)
+              }
+            })
+          }
+        })
+      },
+      checkedClick(item) {
+        let newUrl = this.$router.resolve({
+          path: '/problemKnowledgeBaseView',
+          query: {
+            id: item.id
+          }
+        })
+        window.open(newUrl.href, '_blank')
+      },
+      getText(str) {
+        let words = str.replace(/<[^<>]+>/g, '').replace(/&nbsp;/gi, '') //这里是去除标签
+        return words.replace(/\s/g, '') //这里是去除空格
+      },
+      getList() {
+        let query = {
+          pageNo: this.pageNo,
+          pageSize: this.pageSize,
+          createBy: this.userInfo().username,
+          ...this.queryParams
+        }
+        this.loading = true
+        getAction(this.url.getInfoList, query).then((res) => {
+          if (res.success) {
+            if (res.result.current > 1 && res.result.records.length == 0) {
+              this.pageNo = 1
+              this.getList()
+              return
+            }
+            this.conList = res.result.records
+            if (this.conList && this.conList.length > 0) {
+              this.conList.forEach(val => {
+                if (val.content) {
+                  val.contentOne = this.getText(val.content)
+                }
+              })
+            }
+            if (this.checkboxList && this.checkboxList.length > 0) {
+              let contentList = []
+              for (let j = 0; j < this.conList.length; j++) {
+                contentList.push(this.conList[j].id)
+              }
+              this.checkboxList = this.checkboxList.filter(val => {
+                return !contentList.join(',').includes(val)
+              })
+            }
+            this.checkboxText = [...this.checkboxText]
+            this.total = res.result.total
+            this.loading = false
+          } else {
+            this.conList = []
+            this.loading = false
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style>
+  .checkbox-left .ant-checkbox-inner {
+    width: 18px !important;
+    height: 18px !important;
+    line-height: 18px !important;
+  }
+
+  .tooltip-index {
+    max-width: calc(100% - 300px) !important;
+  }
+</style>
+<style lang="less" scoped>
+  @import '~@assets/less/common.less';
+
+  .box-title-text {
+    line-height: 1.4;
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  .title-text {
+    width: 43px;
+    color: #000F16;
+    display: inline-block;
+    font-weight: 500;
+    font-size: 14px;
+    margin-right: 16px;
+    margin-top: 3px;
+    text-align: right;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .box-input {
+    display: inline-block;
+    width: 100%;
+    height: 38px;
+  }
+
+  .box-button {
+    height: 38px;
+  }
+
+  .checkbox-left {
+    float: left;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .text-text-right {
+    width: calc(100% - 152px);
+    display: inline-block;
+    padding: 19px 28px;
+    box-sizing: border-box;
+    margin-left: 38px;
+    cursor: pointer;
+  }
+
+  .text-text-right-text {
+    width: 110px;
+    display: inline-block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    word-break: break-word;
+    text-align: center;
+    padding: 0 6px;
+    box-sizing: border-box;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #00B3BE;
+    cursor: pointer;
+  }
+
+  .null-input {
+    background-color: #F2F4F8;
+  }
+
+  .text-header {
+    margin-bottom: 11px;
+    width: 100%;
+
+    .text-header-text {
+      font-size: 16px;
+      font-weight: bold;
+      color: #040B29;
+      width: 100%;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      word-break: break-word;
+    }
+  }
+
+  .text-content {
+    font-size: 14px;
+    font-weight: 400;
+    color: #040B29;
+    opacity: 0.7;
+    overflow: hidden;
+    display: -webkit-box;
+    text-overflow: ellipsis;
+    /*! autoprefixer: off */
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+    /*! autoprefixer: on;*/
+    text-justify: inter-ideograph;
+    word-break: break-all
+  }
+
+  .box-content {
+    padding: 0 0 0 8px;
+    box-sizing: border-box;
+  }
+
+  .page {
+    text-align: right;
+    margin-top: 20px;
+  }
+
+  .text-operation {
+    margin-right: 8px;
+  }
+
+  .submitButtons {
+    text-align: center;
+  }
+
+  .fileText {
+    width: 100%;
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  ::v-deep p {
+    margin: 0;
+    padding: 0;
+  }
+
+  .selectText {
+    width: 100%;
+    display: inline-block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    word-break: break-word;
+  }
+
+  ::v-deep .ant-select-selection--single {
+    height: 32px !important;
+  }
+
+  ::v-deep .ant-select-selection__rendered {
+    height: 32px !important;
+    line-height: 32px !important;
+  }
+</style>

jero-web/src/views/documentManage/collection/index.vue

@@ -1,104 +1,115 @@
 <template>
   <div class="collection">
     <a-card :bordered="false">
-      <div class="collection-search-wrapper">
-        <div class="collection-search-header">
-          <div class="table-page-search-wrapper">
-            <a-form layout="inline" @keyup.enter.native="searchQuery">
-              <a-row :gutter="24">
-                <a-col :md="6" :sm="8">
-                  <div class="box-title-text">
-                    <div class="title-text" :title="$t('standard')">
-                      <span>{{$t('standard')}}</span>
-                    </div>
-                    <a-input class="box-input" :placeholder="$t('PleaseEnter')+$t('standard')"
-                             v-model="queryParams.serialNumber"></a-input>
-                  </div>
-                </a-col>
-                <a-col :md="6" :sm="8">
-                  <div class="box-title-text">
-                    <div class="title-text" :title="$t('title')">
-                      <span>{{$t('title')}}</span>
-                    </div>
-                    <a-input class="box-input" :placeholder="$t('PleaseEnter')+$t('title')"
-                             v-model="queryParams.title"></a-input>
-                  </div>
-                </a-col>
-                <a-col :md="6" :sm="8">
-                  <div class="box-title-text">
-                    <div class="title-text" :title="$t('status')">
-                      <span>{{$t('status')}}</span>
-                    </div>
-                    <j-dict-select-tag class="box-input" v-model="queryParams.state"
-                                       :placeholder="$t('PleaseSelect')+$t('status')"
-                                       :type="'select'"
-                                       :triggerChange="false" :dictCode="'state'"/>
-                  </div>
-                </a-col>
-                <span style="float: right;overflow: hidden;margin-right: 11px"
-                      class="table-page-search-submitButtons">
+      <a-tabs :model="activeTab" @change="callback">
+        <a-tab-pane :key="$t('DocumentLibrary')" :tab="$t('DocumentLibrary')">
+          <div class="collection-search-wrapper">
+            <div class="collection-search-header">
+              <div class="table-page-search-wrapper">
+                <a-form layout="inline" @keyup.enter.native="searchQuery">
+                  <a-row :gutter="24">
+                    <a-col :md="6" :sm="8">
+                      <div class="box-title-text">
+                        <div class="title-text" :title="$t('standard')">
+                          <span>{{$t('standard')}}</span>
+                        </div>
+                        <a-input class="box-input" :placeholder="$t('PleaseEnter')+$t('standard')"
+                                 v-model="queryParams.serialNumber"></a-input>
+                      </div>
+                    </a-col>
+                    <a-col :md="6" :sm="8">
+                      <div class="box-title-text">
+                        <div class="title-text" :title="$t('title')">
+                          <span>{{$t('title')}}</span>
+                        </div>
+                        <a-input class="box-input" :placeholder="$t('PleaseEnter')+$t('title')"
+                                 v-model="queryParams.title"></a-input>
+                      </div>
+                    </a-col>
+                    <a-col :md="6" :sm="8">
+                      <div class="box-title-text">
+                        <div class="title-text" :title="$t('status')">
+                          <span>{{$t('status')}}</span>
+                        </div>
+                        <j-dict-select-tag class="box-input" v-model="queryParams.state"
+                                           :placeholder="$t('PleaseSelect')+$t('status')"
+                                           :type="'select'"
+                                           :triggerChange="false" :dictCode="'state'"/>
+                      </div>
+                    </a-col>
+                    <span style="float: right;overflow: hidden;margin-right: 11px"
+                          class="table-page-search-submitButtons">
                <a-col :md="6" :sm="24">
                   <a-button class="box-button" type="primary" @click="searchQuery">{{$t('query')}}</a-button>
                   <a-button class="box-button" style="margin-left: 8px" @click="searchReset">{{$t('reset')}}</a-button>
                </a-col>
                  </span>
-              </a-row>
-            </a-form>
+                  </a-row>
+                </a-form>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
-      <div class="table-operator">
-        <div class="operator-text" @click="handleBatCancel">
-          <a-icon type="delete"/>
-          {{ $t('BatchCancel') }}
-        </div>
-      </div>
-      <div class="colloction-table">
-        <a-table
-          ref="table"
-          size="middle"
-          rowKey="id"
-          :scroll="{x: '100%'}"
-          :columns="columns"
-          :dataSource="tableData"
-          :pagination="false"
-          :loading="loading"
-          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-        >
+          <div class="table-operator">
+            <div class="operator-text" @click="handleBatCancel">
+              <a-icon type="delete"/>
+              {{ $t('BatchCancel') }}
+            </div>
+          </div>
+          <div class="colloction-table">
+            <a-table
+              ref="table"
+              size="middle"
+              rowKey="id"
+              :scroll="{x: '100%'}"
+              :columns="columns"
+              :dataSource="tableData"
+              :pagination="false"
+              :loading="loading"
+              :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+            >
                 <span slot="serialNumber" slot-scope="text, record">
                     <a class="table-del" @click="onDetail(record)">{{record.serialNumber}}</a>
                 </span>
-          <span slot="serialtitle" slot-scope="text, record">
+              <span slot="serialtitle" slot-scope="text, record">
                     <a class="table-del" @click="onDetail(record)">{{record.title}}</a>
                 </span>
-          <span slot="action" slot-scope="text, record">
+              <span slot="action" slot-scope="text, record">
                     <a class="table-del" @click="onCancel(record)">{{$t('CancelCollection')}}</a>
                 </span>
-        </a-table>
-        <div class="page" v-if="tableData.length > 0">
-          <a-pagination
-            :show-total="total => $t('total')+` ${total} `+ $t('strip')"
-            show-quick-jumper
-            show-size-changer
-            :current="queryParams.pageNo"
-            :page-size.sync="queryParams.pageSize"
-            :total="total"
-            @change="onChangePage"
-            @showSizeChange="SizeChange"
-          />
-        </div>
-      </div>
+            </a-table>
+            <div class="page" v-if="tableData.length > 0">
+              <a-pagination
+                :show-total="total => $t('total')+` ${total} `+ $t('strip')"
+                show-quick-jumper
+                show-size-changer
+                :current="queryParams.pageNo"
+                :page-size.sync="queryParams.pageSize"
+                :total="total"
+                @change="onChangePage"
+                @showSizeChange="SizeChange"
+              />
+            </div>
+          </div>
+        </a-tab-pane>
+        <a-tab-pane :key="$t('problemKnowledgeBase')" :tab="$t('problemKnowledgeBase')">
+          <problemKnowledgeBaseList ref="problemKnowledgeBaseListRef"/>
+        </a-tab-pane>
+      </a-tabs>
     </a-card>
   </div>
 </template>
 <script>
   import { getAction, postAction, deleteAction, putAction } from '@/api/manage'
-
+  import problemKnowledgeBaseList from './components/problemKnowledgeBaseList'
   export default {
     name: 'collection',
+    components:{
+      problemKnowledgeBaseList
+    },
     data() {
       return {
         selectedRowKeys: [],
+        activeTab:this.$t('DocumentLibrary'),
         queryParams: {
           pageNo: 1,
           pageSize: 10
@@ -175,6 +186,9 @@
           }
         })
       },//搜索
+      callback(event){
+
+      },
       searchQuery() {
         this.loadData()
       },
@@ -312,7 +326,7 @@
   }
 
   .title-text {
-    width: 33px;
+    width: 43px;
     color: #000F16;
     display: inline-block;
     font-weight: 500;
@@ -357,12 +371,4 @@
   /*  float: none!important;*/
   /*}*/
   /*}*/
-  .box-input .ant-select-selection__rendered {
-    line-height: 38px;
-    height: 38px;
-  }
-
-  .box-input .ant-select-selection--single {
-    height: 38px;
-  }
 </style>