dvcp_v2_webapp/packages/xbot/AppWorkOrderXbot/components/settingDetail.vue

<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>