fu-hsi-web/src/views/ruleEngine/atomicIndex/components/EditAtomic.vue

<!--
 * @description: 编辑原子指标
 * @fileName: EditAtomic
 * @author: 17076
 * @date: 2024/6/28-上午10:14
 * @version: V1.0.0
-->

<template>
  <cs-drawer
    :drawer-option="drawerOption"
    @onReset="handleReset"
    @onSubmit="handleSubmit"
  >
    <template slot="content">
      <div class="add-atomic">
        <el-form ref="form" :model="ruleForm" :rules="rules" label-width="120px">
          <el-form-item label="案件类型" prop="caseType">
            <el-select v-model="ruleForm.caseType" :disabled="isView" placeholder="请选择案件类型" style="width: 100%">
              <el-option
                v-for="item in caseTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="原子指标名称" prop="name">
            <el-input
              v-model="ruleForm.name"
              :disabled="isView"
              placeholder="请输入原子指标名称"
            />
          </el-form-item>
          <el-form-item label="指标算法" prop="indexSource">
            <el-radio-group v-model="ruleForm['indexSource']" :disabled="isEdit|| isView" @change="changeType">
              <!-- <el-radio
                v-for="item in sourceOptions"
                :key="item.value"
                :label="item.value"
              >
                {{ item.label }}
              </el-radio> -->
              <el-radio label="2">数据库查询</el-radio>
              <el-radio label="5">结构化查询</el-radio>
              <el-radio label="3">图谱生成</el-radio>
              <el-radio label="4">大模型推理</el-radio>
              <el-radio label="1">人工指定</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="ruleForm['indexSource'] === '5'" label="查询语句" prop="promptId">
            <div v-if="!isView" class="select-btn" @click="selectSql">请选择</div>
            <div v-if="selectInfo.promptName" class="sel-name">{{ `已选：${selectInfo.promptName}` }}</div>
            <!-- <div v-if="ruleForm['indexSource'] === '4'" class="sel-name">{{ `已选：指令名称（即证据模板名称）` }}</div>
            <span v-if="ruleForm['indexSource'] === '3'" class="sel-desc">{{ `头节点类型-关系-尾节点类型` }}</span> -->
            <div v-if="ruleForm['indexSource'] === '5' && selectInfo.extractAttributes.length > 0" class="select-model-list">
              <div v-for="(item,index) in selectInfo.extractAttributes" :key="index" class="model-list-item">
                <span>{{ item }}</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item v-if="ruleForm.indexSource ==='2'" label="关联分类" prop="categoryIdPath">
            <el-cascader v-model="ruleForm.categoryIdPath" :disabled="isView" style="width: 100%;" :props="defaultProps" :options="treeData" />
          </el-form-item>
          <!-- <el-form-item v-if="ruleForm['indexSource'] === '4'" label="prompt标签" prop="recordType">
            <el-select v-model="ruleForm['recordType']" :disabled="isView" placeholder="请选择prompt标签" style="width: 100%">
              <el-option
                v-for="item in promptTagOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="ruleForm['indexSource'] === '4'" label="prompt内容" prop="prompt">
            <el-input
              v-model="ruleForm.prompt"
              :disabled="isView"
              type="textarea"
              :rows="5"
              placeholder="请输入prompt内容"
            />
          </el-form-item> -->
          <el-form-item v-if="['2','3'].includes(ruleForm['indexSource'])" style="position: relative;" label="查询语句" prop="queryLang">
            <el-input
              v-model="ruleForm['queryLang']"
              :disabled="isView"
              type="textarea"
              :rows="8"
              placeholder="请输入查询语句"
            />
            <div v-if="ruleForm.indexSource ==='3'" class="sql_btn" @click="handleDebug">语句调试</div>
          </el-form-item>

          <!--        <el-form-item label="判断结果" prop="judgeResult">-->
          <!--          <el-select v-model="ruleForm['judgeResult']" :disabled="isView" placeholder="请选择判断结果" style="width: 100%">-->
          <!--            <el-option-->
          <!--              v-for="item in resultOptions"-->
          <!--              :key="item.value"-->
          <!--              :label="item.label"-->
          <!--              :value="item.value"-->
          <!--            />-->
          <!--          </el-select>-->
          <!--        </el-form-item>-->
          <el-form-item label="原子指标说明" prop="remark">
            <el-input
              v-model="ruleForm.remark"
              :disabled="isView"
              type="textarea"
              :rows="5"
              placeholder="请输入原子指标说明"
            />
          </el-form-item>
        </el-form>
      </div>
      <SelectSql ref="SelectSqlRef" @submit="selectOk" />
      <GraphDebug ref="GraphDebugRef" />
    </template>

  </cs-drawer>
</template>

<script>
import { addOrUpdAtomicIndex } from '@/api/atomicIndex'
import SelectSql from './SelectSql.vue'
import { getCaseEvidenceTree } from '@/api/caseDetails/evidence'
import GraphDebug from './GraphDebug.vue'
export default {
  name: 'EditAtomic',
  components: {
    SelectSql,
    GraphDebug
  },
  data() {
    return {
      drawerOption: {
        show: false,
        title: '指标配置',
        width: '40%'
      },
      selectInfo: {
        promptName: '',
        promptId: '',
        extractAttributes: []
      }, // 选中的提示词

      // 案件类型数据
      caseTypeOptions: JSON.parse(sessionStorage.getItem('case_type')),
      // prompt 标签数据
      promptTagOptions: [],
      // 指标来源数据
      sourceOptions: JSON.parse(sessionStorage.getItem('index_source')),
      // 判断结果数据
      resultOptions: JSON.parse(sessionStorage.getItem('judge_result')),
      // 规则配置表单
      ruleForm: {
        indexSource: '2',
        caseType: '',
        recordType: '',
        prompt: '',
        queryLang: '',
        name: '',
        remark: ''
      },
      id: '',
      defaultProps: {
        children: 'child',
        label: 'categoryName',
        value: 'id',
        checkStrictly: true
      },
      rules: {
        indexSource: [{ required: true, message: '指标算法不能为空!', trigger: 'blur' }],
        caseType: [{ required: true, message: '案件类型不能为空!', trigger: 'blur' }],
        recordType: [{ required: true, message: 'prompt标签不能为空!', trigger: 'blur' }],
        prompt: [{ required: true, message: 'prompt内容不能为空!', trigger: 'blur' }],
        queryLang: [{ required: true, message: '查询语句不能为空!', trigger: 'blur' }],
        name: [{ required: true, message: '原子指标名称不能为空!', trigger: 'blur' }],
        categoryIdPath: [{ required: true, message: '分类不能为空!', trigger: 'change' }],
        promptId: [{ required: true, message: '查询语句不能为空!', trigger: 'change' }]
      },
      treeData: [],
      // 是否是编辑
      isEdit: false,
      // 是否是查看
      isView: false
    }
  },
  methods: {
    // 显示弹窗
    show(data, isEdit) {
      this.isEdit = isEdit
      this.drawerOption.show = true
      this.id = isEdit ? data.id : ''
      this.selectInfo = {
        promptName: '',
        promptId: '',
        extractAttributes: []
      }
      this.getTreeList()
      this.$nextTick(() => {
        const _this = this
        const formData = data ? JSON.parse(JSON.stringify(data)) : { indexSource: '2' }
        _this.isView = data && !isEdit
        _this.ruleForm = data ? formData : (isEdit ? formData : { indexSource: '2' })
        _this.drawerOption.hiddenFooter = _this.isView
        this.selectInfo.extractAttributes = data.properties ? data.properties.split(',') : []
        this.selectInfo.promptName = data.promptName
        this.selectInfo.promptId = data.promptId
      })
    },
    // 重置
    handleReset() {
      this.selectInfo = {
        promptName: '',
        promptId: '',
        extractAttributes: []
      }
      this.$set(this.ruleForm, 'promptId', '')
      if (this.isEdit) {
        this.$set(this.ruleForm, 'name', '')
        this.$set(this.ruleForm, 'remark', '')
      } else {
        this.ruleForm = { indexSource: '2' }
      }

      // this.$refs.form.clearValidate()
    },
    // 图谱调试
    handleDebug() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          this.$refs.GraphDebugRef.show(this.ruleForm)
        }
      })
    },
    selectSql() {
      this.$refs.SelectSqlRef.show(this.ruleForm.indexSource, this.selectInfo)
    },
    selectOk(data, list) {
      this.selectInfo = data
      this.$set(this.ruleForm, 'promptId', data.promptId)
      // this.ruleForm.promptId = data.promptId
      this.selectInfo.extractAttributes = list
    },
    // 确定
    handleSubmit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          if (this.isEdit) {
            this.ruleForm.id = this.id
          }
          if (this.ruleForm.indexSource === '2') {
            this.ruleForm.categoryId = this.ruleForm.categoryIdPath[this.ruleForm.categoryIdPath.length - 1 ]
          } else if (this.ruleForm.indexSource === '5') {
            this.ruleForm.properties = this.selectInfo.extractAttributes.join(',')
          }

          const { code, msg } = await addOrUpdAtomicIndex(this.ruleForm)
          code === 200 ? (this.isEdit ? this.$baseMessage.success(msg || '编辑成功!') : this.$baseMessage.success(msg || '新增成功!')) : (this.isEdit ? this.$baseMessage.error(msg || '新增失败!') : this.$baseMessage.error(msg || '新增失败!'))
          this.drawerOption.show = false
          this.$emit('reloadData')
        }
      })
    },
    // 查询目录
    getTreeList() {
      getCaseEvidenceTree({ caseType: 1 }).then(res => {
        if (res.code === 200) {
          this.treeData = res.data
        }
      })
    },
    // 切换算法
    changeType(val) {
      this.ruleForm = { indexSource: val, caseType: this.ruleForm.caseType, name: this.ruleForm.name }
      // this.ruleForm['indexSource'] = val
    }
  }
}
</script>

<style scoped lang="scss">
.add-atomic {
  .select-btn {
    width: 96px;
    height: 36px;
    background: #FFFFFF;
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #3763FF;
    line-height: 36px;
    text-align: center;font-size: 16px;
    color: #3763FF;
    cursor: pointer;
    margin-bottom: 8px;
  }
  .sel-name {
    font-size: 16px;
    color: #3763FF;
  }
  .sel-desc {
    margin-top: 8px;font-size: 16px;
    color: #333333
  }
  .sql_btn {
    position: absolute;
    right: 16px;
    bottom: 16px;width: 112px;
    height: 42px;
    background: #FFFFFF;
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #3763FF;
    font-size: 16px;
    color: #3763FF;
    text-align: center;
    line-height: 42px;
    cursor: pointer;
  }
  .select-model-list {
    display: flex;
    margin-top: 16px;
    flex-wrap: wrap;
    .model-list-item {
      padding: 0 12px;
      height: 32px;
      margin:0 8px 8px 0;
      background: #F0F0F0;
      border-radius: 6px 6px 6px 6px;font-size: 14px;
      color: #333333;
      display: flex;
      align-items: center;
      cursor: pointer;
      span {
        // margin-right: 16px;
      }
    }
  }
}
</style>