feat:赋分模型页面开发
parent
af5dccf1f1
commit
f3eb76ac94
Binary file not shown.
|
After Width: | Height: | Size: 509 B |
Binary file not shown.
|
After Width: | Height: | Size: 469 B |
Binary file not shown.
|
After Width: | Height: | Size: 515 B |
@ -0,0 +1,89 @@
|
||||
|
||||
<template>
|
||||
<cs-drawer
|
||||
:drawer-option="drawerOption"
|
||||
@onReset="handleReset"
|
||||
@onSubmit="handleSubmit"
|
||||
>
|
||||
<template slot="content">
|
||||
<div class="AddModel">
|
||||
<el-form ref="myForm" :model="ruleForm" :rules="rules" label-width="120px">
|
||||
<el-form-item label="模型名称" prop="modelName">
|
||||
<el-input v-model="ruleForm['modelName']" placeholder="请输入模型名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="模型说明" prop="modelDesc">
|
||||
<el-input v-model="ruleForm['modelDesc']" type="textarea" :rows="5" placeholder="请输入模型说明" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规则说明" prop="scoringRules">
|
||||
<el-input v-model="ruleForm['scoringRules']" type="textarea" :rows="5" placeholder="请输入规则说明" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</cs-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { saveScoringModel } from '@/api/indexRule'
|
||||
export default {
|
||||
name: 'AddModel',
|
||||
data() {
|
||||
return {
|
||||
drawerOption: {
|
||||
show: false,
|
||||
title: '案件模型',
|
||||
isClosed: true,
|
||||
width: '40%'
|
||||
},
|
||||
ruleForm: {
|
||||
modelName: '',
|
||||
modelDesc: '',
|
||||
scoringRules: ''
|
||||
},
|
||||
rules: {
|
||||
modelName: [{ required: true, message: '请输入模型名称', trigger: 'change' }],
|
||||
modelDesc: [{ required: true, message: '请输入模型说明', trigger: 'change' }],
|
||||
scoringRules: [{ required: true, message: '请输入规则说明', trigger: 'change' }],
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 显示弹窗
|
||||
show() {
|
||||
this.drawerOption.show = true
|
||||
this.ruleForm = {
|
||||
modelName: '',
|
||||
modelDesc: '',
|
||||
scoringRules: ''
|
||||
}
|
||||
},
|
||||
// 重置
|
||||
handleReset() {
|
||||
this.$refs.myForm.resetFields()
|
||||
this.$refs.myForm.clearValidate()
|
||||
},
|
||||
handleSubmit() {
|
||||
this.$refs.myForm.validate(valid => {
|
||||
if (valid) {
|
||||
const loading = this.$baseLoading(1, '保存中...')
|
||||
saveScoringModel(this.ruleForm).then(res => {
|
||||
loading.close()
|
||||
if (res.code === 200) {
|
||||
this.drawerOption.show = false
|
||||
this.$emit('addOk')
|
||||
this.$baseMessage.success('新增成功')
|
||||
}
|
||||
}).catch(() => { loading.close() })
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.AddModel {
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,511 @@
|
||||
|
||||
<template>
|
||||
<cs-drawer
|
||||
:drawer-option="drawerOption"
|
||||
>
|
||||
<template slot="content">
|
||||
<div ref="logic" class="logic-content">
|
||||
<div v-for="(item, index) in ruleConditionGroupList" :key="index">
|
||||
<div v-if="index !== 0" class="flex-row group-logic-content">
|
||||
<i class="active-point" />
|
||||
<el-radio-group v-model="groupLogic" class="group-logic">
|
||||
<el-radio-button
|
||||
v-for="logic in logicSymbolOptions"
|
||||
:key="logic.value"
|
||||
:label="logic.value"
|
||||
>
|
||||
{{ logic.label }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="group">
|
||||
<span class="group-title">影响案件指标的原子指标项目</span>
|
||||
<el-radio-group v-model="item.rowLogic" disabled class="row-logic">
|
||||
<el-radio-button
|
||||
v-for="logic in logicSymbolOptions"
|
||||
:key="logic.value"
|
||||
:label="logic.value"
|
||||
>
|
||||
{{ logic.label }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
<div v-for="(subItem, subIndex) in item.ruleConditionList" :key="subIndex">
|
||||
<div class="flex-row row-content">
|
||||
<span class="row-line" />
|
||||
<el-select
|
||||
v-model="subItem.atomicIndexId"
|
||||
placeholder="请选择"
|
||||
disabled
|
||||
style="width: 300px"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in atomicIndexData"
|
||||
:key="option.id"
|
||||
:label="option.name"
|
||||
:value="option.id"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="subItem.relationalSymbol"
|
||||
placeholder="请选择"
|
||||
disabled
|
||||
style="width: 150px;margin-left: 20px"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in symbolOptions"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
<div v-if="subItem.relationalSymbol==='3' && subItem.indexSource ==='3'">
|
||||
<el-input v-model="modelText" style="width: 80px;margin-left: 20px" readonly />
|
||||
<el-select
|
||||
v-model="subItem.operator"
|
||||
placeholder="请选择"
|
||||
disabled
|
||||
style="width: 100px;margin-left: 20px"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in operatorList"
|
||||
:key="option"
|
||||
:label="option"
|
||||
:value="option"
|
||||
/>
|
||||
</el-select>
|
||||
<el-input-number v-model="subItem.value" disabled style="width: 150px;margin-left: 20px" :min="1" />
|
||||
<!-- <el-input v-model="subItem.value" type="number" /> -->
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="subItem.indexSource === '5'" class="row-sku">
|
||||
<div class="row-sku-top">
|
||||
|
||||
<el-radio-group v-model="subItem.logic" disabled class="group-logic">
|
||||
<el-radio-button
|
||||
v-for="logic in logicSymbolOptions"
|
||||
:key="logic.value"
|
||||
:label="logic.value"
|
||||
>
|
||||
{{ logic.label }}
|
||||
</el-radio-button>
|
||||
</el-radio-group></div>
|
||||
<div v-for="(items,i) in subItem.operandUnitList" :key="i">
|
||||
<div class="flex-row row-content">
|
||||
<!-- <span class="row-line" /> -->
|
||||
|
||||
<el-select
|
||||
v-model="items.leftOperand.propertyKey"
|
||||
placeholder="请选择"
|
||||
disabled
|
||||
style="width: 200px"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in atomicIndexAttributeScope[subItem.atomicIndexId]"
|
||||
:key="option.value"
|
||||
:label="option.value"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-if="items.leftOperand.propertyKey"
|
||||
v-model="items.leftOperand.aggregateType"
|
||||
placeholder="请选择"
|
||||
disabled
|
||||
style="width: 100px;margin-left: 20px;"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in getOptionList(items.leftOperand.propertyKey,subItem.atomicIndexId,'aggregateList')"
|
||||
:key="option.key"
|
||||
:label="option.value"
|
||||
:value="option.key"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-if="items.leftOperand.propertyKey"
|
||||
v-model="items.operator"
|
||||
placeholder="请选择"
|
||||
disabled
|
||||
style="width: 100px;margin-left: 20px;"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in getOptionList(items.leftOperand.propertyKey,subItem.atomicIndexId,'operatorList')"
|
||||
:key="option"
|
||||
:label="option"
|
||||
:value="option"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-if="items.leftOperand.propertyKey"
|
||||
v-model="items.rightOperand.operandType"
|
||||
placeholder="请选择"
|
||||
disabled
|
||||
style="width: 100px;margin-left: 20px;"
|
||||
>
|
||||
<el-option
|
||||
key="6"
|
||||
label="值"
|
||||
value="6"
|
||||
/> <el-option
|
||||
|
||||
key="5"
|
||||
label="原子指标"
|
||||
value="5"
|
||||
/>
|
||||
</el-select>
|
||||
<div v-if="items.rightOperand.operandType ==='6'" style="margin-left: 20px;">
|
||||
<el-input v-if="getAttrValueType(items.leftOperand.propertyKey,subItem.atomicIndexId) ==='1'" v-model="items.rightOperand.value" readonly placeholder="请输入" />
|
||||
<el-input v-if="getAttrValueType(items.leftOperand.propertyKey,subItem.atomicIndexId) ==='2'" v-model="items.rightOperand.value" type="number" placeholder="请输入" />
|
||||
<el-date-picker
|
||||
v-if="getAttrValueType(items.leftOperand.propertyKey,subItem.atomicIndexId) ==='3'"
|
||||
v-model="items.rightOperand.value"
|
||||
disabled
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
/>
|
||||
</div>
|
||||
<el-select
|
||||
v-if="items.rightOperand.operandType ==='5'"
|
||||
v-model="items.rightOperand.atomicIndexId"
|
||||
style="margin-left: 20px;width: 200px;"
|
||||
placeholder="请选择"
|
||||
disabled
|
||||
>
|
||||
<el-option
|
||||
v-for="option in atomicIndexData"
|
||||
:key="option.id"
|
||||
:label="option.name"
|
||||
:value="option.id"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-if="items.rightOperand.operandType ==='5'"
|
||||
v-model="items.rightOperand.propertyKey"
|
||||
placeholder="请选择"
|
||||
disabled
|
||||
style="width: 150px;margin-left: 20px;"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in atomicIndexAttributeScope[items.rightOperand.atomicIndexId]"
|
||||
:key="option.value"
|
||||
:label="option.value"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</cs-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixin from '@/views/mixin'
|
||||
import { listAtomicIndexAttributeScope } from '@/api/indexRule'
|
||||
export default {
|
||||
name: 'DetailsModel',
|
||||
mixins: [mixin],
|
||||
data() {
|
||||
return {
|
||||
drawerOption: {
|
||||
show: false,
|
||||
hiddenFooter: true,
|
||||
title: '详情',
|
||||
isClosed: true,
|
||||
width: '40%'
|
||||
},
|
||||
atomicIndexData: [],
|
||||
indexRule: undefined,
|
||||
// 原子指标逻辑数据
|
||||
ruleConditionGroupList: [
|
||||
{ rowLogic: '2', ruleConditionList: [{ atomicIndexId: '', indexSource: '', logic: '2', relationalSymbol: '', operator: '>', value: '', operandUnitList: [] }] }
|
||||
],
|
||||
groupLogic: '2',
|
||||
modelText: '数量',
|
||||
atomicIndexAttributeScope: {},
|
||||
operatorList: ['>', '>=', '<', '<=', '=', '!='],
|
||||
// 逻辑运算符
|
||||
logicSymbolOptions: JSON.parse(sessionStorage.getItem('logic_symbol'))
|
||||
// 关系数据
|
||||
// symbolOptions: JSON.parse(sessionStorage.getItem('judge_result'))
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
symbolOptions() {
|
||||
const list = JSON.parse(sessionStorage.getItem('judge_result'))
|
||||
// eslint-disable-next-line no-const-assign
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
if (list[i].label === '未知') {
|
||||
list.splice(i, 1)
|
||||
}
|
||||
}
|
||||
return list
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
show(row) {
|
||||
this.atomicIndexData = row.atomicIndexList
|
||||
this.indexRule = row.indexRule
|
||||
this.drawerOption.show = true
|
||||
this.init()
|
||||
},
|
||||
init() {
|
||||
this.getAtomicIndexAttributeScope()
|
||||
if (!this.indexRule.ruleConditionGroupList || this.indexRule.ruleConditionGroupList.length === 0) return
|
||||
this.groupLogic = this.indexRule.groupLogic
|
||||
this.ruleConditionGroupList = this.indexRule.ruleConditionGroupList
|
||||
this.ruleConditionGroupList.map((item) => {
|
||||
item.ruleConditionList.map((subItem) => {
|
||||
if (!this.getListValueFlag(subItem.atomicIndexId)) {
|
||||
subItem.atomicIndexId = ''
|
||||
subItem.indexSource = ''
|
||||
subItem.operandUnitList = []
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 获取指标类型
|
||||
getIndexSource(val) {
|
||||
for (const item of this.atomicIndexData) {
|
||||
if (val === item.id) {
|
||||
return item.indexSource
|
||||
}
|
||||
}
|
||||
},
|
||||
// 原子指标属性
|
||||
async getAtomicIndexAttributeScope() {
|
||||
const list = []
|
||||
for (const item of this.atomicIndexData) {
|
||||
list.push(item.id)
|
||||
}
|
||||
const res = await listAtomicIndexAttributeScope(list)
|
||||
if (res.code === 200) {
|
||||
this.atomicIndexAttributeScope = res.data
|
||||
}
|
||||
},
|
||||
getAttrValueType(value, atomicIndexId) {
|
||||
if (value && atomicIndexId) {
|
||||
const list = this.atomicIndexAttributeScope[atomicIndexId]
|
||||
for (const item of list) {
|
||||
if (item.value === value) {
|
||||
return item.valueType
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 获取属性下拉
|
||||
getOptionList(value, atomicIndexId, type) {
|
||||
if (value && atomicIndexId) {
|
||||
const list = this.atomicIndexAttributeScope[atomicIndexId]
|
||||
for (const item of list) {
|
||||
if (item.value === value) {
|
||||
return item[type]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
selectAtomic(val, subItem) {
|
||||
this.getAtomicIndexAttributeScope(val)
|
||||
subItem.indexSource = this.getIndexSource(val)
|
||||
this.$set(subItem, 'relationalSymbol', '')
|
||||
this.$set(subItem, 'operator', '')
|
||||
this.$set(subItem, 'value', '')
|
||||
},
|
||||
selectRelational(val, subItem) {
|
||||
if (val === '3' && subItem.indexSource === '3') {
|
||||
this.$set(subItem, 'operator', '>')
|
||||
}
|
||||
if (val === '4' && subItem.indexSource === '3') {
|
||||
this.$set(subItem, 'operator', '')
|
||||
this.$set(subItem, 'value', '')
|
||||
}
|
||||
},
|
||||
// 选择左边属性
|
||||
selectPropertyKey(val, items, id) {
|
||||
items.leftOperand.valueType = this.getAttrValueType(val, id)
|
||||
this.$set(items.leftOperand, 'aggregateType', '')
|
||||
this.$set(items, 'rightOperand', {
|
||||
atomicIndexId: '',
|
||||
value: '',
|
||||
valueType: '',
|
||||
operandType: '',
|
||||
propertyKey: ''
|
||||
})
|
||||
this.$set(items, 'operator', '')
|
||||
},
|
||||
// 添加属性
|
||||
addOperandUnitList(index, subIndex) {
|
||||
this.ruleConditionGroupList[index].ruleConditionList[subIndex].operandUnitList.push({
|
||||
leftOperand: {
|
||||
atomicIndexId: '',
|
||||
operandType: '5'
|
||||
},
|
||||
rightOperand: {
|
||||
atomicIndexId: '',
|
||||
value: '',
|
||||
valueType: '',
|
||||
operandType: '',
|
||||
propertyKey: ''
|
||||
}
|
||||
})
|
||||
},
|
||||
// 添加
|
||||
handleAdd() {
|
||||
this.gridOptions.data.push({
|
||||
atomicIndexName: '',
|
||||
relationalSymbol: '',
|
||||
atomicIndexName2: '',
|
||||
indexResult: ''
|
||||
})
|
||||
},
|
||||
getListValueFlag(val) {
|
||||
let flag = false
|
||||
for (const item of this.atomicIndexData) {
|
||||
if (item.id === val) {
|
||||
flag = true
|
||||
}
|
||||
}
|
||||
return flag
|
||||
},
|
||||
// 添加单个条件
|
||||
handleAddRow(val) {
|
||||
val.ruleConditionList.push({
|
||||
atomicIndexId: '', indexSource: '', rowLogic: '', relationalSymbol: '', operator: '>', value: '', operandUnitList: []
|
||||
})
|
||||
},
|
||||
// 添加条件组
|
||||
handleAddGroup(index) {
|
||||
if (this.ruleConditionGroupList.length > 1) return
|
||||
this.ruleConditionGroupList.splice(index, 0, {
|
||||
rowLogic: '2', ruleConditionList: [{ atomicIndexId: '', indexSource: '', rowLogic: '', relationalSymbol: '', operator: '>', value: '', operandUnitList: [] }]
|
||||
})
|
||||
},
|
||||
// 删除条件组
|
||||
handleDelGroup(item) {
|
||||
if (this.ruleConditionGroupList.length === 1) {
|
||||
this.$baseMessage.error('至少保留一条数据！')
|
||||
return
|
||||
}
|
||||
this.ruleConditionGroupList.splice(this.ruleConditionGroupList.indexOf(item), 1)
|
||||
},
|
||||
// 删除单个原子指标
|
||||
handleRowClick(item, subItem) {
|
||||
item.ruleConditionList.splice(item.ruleConditionList.indexOf(subItem), 1)
|
||||
},
|
||||
delItem(item, subItem) {
|
||||
item.operandUnitList.splice(item.operandUnitList.indexOf(subItem), 1)
|
||||
},
|
||||
// 验证是否可用
|
||||
validate() {
|
||||
let valid = true
|
||||
this.ruleConditionGroupList.map((item) => {
|
||||
item.ruleConditionList.map((subItem) => {
|
||||
if (!subItem.atomicIndexId || !subItem.relationalSymbol) {
|
||||
valid = false
|
||||
}
|
||||
})
|
||||
})
|
||||
if (valid) {
|
||||
return {
|
||||
groupLogic: this.groupLogic,
|
||||
ruleConditionGroupList: this.ruleConditionGroupList
|
||||
}
|
||||
} else {
|
||||
this.$baseMessage.error('请选择原子指标和关系符号')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.logic-content {
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 20px;
|
||||
.group {
|
||||
border: 1px dashed #999999;
|
||||
position: relative;
|
||||
padding-bottom: 40px;
|
||||
.group-title {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 10px;
|
||||
background: #ffffff;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.row-logic {
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: 230px;
|
||||
background: #ffffff;
|
||||
}
|
||||
.row-content {
|
||||
margin: 30px 0 16px 0;
|
||||
align-items: center;
|
||||
.row-line {
|
||||
width: 50px;
|
||||
height: 1px;
|
||||
border-bottom: 1px dashed #999999;
|
||||
}
|
||||
}
|
||||
.row-button {
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
left: 30px;
|
||||
}
|
||||
.group-button {
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
left: 170px;
|
||||
}
|
||||
.group-del {
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
left: 310px;
|
||||
}
|
||||
.row-sku {
|
||||
background: rgba(55,99,255,0.05);
|
||||
margin: 0 42px;
|
||||
padding: 18px;
|
||||
.row-sku-top {
|
||||
// padding-left: 50px;
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #3763FF;
|
||||
margin-left: 4px;
|
||||
cursor: pointer;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.group-logic-content {
|
||||
padding: 30px 0;
|
||||
border-left: 1px dashed #999999;
|
||||
position: relative;
|
||||
.active-point {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: $base-color-default;
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: 45px;
|
||||
}
|
||||
.group-logic {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,104 @@
|
||||
|
||||
<template>
|
||||
<cs-drawer
|
||||
:drawer-option="drawerOption"
|
||||
@onReset="handleReset"
|
||||
@onSubmit="handleSubmit"
|
||||
>
|
||||
<template slot="content">
|
||||
<div class="EditModel">
|
||||
<el-form ref="myForm" :model="ruleForm" :rules="rules" label-width="120px">
|
||||
<el-form-item label="模型名称" prop="modelName">
|
||||
<el-input v-model="ruleForm['modelName']" placeholder="请输入模型名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="模型说明" prop="modelDesc">
|
||||
<el-input v-model="ruleForm['modelDesc']" type="textarea" :rows="5" placeholder="请输入模型说明" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规则说明" prop="scoringRules">
|
||||
<el-input v-model="ruleForm['scoringRules']" type="textarea" :rows="5" placeholder="请输入规则说明" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</cs-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { updateScoringModel,copyScoringModel } from '@/api/indexRule'
|
||||
export default {
|
||||
name: 'EditModel',
|
||||
data() {
|
||||
return {
|
||||
drawerOption: {
|
||||
show: false,
|
||||
isClosed: true,
|
||||
title: '案件模型',
|
||||
width: '40%'
|
||||
},
|
||||
ruleForm: {
|
||||
modelName: '',
|
||||
modelDesc: '',
|
||||
scoringRules: ''
|
||||
},
|
||||
isCopy: false,
|
||||
rules: {
|
||||
modelName: [{ required: true, message: '请输入模型名称', trigger: 'change' }],
|
||||
modelDesc: [{ required: true, message: '请输入模型说明', trigger: 'change' }],
|
||||
scoringRules: [{ required: true, message: '请输入规则说明', trigger: 'change' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 显示弹窗
|
||||
show(data, type) {
|
||||
this.drawerOption.show = true
|
||||
if (type === 'copy') {
|
||||
this.isCopy = true
|
||||
} else {
|
||||
this.isCopy = false
|
||||
}
|
||||
this.ruleForm = {
|
||||
...data
|
||||
}
|
||||
},
|
||||
// 重置
|
||||
handleReset() {
|
||||
this.$refs.myForm.resetFields()
|
||||
this.$refs.myForm.clearValidate()
|
||||
},
|
||||
handleSubmit() {
|
||||
this.$refs.myForm.validate(valid => {
|
||||
if (valid) {
|
||||
const loading = this.$baseLoading(1, '保存中...')
|
||||
if (this.isCopy) {
|
||||
copyScoringModel(this.ruleForm).then(res => {
|
||||
loading.close()
|
||||
if (res.code === 200) {
|
||||
this.drawerOption.show = false
|
||||
this.$emit('editOk')
|
||||
this.$baseMessage.success('复制成功')
|
||||
}
|
||||
}).catch(() => { loading.close() })
|
||||
} else {
|
||||
updateScoringModel(this.ruleForm).then(res => {
|
||||
loading.close()
|
||||
if (res.code === 200) {
|
||||
this.drawerOption.show = false
|
||||
this.$emit('editOk')
|
||||
this.$baseMessage.success('编辑成功')
|
||||
}
|
||||
}).catch(() => { loading.close() })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.EditModel {
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,391 @@
|
||||
|
||||
<template>
|
||||
<div class="scoringModel">
|
||||
<div class="case_list">
|
||||
<div v-for="(item,index) in caseList" :key="index" class="case_item" :class="[selectId === item.id ?'actived':'']" @click="selectCase(item)">
|
||||
<span style="width: 180px;">{{ item.modelName.slice(0,8) }}</span>
|
||||
<el-popover
|
||||
:ref="`popover-${index}`"
|
||||
append-to-body
|
||||
placement="bottom"
|
||||
width="80"
|
||||
trigger="click"
|
||||
>
|
||||
<template #reference>
|
||||
<div :id="'popover-btn-' + index" class="circle_list">
|
||||
<span class="circle" />
|
||||
<span class="circle" />
|
||||
<span class="circle" />
|
||||
</div>
|
||||
</template>
|
||||
<div class="scoringModel-operate">
|
||||
<div class="operate-item" @click="editModel(item)">
|
||||
<img src="../../../assets/common/edit.png" alt="">
|
||||
<span>编辑</span>
|
||||
</div>
|
||||
<div class="operate-item" @click="copyModel(item)">
|
||||
<img src="../../../assets/common/copy.png" alt="">
|
||||
<span>复制</span>
|
||||
</div>
|
||||
<div class="operate-item" @click="delModel(item)">
|
||||
<img src="../../../assets/common/del.png" alt="">
|
||||
<span>删除</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="add_btn" @click="addModel">
|
||||
<i class="el-icon-circle-plus-outline" style="margin-right: 8px;" />
|
||||
<span>新增</span>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="htmlContent" class="content">
|
||||
<cs-search title="赋分模型" :data="searchData" :span="6" direction="row" @onSearch="onSearch" @getData="onSearch" />
|
||||
<div class="index-content">
|
||||
<div class="header">
|
||||
<el-radio-group v-model="type" size="large" @change="handleChange">
|
||||
<el-radio-button v-for="(item,index) in indexTypeList" :key="index" :label="item.value">{{ item.label }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-button type="primary" icon="el-icon-circle-plus-outline" style="position: absolute;right: 24px;top: 12px;" @click="handleAdd">新增</el-button>
|
||||
<vxe-grid v-bind="gridOptions" style="margin-top: 20px">
|
||||
<template #operate="{row}">
|
||||
<el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
|
||||
<el-button type="text" icon="el-icon-edit" title="编辑" @click="handleEdit(row)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip class="item" effect="dark" content="删除" placement="top-start">
|
||||
<el-button type="text" icon="el-icon-delete" style="color: red" title="删除" @click="handleDel(row)" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<template #name="{row}">
|
||||
<el-link type="primary" @click="opendetails(row)">{{ row.name }}</el-link>
|
||||
</template>
|
||||
</vxe-grid>
|
||||
<div style="text-align: center">
|
||||
<cs-page
|
||||
:page.sync="queryForm.page"
|
||||
:limit.sync="queryForm.size"
|
||||
:total="queryForm.total"
|
||||
@pagination="fetchData"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="main-content">
|
||||
|
||||
<div class="details">
|
||||
1111
|
||||
<div class="contract">
|
||||
<i class="el-icon-d-arrow-right contract-icon" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
<AddModel ref="AddModelRef" @addOk="getModelList" />
|
||||
<EditModel ref="EditModelRef" @editOk="getModelList" />
|
||||
<DetailsModel ref="DetailsModelRef" />
|
||||
<!--编辑弹窗-->
|
||||
<edit-rule ref="edit" @reloadData="fetchData" />
|
||||
<!--变更弹窗-->
|
||||
<change-rules ref="change" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixin from '@/views/mixin'
|
||||
import AddModel from './compontents/AddModel.vue'
|
||||
import EditModel from './compontents/EditModel.vue'
|
||||
import DetailsModel from './compontents/DetailsModel.vue'
|
||||
import EditRule from '@/views/ruleEngine/indexRule/components/EditRule.vue'
|
||||
import ChangeRules from '@/views/ruleEngine/indexRule/components/ChangeRules.vue'
|
||||
import { queryModelList, queryIndexData, deleteModelIndex, deleteScoringModel } from '@/api/indexRule/index'
|
||||
export default {
|
||||
name: 'ScoringModel',
|
||||
components: {
|
||||
AddModel,
|
||||
ChangeRules,
|
||||
EditRule,
|
||||
EditModel,
|
||||
DetailsModel
|
||||
},
|
||||
mixins: [mixin],
|
||||
data() {
|
||||
return {
|
||||
caseList: [
|
||||
],
|
||||
dialogVisible: false,
|
||||
indexType: '',
|
||||
selectId: '',
|
||||
indexTypeList: [
|
||||
{
|
||||
label: '共性指标',
|
||||
value: '1'
|
||||
},
|
||||
{
|
||||
label: '入罪指标',
|
||||
value: '2'
|
||||
},
|
||||
{
|
||||
label: '出罪指标',
|
||||
value: '3'
|
||||
}
|
||||
],
|
||||
// 筛选数据
|
||||
searchData: [
|
||||
{ label: '指标名称', model: 'name', type: 'input' },
|
||||
{ label: '原子指标', model: 'atomicIndexName', type: 'input' }
|
||||
],
|
||||
modelName: '',
|
||||
|
||||
type: '',
|
||||
// 表格配置
|
||||
gridOptions: {
|
||||
...mixin.data().gridOptions,
|
||||
columns: [
|
||||
{ title: '序号', type: 'seq', width: 80 },
|
||||
{ title: '指标名称', field: 'name', slots: { default: 'name' }, align: 'left' },
|
||||
{ title: '指标类别', field: 'indexTypeName', width: '150px' },
|
||||
{ title: '指标分数', field: 'indexScore', width: '150px', sortable: true },
|
||||
{ title: '原子指标数量', field: 'atomicIndexNum', width: '150px' },
|
||||
{ title: '最新时间', field: 'updateTime', width: '150px' },
|
||||
{ title: '操作', slots: { default: 'operate' }, width: '150px' }
|
||||
],
|
||||
data: []
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getModelList()
|
||||
this.tableHeight(400)
|
||||
},
|
||||
methods: {
|
||||
// 删除
|
||||
handleDel(row) {
|
||||
this.$baseConfirm('确定要删除吗?', null, async() => {
|
||||
const { code, msg } = await deleteModelIndex(row.id)
|
||||
code === 200 ? this.$baseMessage.success(msg || '删除成功!') : this.$baseMessage.error(msg || '删除失败!')
|
||||
this.fetchData()
|
||||
})
|
||||
},
|
||||
addModel() {
|
||||
this.$refs.AddModelRef.show()
|
||||
},
|
||||
getModelList() {
|
||||
queryModelList({}, 1, 9999).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.caseList = res.data.records
|
||||
if (this.caseList.length > 0) {
|
||||
this.selectCase(this.caseList[0])
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 数据查询
|
||||
fetchData() {
|
||||
queryIndexData({ ...this.searchFormData, caseType: this.selectId, indexType: this.indexType }, this.queryForm.page, this.queryForm.size).then(res => {
|
||||
this.gridOptions.data = res.data.result
|
||||
this.queryForm.total = res.data.total
|
||||
})
|
||||
},
|
||||
// 新增
|
||||
handleAdd() {
|
||||
this.$refs.edit.show(undefined, false, this.modelInfo)
|
||||
},
|
||||
// 变更
|
||||
handleChange(val) {
|
||||
this.indexType = val
|
||||
this.fetchData()
|
||||
},
|
||||
// 编辑
|
||||
handleEdit(row) {
|
||||
this.$refs.edit.show(row, true, this.modelInfo)
|
||||
},
|
||||
// 选择模型类型
|
||||
selectCase(item) {
|
||||
this.selectId = item.id
|
||||
this.modelInfo = {
|
||||
modelName: item.modelName,
|
||||
id: item.id
|
||||
}
|
||||
this.fetchData()
|
||||
},
|
||||
// 编辑模型
|
||||
editModel(item) {
|
||||
this.$refs.EditModelRef.show(item)
|
||||
},
|
||||
// 删除模型
|
||||
delModel(item) {
|
||||
this.$baseConfirm('确定要删除吗?', null, async() => {
|
||||
const { code, msg } = await deleteScoringModel({ id: item.id })
|
||||
code === 200 ? this.$baseMessage.success(msg || '删除成功!') : this.$baseMessage.error(msg || '删除失败!')
|
||||
this.getModelList()
|
||||
})
|
||||
},
|
||||
// 复制模型
|
||||
copyModel(item) {
|
||||
this.$refs.EditModelRef.show(item, 'copy')
|
||||
},
|
||||
opendetails(row) {
|
||||
this.$refs.DetailsModelRef.show(row)
|
||||
},
|
||||
// 筛选
|
||||
onSearch(data, callback) {
|
||||
this.searchFormData = Object.assign({}, data)
|
||||
this.queryForm.page = 1
|
||||
this.fetchData()
|
||||
if (callback) callback(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.scoringModel {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
.case_list {
|
||||
width: 216px;
|
||||
height: 894px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 24px;
|
||||
height: calc(100vh - 200px);
|
||||
|
||||
.case_item {
|
||||
width: 168px;
|
||||
// height: 53px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
border: 1px solid #D9D9D9;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
// justify-content: space-around;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin-bottom: 16px;
|
||||
span {
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
|
||||
}
|
||||
.circle_list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.circle {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background: #333333;
|
||||
border-radius: 50%;
|
||||
margin-top: 2px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.actived {
|
||||
background: #3763FF;
|
||||
|
||||
span {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.circle {
|
||||
background: #FFFFFF !important;
|
||||
}
|
||||
}
|
||||
.add_btn {
|
||||
width: 168px;
|
||||
// height: 53px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
border: 1px solid #3763FF;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #3763FF;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
// height: 100%;
|
||||
.index-content {
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 10px;
|
||||
height: calc(100vh - 275px);
|
||||
flex: 1;
|
||||
.header {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.main-content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.details {
|
||||
width: 408px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
margin-left: 16px;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
.contract {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -18px;
|
||||
cursor: pointer;
|
||||
width: 20px;
|
||||
border-bottom: 10px solid #fff;
|
||||
border-left: 3px solid transparent;
|
||||
border-right: 3px solid transparent;
|
||||
height: 0;
|
||||
transform: rotate(-90deg);
|
||||
/* 向左旋转 90 度 */
|
||||
transform-origin: center center;
|
||||
.contract-icon {
|
||||
transform: rotate(90deg);
|
||||
cursor: pointer;
|
||||
|
||||
padding-left:5px ;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" >
|
||||
.scoringModel-operate{
|
||||
|
||||
.operate-item {
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
margin: 12px 0px;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
// margin-right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue