Skip to content

X
x-training-admin
提交 12afe8c7 authored 作者: wangyizheng's avatar wangyizheng
浏览文件
操作

更新案例pdf的预览问题

上级 bd971193
隐藏空白字符变更
内嵌 并排
正在显示 包含 447 行增加 和 167 行删除
src/pages/v2/characteristics/index.vue
浏览文件 @ 12afe8c7
<template>
<div>
<div>
<el-card class="box-card">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>特征管理</el-breadcrumb-item>
</el-breadcrumb>
</el-card>
</div>
<div>
<el-card class="box-card">
<div>
<el-card class="box-card">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>特征管理</el-breadcrumb-item>
</el-breadcrumb>
</el-card>
<el-input
placeholder="请输入案例名称"
prefix-icon="el-icon-search"
v-model="searchCaseName"
size="mini"
style="width: 30%"
>
</el-input>
<el-button size="mini" icon="el-icon-search" @click="list({ name: searchCaseName, page: 1, limit: limit })">搜 索</el-button>
<el-button type="primary" size="mini" icon="el-icon-refresh" @click="refresh">刷 新</el-button>
<el-button type="primary" size="mini" icon="el-icon-plus" @click="drawer = true">创建特征</el-button>
</div>
<div>
<el-card class="box-card">
<div>
<el-input
placeholder="请输入案例名称"
prefix-icon="el-icon-search"
v-model="searchCaseName"
size="mini"
style="width: 30%"
>
</el-input>
<el-button size="mini" icon="el-icon-search" @click="list({ name: searchCaseName, page: 1, limit: limit })">搜 索</el-button>
<el-button type="primary" size="mini" icon="el-icon-refresh" @click="refresh">刷 新</el-button>
<el-button type="primary" size="mini" icon="el-icon-plus" @click="drawer = true">创建特征</el-button>
</div>
</el-card>
</el-card>
</div>
<div>
<el-card class="box-card">
<el-table
:data="tableData"
border
stripe
size="mini"
style="width: 100%">
<el-table-column fixed prop="id" label="ID" width="150px">
</el-table-column>
<el-table-column width="150px" label="案例名称">
<template slot-scope="scope">
<span>{{ scope.row.case.name }}</span>
</template>
</el-table-column>
<el-table-column width="150px" label="特征选项配置">
<template slot-scope="scope">
<el-popover
placement="right"
width="500"
trigger="click">
<el-card :body-style="{ padding: '0px' }">
<div style="padding: 14px;" v-for="(option, optionIndex) in scope.row.options" :key="'option-' + optionIndex">
<div>
<span><strong>特征选项名称：</strong></span><span>{{ option.name }}</span>
</div>
<div class="bottom clearfix">
<span><strong>特征选项配置</strong></span>
<div v-for="(option1, optionIndex1) in option.options" :key="'option1-' + optionIndex1">
<span><el-tag effect="plain" type="" size="mini">{{ option1.option }}</el-tag></span>
<span>{{ option1.option_name }}, 分数：{{ option1.score}}, </span>
<span>
答案：
<el-icon v-if="option1.answer" class="el-icon-check"></el-icon>
<el-icon v-else class="el-icon-close"></el-icon>
,
</span>
<span>
触及红线：
<el-icon v-if="option1.warning" class="el-icon-check"></el-icon>
<el-icon v-else class="el-icon-close"></el-icon>
</span>
<br/>
</div>
</div>
<el-divider v-if="optionIndex < scope.row.options.length - 1" content-position="right"></el-divider>
</div>
</el-card>
<el-button slot="reference" size="mini">查看配置</el-button>
</el-popover>
</template>
</el-table-column>
<el-table-column width="150px" label="择算分规则">
<template slot-scope="scope">
<el-popover
placement="right"
width="500"
trigger="click">
<el-card :body-style="{ padding: '0px' }">
<div style="padding: 14px;" v-for="(rule, ruleIndex) in scope.row.rules" :key="'rule-' + ruleIndex">
<div>
<span><strong>分数范围：</strong></span>
<span>{{ rule.min }} ~ {{ rule.max }}</span>
</div>
<div>
<span><strong>得分：</strong></span>
<span>{{ rule.score }}</span>
</div>
<el-divider v-if="ruleIndex < scope.row.rules.length - 1" content-position="right"></el-divider>
</div>
</el-card>
<el-button slot="reference" size="mini">查看择算分规则</el-button>
</el-popover>
</template>
</el-table-column>
<el-table-column width="150px" label="风险等级规则">
<template slot-scope="scope">
<el-popover
placement="right"
width="500"
trigger="click">
<el-card :body-style="{ padding: '0px' }">
<div style="padding: 14px;" v-for="(level, levelIndex) in scope.row.levels" :key="'level-' + levelIndex">
<div>
<span><strong>分数范围：</strong></span>
<span>{{ level.min }} ~ {{ level.max }}</span>
</div>
<div>
<span><strong>风险等级规则：</strong></span>
<span><el-tag size="mini" type="" effect="plain">{{ getLevel(level.level) }}</el-tag></span>
</div>
<el-divider v-if="levelIndex < scope.row.levels.length - 1" content-position="right"></el-divider>
</div>
</el-card>
<el-button slot="reference" size="mini">查看风险等级规则</el-button>
</el-popover>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作">
<template slot-scope="scope">
<el-select size="mini" :value="opera" @change="operation" placeholder="请选择">
<el-option :value="{ tag: 'detail', row: scope.row }" label="详情"></el-option>
<el-option :value="{ tag: 'edit', row: scope.row }" label="编辑"></el-option>
<el-option :value="{ tag: 'delete', row: scope.row }" label="删除"></el-option>
</el-select>
</template>
</el-table-column>
</el-table>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 50, 100]"
:page-size="limit"
layout="total, sizes, prev, pager, next, jumper"
:total="totalPage">
</el-pagination>
</div>
<div>
<el-card class="box-card">
<el-table
:data="tableData"
border
stripe
size="mini"
style="width: 100%">
<el-table-column fixed prop="id" label="ID" width="150px">
</el-table-column>
<el-table-column width="150px" label="案例名称">
<template slot-scope="scope">
<span>{{ scope.row.case.name }}</span>
</template>
</el-table-column>
<el-table-column width="150px" label="特征选项配置">
<template slot-scope="scope">
<el-popover
placement="right"
width="500"
trigger="click">
<el-card :body-style="{ padding: '0px' }">
<div style="padding: 14px;" v-for="(option, optionIndex) in scope.row.options" :key="'option-' + optionIndex">
<div>
<span><strong>特征选项名称：</strong></span><span>{{ option.name }}</span>
</div>
<div class="bottom clearfix">
<span><strong>特征选项配置</strong></span>
<div v-for="(option1, optionIndex1) in option.options" :key="'option1-' + optionIndex1">
<span><el-tag effect="plain" type="" size="mini">{{ option1.option }}</el-tag></span>
<span>{{ option1.option_name }}, 分数：{{ option1.score}}, </span>
<span>
答案：
<el-icon v-if="option1.answer" class="el-icon-check"></el-icon>
<el-icon v-else class="el-icon-close"></el-icon>
,
</span>
<span>
触及红线：
<el-icon v-if="option1.warning" class="el-icon-check"></el-icon>
<el-icon v-else class="el-icon-close"></el-icon>
</span>
<br/>
</div>
</div>
<el-divider v-if="optionIndex < scope.row.options.length - 1" content-position="right"></el-divider>
</div>
</el-card>
<el-button slot="reference" size="mini">查看配置</el-button>
</el-popover>
</template>
</el-table-column>
<el-table-column width="150px" label="择算分规则">
<template slot-scope="scope">
<el-popover
placement="right"
width="500"
trigger="click">
<el-card :body-style="{ padding: '0px' }">
<div style="padding: 14px;" v-for="(rule, ruleIndex) in scope.row.rules" :key="'rule-' + ruleIndex">
<div>
<span><strong>分数范围：</strong></span>
<span>{{ rule.min }} ~ {{ rule.max }}</span>
</div>
<div>
<span><strong>得分：</strong></span>
<span>{{ rule.score }}</span>
</div>
<el-divider v-if="ruleIndex < scope.row.rules.length - 1" content-position="right"></el-divider>
</div>
</el-card>
<el-button slot="reference" size="mini">查看择算分规则</el-button>
</el-popover>
</template>
</el-table-column>
<el-table-column width="150px" label="择算分规则">
<template slot-scope="scope">
<el-popover
placement="right"
width="500"
trigger="click">
<el-card :body-style="{ padding: '0px' }">
<div style="padding: 14px;" v-for="(rule, ruleIndex) in scope.row.rules" :key="'rule-' + ruleIndex">
<div>
<span><strong>分数范围：</strong></span>
<span>{{ rule.min }} ~ {{ rule.max }}</span>
</div>
<div>
<span><strong>得分：</strong></span>
<span>{{ rule.score }}</span>
</div>
<el-divider v-if="ruleIndex < scope.row.rules.length - 1" content-position="right"></el-divider>
</div>
</el-card>
<el-button slot="reference" size="mini">查看择算分规则</el-button>
</el-popover>
</template>
</el-table-column>
<el-table-column width="150px" label="风险等级规则">
<template slot-scope="scope">
<el-popover
placement="right"
width="500"
trigger="click">
<el-card :body-style="{ padding: '0px' }">
<div style="padding: 14px;" v-for="(level, levelIndex) in scope.row.levels" :key="'level-' + levelIndex">
<div>
<span><strong>分数范围：</strong></span>
<span>{{ level.min }} ~ {{ level.max }}</span>
</div>
<div>
<span><strong>风险等级规则：</strong></span>
<span><el-tag size="mini" type="" effect="plain">{{ getLevel(level.level) }}</el-tag></span>
</div>
<el-divider v-if="levelIndex < scope.row.levels.length - 1" content-position="right"></el-divider>
</div>
</el-card>
<el-button slot="reference" size="mini">查看风险等级规则</el-button>
</el-popover>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作">
<template slot-scope="scope">
<el-select size="mini" :value="opera" @change="operation" placeholder="请选择">
<el-option :value="{ tag: 'detail', row: scope.row }" label="详情"></el-option>
<el-option :value="{ tag: 'edit', row: scope.row }" label="编辑"></el-option>
<el-option :value="{ tag: 'delete', row: scope.row }" label="删除"></el-option>
</el-select>
</template>
</el-table-column>
</el-table>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 50, 100]"
:page-size="limit"
layout="total, sizes, prev, pager, next, jumper"
:total="totalPage">
</el-pagination>
</el-card>
</div>
<div>
<el-drawer
title="创建特征"
:visible.sync="drawer"
direction="rtl"
:append-to-body="true"
:withHeader="true"
:before-close="handleClose"
ref="drawer"
size="70%">
<div class="demo-drawer__content">
<el-form :model="addForm" size="mini">
<el-form-item label="案例" :label-width="formLabelWidth">
<el-select
v-model="addForm.case2_id"
filterable
remote
reserve-keyword
placeholder="请输入案例名称"
:remote-method="remoteMethod"
:loading="caseLoading">
<el-option
v-for="casesItem in cases"
:key="casesItem.value"
:label="casesItem.name"
:value="casesItem.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-divider content-position="left">特征选项配置</el-divider>
</el-form-item>
<div v-for="(option, optionIndex) in addForm.options" :key="'options-' + optionIndex" style="margin-top: 3%">
<div style="margin-left: 15%">
<i class="el-icon-circle-plus-outline" @click="addOptions(optionIndex)">添加</i>
<i class="el-icon-remove-outline" @click="removeOptions(optionIndex)">删除</i>
</div>
<div style="margin-left: 15%">
<span>
<strong>选项名称：</strong>
<el-input size="mini" v-model="option.name" placeholder="请输入选项名称" style="width: 50%"></el-input>
</span>
</div>
<div style="margin-left: 15%">
<span><strong>选项配置：</strong></span>
</div>
<div style="margin-left: 15%; margin-top: 2%" v-for="(childOption, childOptionIndex) in option.options" :key="'childOption-' + childOptionIndex">
<el-card class="box-card">
<div>
<span>
<el-tag size="mini" effect="plain">{{ childOption.option }}</el-tag>
<el-input size="mini" v-model="childOption.option_name" placeholder="请输入选项内容" style="width: 50%"></el-input>
</span>
<i class="el-icon-circle-plus-outline" @click="addChildOptions(optionIndex, childOptionIndex)"></i>
<i class="el-icon-remove-outline" @click="removeChildOptions(optionIndex, childOptionIndex)"></i>
</div>
<div style="margin-top: 2%">
<span>分值：
<el-input size="mini" v-model="childOption.score" placeholder="分值" style="width: 30%"></el-input>
</span>
</div>
<div style="margin-top: 2%">
<span>是否正确：
<el-radio size="mini" v-model="childOption.answer" :label="0">否</el-radio>
<el-radio size="mini" v-model="childOption.answer" :label="1">是</el-radio>
</span>
</div>
<div style="margin-top: 2%">
<span>是否触及红线：
<el-radio size="mini" v-model="childOption.warning" :label="0">否</el-radio>
<el-radio size="mini" v-model="childOption.warning" :label="1">是</el-radio>
</span>
</div>
</el-card>
</div>
</div>
<el-form-item>
<el-divider content-position="left">择算分规则配置</el-divider>
</el-form-item>
<div v-for="(rule, ruleIndex) in addForm.rules" :key="'rules-' + ruleIndex" style="margin-top: 2%">
<i style="margin-left: 15%" class="el-icon-circle-plus-outline" @click="addRules(ruleIndex)">添加</i>
<i class="el-icon-remove-outline" @click="removeRules(ruleIndex)">删除</i>
<el-card class="box-card" style="margin-left: 10%; margin-top: 2%">
<div style="margin-top: 2%">
<span>最小分区间：
<el-input size="mini" v-model="rule.min" placeholder="最小分" style="width: 10%"></el-input>
</span>
<span style="margin-left: 2%">最大分区间：
<el-input size="mini" v-model="rule.max" placeholder="最小分" style="width: 10%"></el-input>
</span>
<span style="margin-left: 2%">择算分：
<el-input size="mini" v-model="rule.score" placeholder="择算分" style="width: 10%"></el-input>
</span>
</div>
</el-card>
</div>
<el-form-item>
<el-divider content-position="left">风险等级规则配置</el-divider>
</el-form-item>
<div v-for="(level, levelIndex) in addForm.levels" :key="'levels-' + levelIndex" style="margin-top: 2%">
<i style="margin-left: 15%" class="el-icon-circle-plus-outline" @click="addLevels(levelIndex)">添加</i>
<i class="el-icon-remove-outline" @click="removeLevels(levelIndex)">删除</i>
<el-card class="box-card" style="margin-left: 10%; margin-top: 2%">
<div style="margin-top: 2%">
<span>最小分区间：
<el-input size="mini" v-model="level.min" placeholder="最小分" style="width: 20%"></el-input>
</span>
<span style="margin-left: 2%">最大分区间：
<el-input size="mini" v-model="level.max" placeholder="最小分" style="width: 20%"></el-input>
</span>
</div>
</el-card>
<div style="margin-top: 2%">
<span>风险等级：
<el-select size="mini" v-model="level.level" placeholder="请选择风险等级等级">
<el-option label="低风险" :value="1"></el-option>
<el-option label="中风险" :value="2"></el-option>
<el-option label="高风险" :value="3"></el-option>
</el-select>
</span>
</div>
</el-card>
</div>
<el-form-item>
<el-divider content-position="left"></el-divider>
</el-form-item>
<el-form-item>
<div class="demo-drawer__footer" style="margin-left: 60%">
<el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
</div>
</el-form-item>
</el-form>
</div>
</el-drawer>
</div>
</div>
</template>
<script>
import * as characteristicsApi from '@/api/characteristics2'
import * as casesApi from '@/api/cases2'
export default {
name: 'index',
data() {
......@@ -189,13 +302,79 @@ export default {
{ level: 1, content: '低风险' },
{ level: 2, content: '中风险' },
{ level: 3, content: '高风险' }
]
],
loading: false,
formLabelWidth: '100px',
caseLoading: false,
cases: [],
caseData: [],
getKey: 0,
getIndex: 0,
AZkey: [],
addForm: {
case2_id: '',
options: [
{
name: '',
options: [
{
option: 'A',
option_name: '',
answer: 0,
score: 0,
warning: 0
}
]
}
],
rules: [
{
min: 0,
max: 10,
score: 0
}
],
levels: [
{
min: 0,
max: 10,
level: 1
}
]
}
}
},
mounted() {
this.list({ page: this.currentPage, limit: this.limit })
this.caseList({ page: 1, limit: 10 })
this.AZkey = this.A_Z()
},
methods: {
A_Z() {
const result = []
for (let i = 0; i < 26; i++) {
result.push(String.fromCharCode(65 + i))
}
return result
},
setKey(arr) {
arr.map((item, index) => {
item.option = this.AZkey[index]
})
},
caseList(params = {}) {
this.caseLoading = true
casesApi.case2s(params).then(res => {
if (res.code === 0) {
this.cases = res.data.data
this.caseLoading = false
return true
} else {
this.$message.error(res.message)
return false
}
})
},
handleSizeChange(val) {
this.list({ page: this.currentPage, limit: val })
},
......@@ -253,11 +432,112 @@ export default {
}
}
return detail
},
cancelForm() {
this.loading = false
this.drawer = false
clearTimeout(this.timer)
},
handleClose(done) {
if (this.loading) {
return
}
this.$confirm('确定要提交表单吗？')
.then(_ => {
this.loading = true
// 提交表单
console.log(this.addForm)
characteristicsApi.createCharacteristic2(this.addForm).then(res => {
if (res.code === 0) {
this.list({ page: 1, limit: this.limit })
this.caseList({ page: 1, limit: 10 })
this.AZkey = this.A_Z()
this.$message.success(res.message)
return true
} else {
this.$message.error(res.message)
return false
}
})
this.timer = setTimeout(() => {
done()
// 动画关闭需要一定的时间
setTimeout(() => {
this.loading = false
}, 400)
}, 2000)
})
.catch(_ => {})
},
remoteMethod(query) {
this.caseList({ name: query, page: 1, limit: 10 })
},
getInitAddFormOptions() {
return {
name: '',
options: [
{
option: 'A',
option_name: '',
answer: 0,
score: 0,
warning: 0
}
]
}
},
addOptions(optionIndex) {
this.addForm.options.push(this.getInitAddFormOptions())
},
removeOptions(optionIndex) {
if (this.addForm.options.length > 1) {
this.addForm.options.splice(optionIndex, 1)
}
},
addChildOptions(optionIndex, childOptionIndex) {
if (this.addForm.options[optionIndex].options.length >= 26) {
this.$message.warning('最多输入26项')
return false
}
this.getKey = this.addForm.options[optionIndex].options[this.addForm.options[optionIndex].options.length - 1].option
this.getIndex = this.AZkey.findIndex(item => { return item === this.getKey })
this.addForm.options[optionIndex].options.push({
option: this.AZkey[this.getIndex + 1],
option_name: '',
answer: 0,
score: 0,
warning: 0
})
},
removeChildOptions(optionIndex, childOptionIndex) {
if (this.addForm.options[optionIndex].options.length > 1) {
this.addForm.options[optionIndex].options.splice(childOptionIndex, 1)
this.setKey(this.addForm.options[optionIndex].options)
}
},
addRules(ruleIndex) {
this.addForm.rules.push({ min: 0, max: 10, score: 0 })
},
removeRules(ruleIndex) {
if (this.addForm.rules.length > 1) {
this.addForm.rules.splice(ruleIndex, 1)
}
},
addLevels(levelIndex) {
this.addForm.levels.push({ min: 0, max: 10, level: 1 })
},
removeLevels(levelIndex) {
if (this.addForm.levels.length > 1) {
this.addForm.levels.splice(levelIndex, 1)
}
}
}
}
</script>
<style scoped>
<style>
.el-drawer {
overflow: auto;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论