392 lines
14 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!--
* @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> -->
<div class="step_list">
<div class="step_item">
<div class="header">
<img src="../../../../assets/common/step1.png" alt="">
<span class="act_title">指标基础信息</span>
</div>
<div class="desc">设置指标名称及原子指标项目</div>
</div>
<div :class="[activeStep > 0 ?'act-step-line':'step-line']">
<span>>></span>
</div>
<div class="step_item">
<div class="header">
<img v-if="activeStep===0" src="../../../../assets/common/step2.png" alt="">
<img v-if="activeStep===1" src="../../../../assets/common/act_step2.png" alt="">
<span :class="[activeStep > 0 ?'act_title':'title']">指标规则</span>
</div>
<div class="desc">模型按规则分析案件指标</div>
</div>
</div>
<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="赋分模型">
<el-input v-model="modelName" readonly />
</el-form-item>
</el-col>
<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="24">
<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.id" :label="item.modelName" :value="item.id" />
</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="indexRule">-->
<!-- <template>-->
<!-- <div class="flex-row">-->
<!-- <el-select v-model="ruleForm['indexRule']" 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" :atomic-index-data="ruleForm['atomicIndexList']" :index-rule="ruleForm['indexRule']" />
</div>
<!--原子指标选择-->
<select-atomic ref="select" @submit="handleAtomicSubmit" />
</div>
<div slot="footer">
<el-button v-if="!isEdit" type="primary" plain style="width: 150px" @click="handleReset">重 置</el-button>
<el-button v-if="isEdit" type="primary" plain style="width: 150px" @click="closed">取 消</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'
import { queryModelList } from '@/api/indexRule/index'
export default {
name: 'EditRule',
components: { CustomLogic, SelectAtomic },
data() {
return {
drawerOption: {
show: false,
width: '1000px',
title: '指标配置'
},
// 当前激活的步骤
activeStep: 0,
// 案件类型数据
caseTypeOptions: [],
// 指标类型数据
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' }],
indexRule: [{ required: true, message: '指标说明不能为空!', trigger: 'blur' }]
},
modelName: '',
modelId: '',
// 是否是编辑
isEdit: false
// 是否修改过
}
},
methods: {
// 显示弹窗
show(data, isEdit, item) {
if (item.id) {
this.modelName = item.modelName
this.modelId = item.id
}
this.activeStep = 0
this.isEdit = isEdit
this.drawerOption.show = true
this.getModelList()
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
}
})
},
getModelList() {
queryModelList({}, 1, 9999).then(res => {
if (res.code === 200) {
this.caseTypeOptions = res.data.records
}
})
},
delItem(index) {
this.ruleForm['atomicIndexList'].splice(index, 1)
},
// 指标类型选择
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)
},
// 重置
handleReset() {
this.activeStep = 0
this.$nextTick(() => {
this.$refs.form.resetFields()
this.$refs.form.clearValidate()
})
},
// 下一步
nextStep() {
this.$refs.form.validate(valid => {
if (valid) {
this.activeStep = 1
}
})
},
// 上一步
lastStep() {
this.activeStep = 0
},
closed() {
this.drawerOption.show = false
},
// 确定
async handleSubmit() {
// 拿到对应原子指标逻辑
const params = this.$refs.custom.validate()
for (const item of params.ruleConditionGroupList) {
for (const items of item.ruleConditionList) {
for (const data of items.operandUnitList) {
data.leftOperand.atomicIndexId = items.atomicIndexId
}
}
}
// const params = {
// ruleConditionGroupList,
// groupLogic: ruleConditionGroupList[0].groupLogic
// }
console.log(params)
if (params.ruleConditionGroupList) {
this.$set(this.ruleForm, 'indexRule', params)
}
// if (this.$baseLodash.isArray(this.ruleForm['caseType'])) {
// this.ruleForm['caseType'] = this.ruleForm['caseType'].join(',')
// }
this.ruleForm['caseType'] = this.modelId
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%;
}
}
.step_list {
display: flex;
justify-content: center;
align-items: center;
.step_item {
display: flex;
flex-direction: column;
margin-right: 8px;
.header {
display: flex;
margin-bottom: 8px;
.act_title {
font-size: 20px;
color: #333333;
}
.title {
color: #999999;
font-size: 20px;
}
}
.desc {
font-size: 14px;
color: #999999;
}
img {
width: 24px;
height: 24px;
margin-right: 8px;
}
}
.step-line {
width: 137px;
height: 2px;
border-top: 2px dashed #999999;
display: flex;
position: relative;
margin-right: 42px;
span {
position: absolute;
right: -24px;
top: -11px;
color: #999999;
font-size: 16px;
}
}
.act-step-line {
width: 137px;
height: 2px;
border-top: 2px dashed #3763FF;
display: flex;
position: relative;
margin-right: 42px;
span {
position: absolute;
right: -24px;
top: -11px;
color: #3763FF;
font-size: 16px;
}
}
}
.select_list {
display: flex;
flex-direction: column;
.select_list_item {
display: flex;
align-items: center;
.closed {
cursor: pointer;
}
}
}
</style>