特征库对接

project/xbot/AppWorkOrder/AppWorkOrder.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="AppWorkOrder">
-    <component ref="component" :is="currentPage" @change="onChange" :params="params" :instance="instance" :dict="dict" :menuName="menuName" />
+    <component ref="component" :is="currentPage" @change="onChange" v-bind="$props"/>
   </section>
 </template>
 
@@ -8,6 +8,7 @@
 import List from './components/List'
 import Detail from './components/Detail'
 import Setting from './components/Setting'
+import settingDetail from "./components/settingDetail";
 
 export default {
   name: 'AppWorkOrder',
@@ -29,6 +30,7 @@ export default {
     currentPage() {
       let {hash, query: {id}} = this.$route
       return hash == "#Setting" ? Setting :
+          hash == "#sd" ? settingDetail :
               !!id ? Detail : List
     }
   },

project/xbot/AppWorkOrder/components/Setting.vue

@@ -7,11 +7,12 @@
       <template #content>
         <ai-search-bar>
           <template #left>
-            <el-button size="small" type="primary" icon="iconfont iconAdd" @click="add('')">添加</el-button>
+            <el-button size="small" type="primary" icon="iconfont iconAdd" @click="edit()">添加</el-button>
           </template>
           <template #right>
-            <el-input size="small" placeholder="特征词搜索" v-model="search.wordName" clearable
+            <el-input size="small" placeholder="特征词搜索" v-model="search.keywords" clearable
-              @clear="search.current = 1, search.wordName = '', getTableData()" suffix-icon="iconfont iconSearch"
+                      @clear="search.current = 1, search.keywords = '', getTableData()"
+                      suffix-icon="iconfont iconSearch"
                       v-throttle="() => {(search.current = 1), getTableData();}"/>
           </template>
         </ai-search-bar>
@@ -28,28 +29,13 @@
         </ai-table>
       </template>
     </ai-list>
-    <ai-dialog
-        :title="form.id ? '编辑特征词' : '添加特征词'"
-        :visible.sync="dialog"
-        :destroyOnClose="true"
-        width="720px"
-        @onConfirm="onConfirm"
-        @closed="form={}">
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="特征词" prop="wordName">
-          <el-input v-model.trim="form.wordName"  type="textarea" :rows="2" placeholder="多个特征词以；隔开"></el-input>
-        </el-form-item>
-        <el-form-item label="事件类型" prop="eventType">
-          <ai-select v-model="form.eventType" :selectList="dict.getDict('xbotReportEventType')" placeholder="请选择" />
-        </el-form-item>
-      </el-form>
-    </ai-dialog>
   </section>
 
 </template>
 
 <script>
-import { mapState } from "vuex";
+import {mapState} from "vuex";
+
 export default {
   name: "Setting",
   label: '工单特征库',
@@ -57,24 +43,18 @@ export default {
     instance: Function,
     dict: Object,
     permissions: Function,
-    menuName:String
+    menuName: String
   },
   data() {
     return {
       search: {
-        wordName: '',
+        keywords: '',
         current: 1,
         size: 10,
       },
       total: 0,
       tableData: [],
       current: 1,
-      form: {
-        wordName: '',
-        eventType: ''
-      },
-      dialog: false,
-      flag: false,
     }
   },
   created() {
@@ -86,29 +66,23 @@ export default {
     ...mapState(['user']),
     colConfigs() {
       return [
-        { prop: "wordName", label: '特征词', align: "left"},
+        {prop: "keywords", label: '特征词', align: "left"},
-        { prop: "eventType", label: '事件类型', width: 200, align: 'center', dict: 'xbotReportEventType'},
+        {prop: "eventType", label: '事件类型', width: 200, align: 'center', dict: 'xbotReportEventType'},
-        { prop: "createTime", label: '创建时间', width: 200, align: 'center'},
+        {prop: "createTime", label: '创建时间', width: 200, align: 'center'},
-        { prop: "createUserName", label: '创建人', width: 200, align: 'center'},
+        {prop: "createUserName", label: '创建人', width: 200, align: 'center'},
-        { prop: "status", label: '状态', width: 200, dict: 'processDefStatus', align: 'center'},
+        {prop: "status", label: '状态', width: 200, dict: 'processDefStatus', align: 'center'},
-        { slot: "options"},
+        {slot: "options"},
       ]
     },
-    rules() {
-      return {
-        wordName: [{required: true, message: '请输入特征词', trigger: 'blur' }],
-        eventType: [{required: true, message: '请选择事件类型', trigger: 'blur' }],
-      }
-    },
   },
   methods: {
     getTableData() {
-      this.instance.post(`/app/appsessionarchivefeaturelibrary/list`,null,{
+      this.instance.post(`/app/appsessionarchivefeaturelibrary/list`, null, {
         params: {
           ...this.search
         }
       }).then(res => {
-        if(res?.data) {
+        if (res?.data) {
           this.tableData = res.data.records
           this.total = res.data.total
         }
@@ -134,34 +108,9 @@ export default {
         })
       })
     },
-    edit(row) {
+    edit(row = {}) {
-      this.form = {...row}
+      const {id} = row
-      this.dialog = true
+      this.$router.push({hash: "#sd", query: {id}})
-    },
-    add() {
-      this.dialog = true
-    },
-    onConfirm() {
-      if(this.flag) return
-      this.$refs.form.validate((valid)=> {
-        if(valid) {
-          this.flag = true
-          this.instance.post(`/app/appsessionarchivefeaturelibrary/addOrUpdate`,{
-            ...this.form,
-          }).then(res => {
-            if(res?.code == 0) {
-              this.$message.success(this.form.id ? '特征词编辑成功' : '特征词添加成功')
-              setTimeout(() =>{
-                this.dialog = false
-                this.getTableData()
-                this.flag = false
-              }, 600)
-            } else {
-              this.flag = false
-            }
-          })
-        }
-      })
     },
     cancel() {
       this.$router.push({})
@@ -183,6 +132,7 @@ export default {
     display: flex;
     justify-content: space-between;
     cursor: pointer;
+
     .el-icon-arrow-down {
       line-height: 32px;
     }
@@ -190,7 +140,7 @@ export default {
 
   :deep .is-error {
     .time-select {
-      border: 1px solid #f46!important;
+      border: 1px solid #f46 !important;
     }
   }
 }

project/xbot/AppWorkOrder/components/TableInputColumn.vue

@@ -0,0 +1,17 @@
+<template>
+  <el-table-column :label="label" v-bind="$attrs">
+    <template slot-scope="{row}">
+      <el-input v-model="row[prop]" :placeholder="placeholder" clearable/>
+    </template>
+  </el-table-column>
+</template>
+<script>
+export default {
+  name: 'table-input-column',
+  props: {
+    label: {type: String, required: true},
+    prop: {type: String, required: true},
+    placeholder: {default: "请输入"}
+  }
+}
+</script>

project/xbot/AppWorkOrder/components/settingDetail.vue

@@ -0,0 +1,149 @@
+<template>
+  <ai-detail class="settingDetail">
+    <ai-title slot="title" title="设置事件" isShowBack isShowBottomBorder @back="back"/>
+    <template #content>
+      <el-form size="small" ref="FeatureForm" :model="form" :rules="rules" label-width="80px">
+        <ai-card title="基本信息">
+          <el-form-item label="特征词" prop="keywords">
+            <el-input v-model.trim="form.keywords" type="textarea" :rows="2" placeholder="多个特征词以,隔开"/>
+          </el-form-item>
+          <el-form-item label="事件类型" prop="eventType">
+            <ai-select v-model="form.eventType" :instance="instance" action="/app/appsessionarchivefeaturelibrary/list"
+                       :prop="{value:'eventType',label:'eventType'}" allow-create
+                       placeholder="可以选择已有的事件类型,也可以创建新的"/>
+          </el-form-item>
+        </ai-card>
+        <ai-card title="事件信息" panel>
+          <template #right>
+            <el-button type="text" @click="form.features.push({})">添加</el-button>
+          </template>
+          <el-form-item prop="features" label-width="0">
+            <el-table :data="form.features" size="mini" stripe border header-cell-class-name="ai-table__header">
+              <table-input-column label="属性" prop="field" width="120px"/>
+              <table-input-column label="属性名" prop="label" width="160px"/>
+              <table-input-column label="属性别名" prop="alias" width="120px"/>
+              <table-input-column label="描述" prop="description"/>
+              <el-table-column label="操作" align="center" width="80px">
+                <template slot-scope="{row,$index}">
+                  <el-button type="text" @click="handleDelete('是否要删除属性?',form.features,$index)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-form-item>
+        </ai-card>
+        <el-form-item prop="features" label-width="0">
+          <ai-card title="样例" v-if="!isEmpty(form.features)" panel class="mar-t20">
+            <template #right>
+              <el-button type="text" @click="form.examples.push({content:'样例会话',extraction:{}})">添加</el-button>
+            </template>
+            <el-table :data="form.examples" size="mini" stripe border header-cell-class-name="ai-table__header">
+              <table-input-column label="会话内容" prop="content"/>
+              <el-table-column label="事件抓取信息" min-width="200px">
+                <template slot-scope="{row}">
+                  <el-descriptions :column="2" size="mini" border>
+                    <el-descriptions-item v-for="item in form.features" :key="item.field" :label="item.label">
+                      <el-input v-model="row.extraction[item.field]" clearable placeholder="请输入"/>
+                    </el-descriptions-item>
+                  </el-descriptions>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" align="center" width="80px">
+                <template slot-scope="{row,$index}">
+                  <el-button type="text" @click="handleDelete('是否要删除该样例?',form.examples,$index)">删除
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </ai-card>
+        </el-form-item>
+      </el-form>
+    </template>
+    <template #footer>
+      <el-button @click="back">取消</el-button>
+      <el-button type="primary" @click="submit">提交</el-button>
+    </template>
+  </ai-detail>
+</template>
+<script>
+import TableInputColumn from "./TableInputColumn.vue";
+
+export default {
+  name: "settingDetail",
+  components: {TableInputColumn},
+  props: {
+    instance: Function,
+    dict: Object,
+  },
+  data() {
+    return {
+      form: {
+        // keywords: ["丢", "找", "不见", "看见", "看到", "掉"].toString(),
+        // eventType: "失物招领",
+        features: [],
+        examples: []
+      },
+      rules: {
+        keywords: [{required: true, message: '请输入特征词', trigger: 'blur'}],
+        eventType: [{required: true, message: '请选择事件类型', trigger: 'blur'}],
+        features: [{required: true, message: '请设置事件信息'}],
+      }
+    }
+  },
+  methods: {
+    back() {
+      this.$router.push({hash: "#Setting"})
+    },
+    submit() {
+      this.$refs.FeatureForm.validate().then(() => {
+        let {features = null, examples = null} = this.form
+        features = JSON.stringify(features)
+        examples = JSON.stringify(examples)
+        this.instance.post("/app/appsessionarchivefeaturelibrary/addOrUpdate", {
+          ...this.form,
+          features,
+          examples
+        }).then(res => {
+          if (res?.code == 0) {
+            this.$message.success("保存成功!")
+            this.back()
+          }
+        })
+      })
+    },
+    getDetail() {
+      const {id} = this.$route.query
+      id && this.instance.post("/app/appsessionarchivefeaturelibrary/queryDetailById", null, {params: {id}}).then(res => {
+        if (res?.data) {
+          let {features = null, examples = null} = res.data
+          features = JSON.parse(features) || []
+          examples = JSON.parse(examples) || []
+          this.form = {...res.data, features, examples}
+        }
+      })
+    },
+    isEmpty(list = []) {
+      return Object.keys(list).length <= 0
+    },
+    handleDelete(msg, table = [], i) {
+      this.$confirm(msg).then(() => {
+        table.splice(i, 1)
+      })
+    },
+    transformer() {
+
+    }
+  },
+  created() {
+    this.getDetail()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.settingDetail {
+  :deep(.ai-table__header) {
+    border-bottom: none;
+    background: #F3F4F5;
+    line-height: normal;
+  }
+}
+</style>