feat [rule] : 搜索模式更改

1. 搜索模式由本地过滤改成加入参数查询

src/views/rules/Index.vue

@@ -12,15 +12,20 @@ export default {
       // 表格配置项
       tableConfig: {
         ruleType: {
-          1: '提词规则',
+          1: '知识拆分规则',
-          2: '知识拆分规则'
+          2: '知识题词规则'
         },
         total: 0,
         currentPage: 1,
         pageSize: 10,
         columns: [
           { prop: 'ruleName', key: '规则名称' },
-          { prop: 'ruleType', key: '规则类型' },
+          {
+            prop: 'ruleType', key: '规则类型',
+            render: (h, params) => {
+              return h('span', this.tableConfig.ruleType[params.row.ruleType])
+            }
+          },
           { prop: 'createdDate', key: '创建时间' },
           {
             key: '操作',
@@ -45,7 +50,7 @@ export default {
                 h(
                   'el-button',
                   {
-                    props: { type: 'text', size: 'mini' },
+                    props: { type: 'danger', size: 'mini' },
                     on: { click: () => this.handleDelete(params.row, params.index) }
                   },
                   '删除'
@@ -66,7 +71,6 @@ export default {
       tableData: [],
       // 查询表单
       form: {
-        query: true,
         pickerOptions: void 0,
         ruleType: '',
         ruleName: '',
@@ -87,61 +91,20 @@ export default {
     Info
   },
   computed: {
-    // 当前的分页数据
+    // 处理后的日期内容, 只保留 年月日, 日期格式是 年-月-日
-    currentTableDate() {
+    formattedDate() {
-      let filteredData
+      // 如果没有日期，返回空字符串
-      // 过滤 table 列表,如果 form 相关项是空的，就不过滤
+      if (!this.form.createdDate.length) return ''
-      if (this.form.query) {
+
-        // 过滤 ruleType
+      return this.form.createdDate.map(date => {
-        const map = {
+        return `${new Date(date).getFullYear()}-${new Date(date).getMonth() + 1}-${new Date(date).getDate()}`
-          1: '知识拆分规则',
-          2: '提词规则'
-        }
-        filteredData = this.tableData.filter(item => {
-          if (!this.form.ruleType) return true
-          return map[item.ruleType] === this.form.ruleType
       })
-
-        // 过滤 ruleName
-        filteredData = filteredData.filter(item => {
-          if (!this.form.ruleName) return true
-          return item.ruleName === this.form.ruleName
-        })
-
-        // 过滤 createdDate
-        filteredData = filteredData.filter(item => {
-          if (!this.form.createdDate.length) return true
-          return item.createdDate >= this.form.createdDate[0] && item.createdDate <= this.form.createdDate[1]
-        })
-      } else {
-        filteredData = this.tableData
-      }
-      return filteredData
-    },
-
-    // 获取表格数据
-    getCurrentTableData() {
-      // 需要处理 规则类型， 因为规则类型都是数字，需要转换成中文
-      return this.currentTableDate.map(item => ({
-        ...item,
-        ruleType: item.ruleType === 1 ? '知识拆分规则' : '提词规则'
-      }))
-    },
-
-    // 查询表单的 ruleTypeOptions
-    ruleTypeOptions() {
-      // 去重所有 ruleType， 然后映射成 option
-      return [...new Set(this.tableData.map(item => item.ruleType))].map(type => this.tableConfig.ruleType[type])
-    },
-    // 查询表单的 ruleNameOptions
-    ruleNameOptions() {
-      const res = [...new Set(this.tableData.map(item => item.ruleName))]
-      return res
     }
   },
   watch: {
     form: {
-      handler() {},
+      handler() {
+      },
       deep: true
     }
   },
@@ -149,11 +112,22 @@ export default {
     this.getTableData()
   },
   methods: {
+    // 反转 ruleType ,获取 key 值
+    reverseRuleType(value) {
+      // const keys = Object.keys(this.tableConfig.ruleType)
+      const values = Object.values(this.tableConfig.ruleType)
+      const res = values.indexOf(value) + 1
+      // 如果没有找到，默认查询所有内容
+      if (res === -1) return ''
+      return res
+    },
     getTableData() {
       const payload = {
         page: this.tableConfig.currentPage,
-        pageSize: this.tableConfig.pageSize
+        pageSize: this.tableConfig.pageSize,
-        // docId: ''
+        ruleType: this.form.ruleType,
+        ruleNameLike: this.form.ruleName,
+        times: this.formattedDate
       }
 
       getRuleList(payload).then(res => {
@@ -181,19 +155,29 @@ export default {
       this.dialogOptions.currentRow = row
     },
     // 处理修改规则
-    handleEdit(row, index) {
+    handleEdit(row) {
       this.dialogOptions.title = '修改规则'
-      this.dialogOptions.currentComponent = row.ruleType === '知识拆分规则' ? 'EditSplitRule' : 'EditPromptRule'
+      this.dialogOptions.currentComponent = row.ruleType === 1 ? 'EditSplitRule' : 'EditPromptRule'
       this.dialogOptions.visible = true
       this.dialogOptions.currentRow = row
     },
     // 处理删除规则
     handleDelete(row, index) {
+      this.$confirm('此操作将永久删除该规则, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
         deleteRule([row.id])
           .then(() => {
             // 删除当前行
             this.tableData.splice(index, 1)
             this.getTableData()
+            this.$notify.success({
+              title: '删除成功',
+              message: '删除成功',
+              duration: 2000
+            })
           })
           .catch(err => {
             this.$notify.error({
@@ -201,15 +185,15 @@ export default {
               message: h('i', { style: 'color: teal' }, '删除时出现错误，稍后再试' + err)
             })
           })
+      })
     },
     // 处理查询
     handleQuery() {
-      this.form.query = true
+      this.getTableData()
     },
     // 处理重置
     handleReset() {
       this.form = {
-        query: true,
         pickerOptions: void 0,
         ruleType: '',
         ruleName: '',
@@ -242,30 +226,24 @@ export default {
             <el-col :span="8">
               <el-form-item label="规则类型">
                 <el-select v-model="form.ruleType" placeholder="请选择规则类型">
-                  <el-option v-for="item in ruleTypeOptions" :key="item" :label="item" :value="item"></el-option>
+                  <el-option label="全部规则" value="">全部规则</el-option>
+                  <el-option v-for="item in tableConfig.ruleType" :key="item" :label="item"
+                             :value="reverseRuleType(item)" />
                 </el-select>
               </el-form-item>
             </el-col>
             <!-- 规则名称 -->
             <el-col :span="8">
               <el-form-item label="规则名称">
-                <el-select v-model="form.ruleName" placeholder="请选择规则名称">
+                <el-input v-model="form.ruleName" placeholder="请输入规则名称"></el-input>
-                  <el-option v-for="item in ruleNameOptions" :key="item" :label="item" :value="item"></el-option>
-                </el-select>
               </el-form-item>
             </el-col>
             <!-- 创建时间 -->
             <el-col :span="8">
               <el-form-item label="创建时间">
-                <el-date-picker
+                <el-date-picker v-model="form.createdDate" type="daterange" unlink-panels range-separator="至"
-                  v-model="form.createdDate"
+                                start-placeholder="开始日期" end-placeholder="结束日期"
-                  type="daterange"
+                                :picker-options="form.pickerOptions">
-                  unlink-panels
-                  range-separator="至"
-                  start-placeholder="开始日期"
-                  end-placeholder="结束日期"
-                  :picker-options="form.pickerOptions"
-                >
                 </el-date-picker>
               </el-form-item>
             </el-col>
@@ -273,7 +251,7 @@ export default {
           <!-- 功能按钮组： 查询、重置、新增规则 -->
           <el-row class="p25">
             <el-col :span="16">
-              <!--              <el-button size="mini" type="primary" @click="handleQuery">查询</el-button>-->
+              <el-button size="mini" type="primary" @click="handleQuery">查询</el-button>
               <el-button size="mini" type="info" @click="handleReset">重置</el-button>
               <el-button size="mini" type="primary" @click="handleAdd">新增规则</el-button>
             </el-col>
@@ -285,7 +263,7 @@ export default {
       <div class="p20">
         <r-table
           :columns="tableConfig.columns"
-          :data="getCurrentTableData"
+          :data="tableData"
           :deletion="false"
           :total="tableConfig.total"
           @currentChange="handleCurrentChange"

src/views/track/Index.vue

@@ -1,5 +1,5 @@
 <script>
-import { datasetsExPages } from '@/api/generatedApi'
+import { datasetsExTaskPages as datasetsExPages, docManageDataset } from '@/api/generatedApi'
 import KnowledgeInfo from '@/views/track/views/knowledge-info/Index.vue'
 
 export default {
@@ -10,15 +10,23 @@ export default {
     return {
       infoDialogVisible: false,
       activeForm: {},
-      tabList: [],
+      tableData: [],
       form: {
-        knowledge: '',
+        datasetId: '',
-        knowledgeName: '',
+        datasetValue: '',
+        datasetList: [],
+        fileName: '',
         uploadUser: '',
         documentStatus: '',
         taskTime: []
       },
       tableConfig: {
+
+        uploadStatusType: {
+          '1': '成功',
+          '0': '上传中',
+          '-1': '失败'
+        },
         total: 0,
         currentPage: 1,
         pageSize: 10,
@@ -26,7 +34,13 @@ export default {
           { prop: 'id', key: '任务号', width: '180' },
           { prop: 'datasetName', key: '知识库', width: '180' },
           { prop: 'fileName', key: '知识文件名称' },
-          { prop: 'documentStatus', key: '上传状态', width: '100' },
+          {
+            prop: 'documentStatus', key: '上传状态', width: '100',
+            render: (h, params) => {
+              return h('span', this.tableConfig.uploadStatusType[params.row.documentStatus])
+            }
+          },
+          // 上传用户 现在只有 admin . 后面需要自己添加
           { prop: 'userName', key: '上传用户', width: '100' },
           { prop: 'createdDate', key: '上传时间', width: '200' },
           {
@@ -49,80 +63,12 @@ export default {
     }
   },
   computed: {
-    /**
-     * 获取筛选后的列表数据
-     */
-    getFilterTableData() {
-      let filteredList = this.tabList
-
-      // 按照顺序进行筛选，先按照知识库进行筛选
-      filteredList = this.form.knowledge
-        ? filteredList.filter(item => {
-            return item.datasetName === this.form.knowledge
-          })
-        : filteredList
-
-      // 按照知识文件名称进行筛选
-      filteredList = this.form.knowledgeName
-        ? filteredList.filter(item => {
-            return item.fileName === this.form.knowledgeName
-          })
-        : filteredList
-
-      // 按照上传用户进行筛选
-      filteredList = this.form.uploadUser
-        ? filteredList.filter(item => {
-            return item.userName === this.form.uploadUser
-          })
-        : filteredList
-
-      // 按照任务状态进行筛选
-      filteredList = this.form.documentStatus
-        ? filteredList.filter(item => {
-            return item.documentStatus === this.form.documentStatus
-          })
-        : filteredList
-
-      // 处理的状态格式化
-      filteredList = filteredList.map(item => {
-        if (item.documentStatus === 0 || item.documentStatus === '上传中') {
-          item.documentStatus = '上传中'
-        } else if (item.documentStatus === 1 || item.documentStatus === '成功') {
-          item.documentStatus = '成功'
-        } else if (item.documentStatus === -1 || item.documentStatus === '失败') {
-          item.documentStatus = '失败'
-        }
-        return item
-      })
-
-      // 按照任务时间进行筛选
-      filteredList =
-        this.form.taskTime.length > 0
-          ? filteredList.filter(item => {
-              return (
-                new Date(item.uploadDate).getTime() >= new Date(this.form.taskTime[0]).getTime() &&
-                new Date(item.uploadDate).getTime() <= new Date(this.form.taskTime[1]).getTime()
-              )
-            })
-          : filteredList
-
-      // 默认返回所有列表
-      return filteredList
-    },
-    /**
-     * 获取知识库列表
-     */
-    getKnowledgeList() {
-      // 进行去重处理
-      const knowledgeList = [...new Set(this.tabList.map(item => item.datasetName))]
-      return knowledgeList
-    },
     /**
      * 获取知识文件名称列表
      */
     getKnowledgeNameList() {
       // 进行去重处理
-      const knowledgeNameList = [...new Set(this.tabList.map(item => item.fileName))]
+      const knowledgeNameList = [...new Set(this.tableData.map(item => item.fileName))]
       return knowledgeNameList
     },
     /**
@@ -130,7 +76,7 @@ export default {
      */
     getUploadUserList() {
       // 进行去重处理
-      const uploadUserList = [...new Set(this.tabList.map(item => item.userName))]
+      const uploadUserList = [...new Set(this.tableData.map(item => item.userName))]
       return uploadUserList
     },
     /**
@@ -138,12 +84,37 @@ export default {
      */
     getTaskStatusList() {
       // 进行去重处理
-      const taskStatusList = [...new Set(this.tabList.map(item => item.documentStatus))]
+      const taskStatusList = [...new Set(this.tableData.map(item => item.documentStatus))]
       return taskStatusList
+    },
+    /**
+     * 格式化上传时间
+     * @returns {string} 格式化后的日期字符串 格式是 年-月-日
+     */
+    formattedDate() {
+      if (!this.form.taskTime || this.form.taskTime.length !== 2) return ''
+
+      return [`${this.form.taskTime[0].getFullYear()}-${this.form.taskTime[0].getMonth() + 1}-${this.form.taskTime[0].getDate()}`, `${this.form.taskTime[1].getFullYear()}-${this.form.taskTime[1].getMonth() + 1}-${this.form.taskTime[1].getDate()}`]
     }
   },
   methods: {
+    // 搜索
+    handleSearch() {
+      // 重置页码
+      this.tableConfig.currentPage = 1
+
+      this.getTableData()
+    },
+    // 反转 uploadStatusType ,获取 key 值
+    reverseUploadStatusType(value) {
+      const values = Object.values(this.tableConfig.uploadStatusType)
+      const res = values.indexOf(value) + 1
+      // 如果没有找到，默认查询所有内容
+      if (res === -1) return ''
+      return res
+    },
     handleCurrentChange(current) {
+      // 重置页码
       this.tableConfig.currentPage = current
       this.getTableData()
     },
@@ -153,26 +124,60 @@ export default {
     },
     getTableData() {
       const payload = {
+        // 分页参数
         page: this.tableConfig.currentPage,
         pageSize: this.tableConfig.pageSize,
-        docId: ''
+        // // 知识库名称
+        datasetId: this.form.datasetId,
+        // // 知识文件名称
+        // fileName: this.form.knowledgeName,
+        // // 上传用户
+        // userName: this.form.uploadUser,
+        // // 上传状态
+        // documentStatus: this.form.documentStatus,
+        // // 任务时间
+        times: this.formattedDate,
+        fileNameLike: this.form.fileName,
+        documentStatus: this.form.documentStatus
       }
 
       datasetsExPages(payload).then(res => {
-        this.tabList = res.content.content.list ? res.content.content.list : []
+        this.tableData = res.content.content.list ? res.content.content.list : []
         this.tableConfig.total = res.content.content.total
-        console.log(`res:`, res.content.content.list)
       })
     },
+    // 远程搜索知识库内容
+    remoteSearchDataset(query) {
+      this.form.datasetValue = query
+
+      if (query !== '') {
+        this.getKnowledgeList()
+      }
+    },
+    // 获取知识库列表
+    getKnowledgeList() {
+      docManageDataset({
+        // 对搜索的内容不做限制,主要获取所有的内容, 后续再添加参数
+        // page: this.tableConfig.currentPage,
+        // pageSize: this.tableConfig.pageSize,
+        nameLike: this.form.datasetValue
+      }).then(res => {
+        this.form.datasetList = res.content.content ? res.content.content : []
+      })
+    },
+    // 重置 form 表单状态
     handleReset() {
       this.form = {
-        knowledge: '',
+        datasetId: '',
-        knowledgeName: '',
+        datasetValue: '',
+        datasetList: [],
+        fileName: '',
         uploadUser: '',
         documentStatus: '',
         taskTime: []
       }
     },
+    // 处理查看详情
     handleActiveInfo(scope) {
       this.infoDialogVisible = true
       this.activeForm = scope.row
@@ -187,33 +192,30 @@ export default {
 <template>
   <div class="track-container">
     <el-card shadow="hover">
-      <!-- <template #header>
-        <div class="card-header">
-          <h3>知识库管理</h3>
-        </div>
-      </template> -->
       <!-- 知识库信息 -->
       <el-form :model="form" label-width="100px" size="small">
         <el-row>
           <el-col :span="8">
             <el-form-item label="知识库">
-              <el-select v-model="form.knowledge" placeholder="请选择知识库">
+              <!-- 启用远程加载 -->
-                <el-option v-for="item in getKnowledgeList" :key="item" :label="item" :value="item"></el-option>
+              <el-select filterable remote :remote-method="remoteSearchDataset" v-model="form.datasetId"
+                         placeholder="输入搜索知识库">
+                <!-- 后续需要添加懒加载 -->
+                <el-option v-for="item in form.datasetList" :key="item.id" :label="item.name" :value="item.id" />
               </el-select>
             </el-form-item>
           </el-col>
 
           <el-col :span="8">
             <el-form-item label="知识文件名称">
-              <el-select v-model="form.knowledgeName" placeholder="请选择知识文件名称">
+              <el-input v-model="form.fileName" placeholder="请输入知识文件名称"></el-input>
-                <el-option v-for="item in getKnowledgeNameList" :key="item" :label="item" :value="item"></el-option>
-              </el-select>
             </el-form-item>
           </el-col>
 
           <el-col :span="8">
             <el-form-item label="上传用户">
               <el-select v-model="form.uploadUser" placeholder="请选择上传用户">
+                <el-option label="全部上传用户" value="">全部上传用户</el-option>
                 <el-option v-for="item in getUploadUserList" :key="item" :label="item" :value="item"></el-option>
               </el-select>
             </el-form-item>
@@ -222,7 +224,9 @@ export default {
           <el-col :span="8">
             <el-form-item label="上传状态">
               <el-select v-model="form.documentStatus" placeholder="请选择上传状态">
-                <el-option v-for="item in getTaskStatusList" :key="item" :label="item" :value="item"></el-option>
+                <el-option label="全部上传状态" value="" />
+                <el-option v-for="item in Object.keys(this.tableConfig.uploadStatusType)" :key="item"
+                           :label="tableConfig.uploadStatusType[item]" :value="Number(item)"></el-option>
               </el-select>
             </el-form-item>
           </el-col>
@@ -240,6 +244,9 @@ export default {
             </el-form-item>
           </el-col>
           <el-col :span="9" :offset="11" class="mb20">
+            <!-- 搜索按钮 -->
+            <el-button type="primary" size="small" @click="handleSearch">搜索</el-button>
+            <!-- 重置按钮 -->
             <el-button type="primary" size="small" @click="handleReset">重置筛选</el-button>
           </el-col>
         </el-row>
@@ -249,7 +256,7 @@ export default {
       <div>
         <r-table
           :columns="tableConfig.columns"
-          :data="getFilterTableData"
+          :data="tableData"
           :deletion="false"
           :total="tableConfig.total"
           @currentChange="handleCurrentChange"
@@ -257,16 +264,11 @@ export default {
         />
 
         <!-- 弹出提示框， 里面是各种详情内容 -->
-        <el-drawer title="上传任务详情" :visible.sync="infoDialogVisible" size="80%" :before-close="() => (infoDialogVisible = false)">
+        <el-drawer title="上传任务详情" :visible.sync="infoDialogVisible" size="80%"
+                   :before-close="() => (infoDialogVisible = false)">
           <knowledge-info :form="activeForm" v-if="infoDialogVisible"></knowledge-info>
         </el-drawer>
       </div>
     </el-card>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.track-container {
-  padding: 20px 20px;
-}
-</style>