fu-hsi-web/src/views/ruleEngine/indexRule/components/EditRule.vue

<!--
 * @description: 编辑指标规则
 * @fileName: EditRule
 * @author: 17076
 * @date: 2024/6/14-上午10:43
 * @version: V1.0.0
-->

<template>
  <cs-drawer
    :drawer-option="drawerOption"
    @onReset="handleReset"
    @onSubmit="handleSubmit"
  >
    <div slot="content">
      <el-steps :active="activeStep" align-center>
        <el-step title="指标基础信息" description="设置指标名称及原子指标项目" />
        <el-step title="指标规则" description="模型按规则分析案件指标" />
      </el-steps>
      <el-form
        v-if="activeStep === 0"
        ref="form"
        :model="ruleForm"
        :rules="rules"
        label-width="90px"
        style="margin-top: 20px"
      >
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="指标名称" prop="name">
              <el-input v-model="ruleForm['name']" placeholder="请输入指标名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="指标简称" prop="shortName">
              <el-input v-model="ruleForm['shortName']" placeholder="请输入指标简称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="指标分数" prop="indexScore">
              <el-input v-model="ruleForm['indexScore']" placeholder="请输入指标分数" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="指标类型" prop="indexType">
              <el-select v-model="ruleForm['indexType']" placeholder="请选择指标类型" @change="handleChange">
                <el-option v-for="item in indexTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="案件类型" prop="caseType">
              <el-select v-model="ruleForm['caseType']" placeholder="请选择案件类型" multiple>
                <el-option v-for="item in caseTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="原子指标" prop="atomicIndexList">
              <el-button type="primary" @click="handleSelectAtomic">请选择</el-button>
              <!-- <span
                v-if="ruleForm['atomicIndexList'] && ruleForm['atomicIndexList'].length > 0"
                style="margin-left: 10px; font-size: 12px; color: #0A4DF0"
              >
                {{ `已选中${ruleForm['atomicIndexList'].length}项原子指标` }}
              </span> -->
              <div v-if="ruleForm['atomicIndexList'] && ruleForm['atomicIndexList'].length > 0" class="select_list">
                <div v-for="(item,index) in ruleForm['atomicIndexList']" :key="index" class="select_list_item">
                  <span>{{ item.name }}</span>
                  <i class="el-icon-circle-close  closed" style="margin-left: 12px;" @click="delItem(index)" />
                </div>

              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="指标说明" prop="remark">
              <el-input v-model="ruleForm['remark']" type="textarea" :rows="5" placeholder="请输入指标说明" />
            </el-form-item>
          </el-col>
        </el-row>
        <!--        <el-form-item label="判断逻辑" prop="judgeLogic">-->
        <!--          <template>-->
        <!--            <div class="flex-row">-->
        <!--              <el-select v-model="ruleForm['judgeLogic']" placeholder="请选择判断逻辑">-->
        <!--                <el-option-->
        <!--                  v-for="item in judgmentLogicOptions"-->
        <!--                  :key="item.value"-->
        <!--                  :label="item.label"-->
        <!--                  :value="item.value"-->
        <!--                />-->
        <!--              </el-select>-->
        <!--              <el-button type="primary" plain style="margin-left: 10px" @click="handleCustom">自定义</el-button>-->
        <!--            </div>-->
        <!--            <span style="color: #999999; font-size: 12px">支持原子指标的逻辑运算（and,or,not）,并可自定义指标关系</span>-->
        <!--          </template>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="指标规则" prop="indexRules">-->
        <!--          <el-checkbox-group v-model="ruleForm['indexRules']">-->
        <!--            <el-checkbox-->
        <!--              v-for="item in indexRulesOption"-->
        <!--              :key="item.value"-->
        <!--              :label="item.label"-->
        <!--              :true-label="1"-->
        <!--              :false-label="0"-->
        <!--            />-->
        <!--          </el-checkbox-group>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="必要证据" prop="necessaryEvidence">-->
        <!--          <el-select v-model="ruleForm['necessaryEvidence']" placeholder="请选择必要证据" multiple>-->
        <!--            <el-option v-for="item in evidenceOptions" :key="item.value" :label="item.label" :value="item.value" />-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
      </el-form>
      <div v-if="activeStep === 1">
        <p>{{ `[${indexTypeName}] ${ruleForm['name']}` }}</p>
        <custom-logic ref="custom" :is-change="isChange" :atomic-index-data="ruleForm['atomicIndexList']" :judge-logic="ruleForm['judgeLogic']" />
      </div>
      <!--原子指标选择-->
      <select-atomic ref="select" @submit="handleAtomicSubmit" />
    </div>
    <div slot="footer">
      <el-button type="primary" plain style="width: 150px" @click="handleReset">重 置</el-button>
      <el-button v-if="activeStep === 0" type="primary" style="width: 150px" @click="nextStep">下一步</el-button>
      <el-button v-if="activeStep === 1" type="primary" plain style="width: 150px" @click="lastStep">上一步</el-button>
      <el-button v-if="activeStep === 1" type="primary" style="width: 150px" @click="handleSubmit">确 定</el-button>
    </div>
  </cs-drawer>
</template>

<script>
import SelectAtomic from '@/views/ruleEngine/indexRule/components/SelectAtomic.vue'
import CustomLogic from '@/views/ruleEngine/indexRule/components/CustomLogic.vue'
import { addOrUpdIndex } from '@/api/indexRule'

export default {
  name: 'EditRule',
  components: { CustomLogic, SelectAtomic },
  data() {
    return {
      drawerOption: {
        show: false,
        width: '45%',
        title: '指标配置'
      },
      // 当前激活的步骤
      activeStep: 0,
      // 案件类型数据
      caseTypeOptions: JSON.parse(sessionStorage.getItem('case_type')),
      // 指标类型数据
      indexTypeOptions: JSON.parse(sessionStorage.getItem('index_type')),
      // 指标类型名称保存
      indexTypeName: '',
      // 必要证据
      evidenceOptions: [],
      // 判断逻辑
      judgmentLogicOptions: JSON.parse(sessionStorage.getItem('judge_logic')),
      // 指标规则数据
      indexRulesOption: [
        { label: '证据判断', value: 'evidenceJudge' },
        { label: '笔录判断', value: 'recordJudge' },
        { label: '外部数据', value: 'externalData' }
      ],
      // 规则配置表单
      ruleForm: {},
      rules: {
        name: [{ required: true, message: '指标名称不能为空!', trigger: 'blur' }],
        caseType: [{ required: true, message: '案件类型不能为空!', trigger: 'blur' }],
        indexType: [{ required: true, message: '指标类型不能为空!', trigger: 'blur' }],
        indexScore: [{ required: true, message: '指标分数不能为空!', trigger: 'blur' }, {
          pattern: /^-?\d+(\.\d+)?$/,
          message: '请输入正确格式',
          trigger: 'change'
        }],
        // indexRules: [{ required: true, message: '指标规则不能为空!', trigger: 'blur' }],
        atomicIndex: [{ required: true, message: '原子指标不能为空!', trigger: 'blur' }],
        judgeLogic: [{ required: true, message: '指标说明不能为空!', trigger: 'blur' }]
      },
      // 是否是编辑
      isEdit: false,
      // 是否修改过
      isChange: false
    }
  },
  methods: {
    // 显示弹窗
    show(data, isEdit) {
      this.isEdit = isEdit
      this.drawerOption.show = true
      this.isChange = false
      this.$nextTick(() => {
        const _this = this
        _this.ruleForm = isEdit ? JSON.parse(JSON.stringify(data)) : {}
        if (isEdit && _this.$baseLodash.isString(_this.ruleForm['caseType'])) {
          _this.ruleForm.caseType = _this.ruleForm.caseType.split(',')
        }
        if (_this.isEdit) {
          _this.indexTypeName = _this.ruleForm.indexTypeName
        }
      })
    },
    delItem(index) {
      this.ruleForm['atomicIndexList'].splice(index, 1)
      this.isChange = true
    },
    // 指标类型选择
    handleChange(val) {
      this.indexTypeName = this.indexTypeOptions.find(item => item.value === val).label
    },
    // 选择原子指标
    handleSelectAtomic() {
      this.$refs.select.show(this.ruleForm['atomicIndexList'])
    },
    // 原子指标选择
    handleAtomicSubmit(data) {
      this.$refs.form.clearValidate('atomicIndexList')
      this.$set(this.ruleForm, 'atomicIndexList', data)
      this.isChange = true
    },
    // 重置
    handleReset() {
      this.$refs.form.resetFields()
      this.$refs.form.clearValidate()
    },
    // 下一步
    nextStep() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.activeStep = 1
        }
      })
    },
    // 上一步
    lastStep() {
      this.activeStep = 0
    },
    // 确定
    async handleSubmit() {
      // 拿到对应原子指标逻辑
      const logicData = this.$refs.custom.validate()
      if (logicData) {
        this.$set(this.ruleForm, 'judgeLogic', JSON.stringify(logicData))
      }
      if (this.$baseLodash.isArray(this.ruleForm['caseType'])) {
        this.ruleForm['caseType'] = this.ruleForm['caseType'].join(',')
      }
      const { code, msg } = await addOrUpdIndex(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')
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep {
  .el-select {
    width: 100%;
  }
}
.select_list {
  display: flex;
  flex-direction: column;
  .select_list_item {
    display: flex;
    align-items: center;
    .closed {
      cursor: pointer;
    }
  }
}
</style>