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="isView" @change="changeType">
              <el-radio
                v-for="item in sourceOptions"
                :key="item.value"
                :label="item.value"
              >
                {{ item.label }}
              </el-radio>
            <!--            <el-radio label="1">人工指定</el-radio>-->
            <!--            <el-radio label="2">数据库查询</el-radio>-->
            <!--            <el-radio label="3">图谱生成</el-radio>-->
            <!--            <el-radio label="4">大模型</el-radio>-->
            </el-radio-group>
          </el-form-item>
          <el-form-item label="查询语句" prop="indexSource">
            <div class="select-btn" @click="selectSql">请选择</div>
            <div v-if="ruleForm['indexSource'] === '3'" class="sel-name">{{ `已选：指令名称` }}</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'] === '4'" class="select-model-list">
              <div v-for="(item,index) in modelList" :key="index" class="model-list-item">
                <span>{{ item.name }}</span>
                <i class="el-icon-circle-close" />
              </div>
            </div>
          </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="ruleForm['indexSource'] === '2' || ruleForm['indexSource'] === '3'" label="查询语句" prop="queryLang">
            <el-input
              v-model="ruleForm['queryLang']"
              :disabled="isView"
              type="textarea"
              :rows="5"
              placeholder="请输入查询语句"
            />
          </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" />
    </template>

  </cs-drawer>
</template>

<script>
import { addOrUpdAtomicIndex } from '@/api/atomicIndex'
import SelectSql from './SelectSql.vue'
export default {
  name: 'EditAtomic',
  components: {
    SelectSql
  },
  data() {
    return {
      drawerOption: {
        show: false,
        title: '指标配置',
        width: '40%'
      },
      modelList: [
        {
          name: '属性1'
        }, {
          name: '属性2'
        }, {
          name: '属性3'
        }, {
          name: '属性4'
        }
      ],
      // 案件类型数据
      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: '1',
        caseType: '',
        recordType: '',
        prompt: '',
        queryLang: '',
        name: '',
        remark: ''
      },
      id: '',
      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' }],
        judgeResult: [{ required: true, message: '判断结果不能为空!', trigger: 'blur' }]
      },
      // 是否是编辑
      isEdit: false,
      // 是否是查看
      isView: false
    }
  },
  methods: {
    // 显示弹窗
    show(data, isEdit) {
      this.isEdit = isEdit
      this.drawerOption.show = true
      this.id = isEdit ? data.id : ''
      this.$nextTick(() => {
        const _this = this
        const formData = data ? JSON.parse(JSON.stringify(data)) : { indexSource: '1' }
        _this.isView = data && !isEdit
        _this.ruleForm = data ? formData : (isEdit ? formData : { indexSource: '1' })
        _this.drawerOption.hiddenFooter = _this.isView
      })
    },
    // 重置
    handleReset() {
      this.ruleForm = { indexSource: '1' }
      // this.$refs.form.clearValidate()
    },
    selectSql() {
      this.$refs.SelectSqlRef.show()
    },
    // 确定
    handleSubmit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          if (this.isEdit) {
            this.ruleForm.id = this.id
          }
          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')
        }
      })
    },
    // 切换算法
    changeType(val) {
      this.ruleForm = { indexSource: val }
      // 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;
  }
  .sel-name {
    margin-top: 8px;font-size: 16px;
    color: #3763FF;
  }
  .sel-desc {
    margin-top: 8px;font-size: 16px;
    color: #333333
  }
  .select-model-list {
    display: flex;
    .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;
      span {
        margin-right: 16px;
      }
    }
  }
}
</style>