parent
caa1edffd9
commit
88a1a1369d
4 changed files with 54 additions and 2161 deletions
@ -1,521 +0,0 @@ |
|||||||
<template> |
|
||||||
<!-- 交易类 --> |
|
||||||
<div class="content"> |
|
||||||
<div class="header flex"> |
|
||||||
<i class="el-icon-arrow-left" @click="Back()" style="cursor:pointer"> |
|
||||||
<span>Back</span> |
|
||||||
</i> |
|
||||||
<p>判分点设置</p> |
|
||||||
<button class="button" @click="Savejump()">保存</button> |
|
||||||
</div> |
|
||||||
<div class="footer"> |
|
||||||
<div> |
|
||||||
<div class="flex footer_h"> |
|
||||||
<div class="black"></div> |
|
||||||
<p>基本信息</p> |
|
||||||
</div> |
|
||||||
<div class="flex footer_input"> |
|
||||||
<p>判分点名称</p> |
|
||||||
<el-input placeholder="请输入内容" v-model="input" clearable></el-input> |
|
||||||
</div> |
|
||||||
<div class="flex footer_inputs"> |
|
||||||
<p>实验要求</p> |
|
||||||
<textarea id="memo" style="outline:none;"></textarea> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="flex footer_b"> |
|
||||||
<div class="black"></div> |
|
||||||
<p>判分规则</p> |
|
||||||
<button class="button">新增</button> |
|
||||||
</div> |
|
||||||
|
|
||||||
<el-row> |
|
||||||
<el-col :span="24"> |
|
||||||
<el-card shadow="hover"> |
|
||||||
<el-table |
|
||||||
:data="tableData" |
|
||||||
:stripe="true" |
|
||||||
:cell-style="rowClass" |
|
||||||
header-align="center" |
|
||||||
:header-cell-style="headClass" |
|
||||||
:row-class-name="tableRowClassName" |
|
||||||
> |
|
||||||
<el-table-column prop="id" type="index" label="序号" width="80"></el-table-column> |
|
||||||
<el-table-column label="流程判分正确答案"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<p class="p">操作一致性规则：用户完成的功能操作与下方设置的操作点一致</p> |
|
||||||
<div class="box"> |
|
||||||
<div class="flex box_p"> |
|
||||||
<p>一级栏目</p> |
|
||||||
<el-select v-model="value1" clearable placeholder="币币交易"> |
|
||||||
<el-option |
|
||||||
v-for="item in options1" |
|
||||||
:key="item.value" |
|
||||||
:label="item.label" |
|
||||||
:value="item.value" |
|
||||||
></el-option> |
|
||||||
</el-select> |
|
||||||
</div> |
|
||||||
<div class="flex box_p"> |
|
||||||
<p>二级栏目</p> |
|
||||||
<el-select v-model="value2" clearable placeholder="限价交易"> |
|
||||||
<el-option |
|
||||||
v-for="item in options2" |
|
||||||
:key="item.value" |
|
||||||
:label="item.label" |
|
||||||
:value="item.value" |
|
||||||
></el-option> |
|
||||||
</el-select> |
|
||||||
</div> |
|
||||||
<div class="flex box_p"> |
|
||||||
<p>操作按钮</p> |
|
||||||
<el-select v-model="value3" clearable placeholder="买入BTC"> |
|
||||||
<el-option |
|
||||||
v-for="item in options3" |
|
||||||
:key="item.value" |
|
||||||
:label="item.label" |
|
||||||
:value="item.value" |
|
||||||
></el-option> |
|
||||||
</el-select> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label=" " width="150"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<div class="border"> |
|
||||||
<p v-show="scope.row.isQie" @click="getQie(scope.row)" style="cursor:pointer">且</p> |
|
||||||
<p v-show="!scope.row.isQie" @click="getHuo(scope.row)" style="cursor:pointer">或</p> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="交易结果正确答案"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<p class="p" style="margin-top:1px">交易结果一致性规则：用户交易结果需要与下面设置的交易结果指标要求一致</p> |
|
||||||
<div class="box"> |
|
||||||
<div class="flex box_p"> |
|
||||||
<p>指标类别</p> |
|
||||||
<el-select v-model="value4" clearable placeholder="交易结果指标"> |
|
||||||
<el-option |
|
||||||
v-for="item in values1" |
|
||||||
:key="item.value" |
|
||||||
:label="item.label" |
|
||||||
:value="item.value" |
|
||||||
></el-option> |
|
||||||
</el-select> |
|
||||||
</div> |
|
||||||
<div class="flex box_p"> |
|
||||||
<p>交易指标</p> |
|
||||||
<el-select v-model="value5" clearable placeholder="BTC买入量"> |
|
||||||
<el-option |
|
||||||
v-for="item in values2" |
|
||||||
:key="item.value" |
|
||||||
:label="item.label" |
|
||||||
:value="item.value" |
|
||||||
></el-option> |
|
||||||
</el-select> |
|
||||||
</div> |
|
||||||
<div class="flex box_p box_right" style="padding-left: 30px;"> |
|
||||||
<p>交易结果区间</p> |
|
||||||
<el-select v-model="value6" clearable placeholder="("> |
|
||||||
<el-option |
|
||||||
v-for="item in values3" |
|
||||||
:key="item.value" |
|
||||||
:label="item.label" |
|
||||||
:value="item.value" |
|
||||||
></el-option> |
|
||||||
</el-select> |
|
||||||
<el-input |
|
||||||
placeholder="100" |
|
||||||
style="width:80px;margin:8px 10px 0 10px;" |
|
||||||
v-model="input1" |
|
||||||
clearable |
|
||||||
></el-input> |
|
||||||
<el-input |
|
||||||
placeholder="100" |
|
||||||
v-model="input2" |
|
||||||
style="width:80px;margin:8px 10px 0 0;" |
|
||||||
clearable |
|
||||||
></el-input> |
|
||||||
<el-select v-model="value7" clearable placeholder=")"> |
|
||||||
<el-option |
|
||||||
v-for="item in values4" |
|
||||||
:key="item.value" |
|
||||||
:label="item.label" |
|
||||||
:value="item.value" |
|
||||||
></el-option> |
|
||||||
</el-select> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="操作" width="300"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<el-button size="mini" type="text" v-show="isShow" @click="handleEdit()">编辑</el-button> |
|
||||||
<el-button |
|
||||||
type="text" |
|
||||||
size="mini" |
|
||||||
v-show="!isShow" |
|
||||||
@click="addTab(scope.$index, scope.row)" |
|
||||||
>保存</el-button> |
|
||||||
<el-button |
|
||||||
size="mini" |
|
||||||
type="text" |
|
||||||
v-show="!isShow" |
|
||||||
@click="dialogFormVisible()" |
|
||||||
>取消</el-button> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
</el-table> |
|
||||||
</el-card> |
|
||||||
</el-col> |
|
||||||
</el-row> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
export default { |
|
||||||
data() { |
|
||||||
return { |
|
||||||
input: "", |
|
||||||
textarea: "", |
|
||||||
tableData: [ |
|
||||||
{ |
|
||||||
qie: "且", |
|
||||||
huo: "或" |
|
||||||
} |
|
||||||
], |
|
||||||
options1: [ |
|
||||||
{ |
|
||||||
value: "选项1", |
|
||||||
label: "币币交易" |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: "选项2", |
|
||||||
label: "网络交易" |
|
||||||
} |
|
||||||
], |
|
||||||
options2: [ |
|
||||||
{ |
|
||||||
value: "选项1", |
|
||||||
label: "限价交易" |
|
||||||
} |
|
||||||
], |
|
||||||
options3: [ |
|
||||||
{ |
|
||||||
value: "选项1", |
|
||||||
label: "买入BTC" |
|
||||||
} |
|
||||||
], |
|
||||||
values1: [ |
|
||||||
{ |
|
||||||
value: "选项1", |
|
||||||
label: "交易结果指标" |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: "选项2", |
|
||||||
label: "交易过程指标" |
|
||||||
} |
|
||||||
], |
|
||||||
values2: [ |
|
||||||
{ |
|
||||||
value: "选项1", |
|
||||||
label: "BTC买入量" |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: "选项2", |
|
||||||
label: "总资产收益率" |
|
||||||
} |
|
||||||
], |
|
||||||
values3: [ |
|
||||||
{ |
|
||||||
value: "选项1", |
|
||||||
label: "(" |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: "选项2", |
|
||||||
label: "[" |
|
||||||
} |
|
||||||
], |
|
||||||
values4: [ |
|
||||||
{ |
|
||||||
value: "选项1", |
|
||||||
label: ")" |
|
||||||
}, |
|
||||||
{ |
|
||||||
value: "选项2", |
|
||||||
label: "]" |
|
||||||
} |
|
||||||
], |
|
||||||
value1: "", |
|
||||||
value2: "", |
|
||||||
value3: "", |
|
||||||
value4: "", |
|
||||||
value5: "", |
|
||||||
value6: "", |
|
||||||
value7: "", |
|
||||||
input1: "", |
|
||||||
input2: "", |
|
||||||
isShow: true, |
|
||||||
isQie: true |
|
||||||
}; |
|
||||||
}, |
|
||||||
|
|
||||||
methods: { |
|
||||||
Savejump() { |
|
||||||
this.$router.push({ path: "/" }); |
|
||||||
}, |
|
||||||
Back() { |
|
||||||
this.$router.push({ path: "/" }); |
|
||||||
}, |
|
||||||
getQie() { |
|
||||||
this.isQie = false; |
|
||||||
}, |
|
||||||
getHuo() { |
|
||||||
this.isQie = true; |
|
||||||
}, |
|
||||||
handleEdit() { |
|
||||||
this.isShow = false; |
|
||||||
}, |
|
||||||
addTab(tabName, targetName) { |
|
||||||
let newTabName = ++this.tabIndex + ""; |
|
||||||
this.editableTabs.push({ |
|
||||||
title: tabName, |
|
||||||
name: newTabName, |
|
||||||
content: "New Tab content" |
|
||||||
}); |
|
||||||
this.editableTabsValue = newTabName; |
|
||||||
this.dialogFormVisible = false; |
|
||||||
}, |
|
||||||
dialogFormVisible() { |
|
||||||
this.isShow = true; |
|
||||||
}, |
|
||||||
// 表头样式设置 |
|
||||||
headClass() { |
|
||||||
return "text-align: center;"; |
|
||||||
}, |
|
||||||
// 表格样式设置 |
|
||||||
rowClass() { |
|
||||||
return "text-align: center;"; |
|
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
// 第二部分 |
|
||||||
//或 且的边框 |
|
||||||
.border { |
|
||||||
width: 50px; |
|
||||||
height: 50px; |
|
||||||
border: 1px solid #9278ff; |
|
||||||
border-radius: 50%; |
|
||||||
margin: auto; |
|
||||||
} |
|
||||||
// 表格盒子 |
|
||||||
.box { |
|
||||||
border: 1px solid #9278ff; |
|
||||||
width: 500px; |
|
||||||
margin: 0 auto; |
|
||||||
} |
|
||||||
.box /deep/ .el-input { |
|
||||||
width: 150px; |
|
||||||
} |
|
||||||
.box_right /deep/ .el-input { |
|
||||||
width: 51px; |
|
||||||
margin-right: 0; |
|
||||||
} |
|
||||||
.box /deep/ .el-input--suffix .el-input__inner { |
|
||||||
height: 25px; |
|
||||||
padding-right: 0; |
|
||||||
} |
|
||||||
.box /deep/ .el-input--suffix .el-input__inner { |
|
||||||
border: 1px solid #9278ff; |
|
||||||
} |
|
||||||
.box /deep/ .el-input--suffix .el-input__inner:focus, |
|
||||||
.el-input--suffix .el-input__inner:hover { |
|
||||||
border: 1px solid #9278ff; |
|
||||||
} |
|
||||||
/deep/ .el-table .cell { |
|
||||||
line-height: 1; |
|
||||||
} |
|
||||||
.box_p { |
|
||||||
padding-left: 50px; |
|
||||||
} |
|
||||||
.box_p p { |
|
||||||
padding-right: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
// 表格里面的内容 |
|
||||||
.p { |
|
||||||
font-size: 12px; |
|
||||||
font-weight: 600; |
|
||||||
} |
|
||||||
/deep/ .el-select { |
|
||||||
padding-top: 10px; |
|
||||||
} |
|
||||||
/deep/ .el-table td, |
|
||||||
.el-table th { |
|
||||||
padding-top: 0; |
|
||||||
} |
|
||||||
.box /deep/ [class*=" el-icon-"], |
|
||||||
[class^="el-icon-"] { |
|
||||||
line-height: 1; |
|
||||||
padding-left: 0; |
|
||||||
} |
|
||||||
/deep/ .el-select__caret:before { |
|
||||||
content: "\e78f"; |
|
||||||
font-size: 8px; |
|
||||||
padding: 1px; |
|
||||||
background-color: #9278ff; |
|
||||||
border-radius: 50%; |
|
||||||
color: #ffffff; |
|
||||||
} |
|
||||||
/deep/ .el-row { |
|
||||||
padding: 0 20px; |
|
||||||
} |
|
||||||
/deep/ .el-card__body { |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
/deep/ .el-card { |
|
||||||
border: none; |
|
||||||
} |
|
||||||
|
|
||||||
// 滚动条的宽度 |
|
||||||
/deep/ ::-webkit-scrollbar { |
|
||||||
width: 6px; // 横向滚动条 |
|
||||||
height: 6px; // 纵向滚动条 必写 |
|
||||||
} |
|
||||||
// 滚动条的滑块 |
|
||||||
/deep/ ::-webkit-scrollbar-thumb { |
|
||||||
background-color: #9278ff; |
|
||||||
border-radius: 3px; |
|
||||||
-webkit-box-shadow: inset 0 0 5px #dddddd; |
|
||||||
} |
|
||||||
/deep/ ::-webkit-scrollbar-track { |
|
||||||
/*滚动条里面轨道*/ |
|
||||||
-webkit-box-shadow: inset 0 0 5px #dddddd; |
|
||||||
border-radius: 0; |
|
||||||
background: #dddddd; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .el-table th { |
|
||||||
font-size: 14px; |
|
||||||
font-family: Microsoft YaHei; |
|
||||||
color: rgba(255, 255, 255, 1); |
|
||||||
background-color: #9278ff; |
|
||||||
} |
|
||||||
|
|
||||||
.footer_b p { |
|
||||||
// padding-right: 800px; |
|
||||||
margin: 0; |
|
||||||
padding-left: 10px; |
|
||||||
font-size: 12px; |
|
||||||
} |
|
||||||
.footer_b { |
|
||||||
padding: 10px 0; |
|
||||||
border-top: 1px dashed #cccccc; |
|
||||||
margin: 0 15px; |
|
||||||
height: 45px; |
|
||||||
line-height: 45px; |
|
||||||
} |
|
||||||
|
|
||||||
// 第一部分 |
|
||||||
#memo { |
|
||||||
margin-left: 10px; |
|
||||||
height: 200px; |
|
||||||
width: 800px; |
|
||||||
resize: none; |
|
||||||
border: 1px solid #9278ff; |
|
||||||
font-size: 12px; |
|
||||||
border-radius: 5px; |
|
||||||
} |
|
||||||
/deep/ .el-input--suffix .el-input__inner { |
|
||||||
border: 1px solid #9278ff; |
|
||||||
} |
|
||||||
.footer_input p { |
|
||||||
font-size: 12px; |
|
||||||
padding-right: 20px; |
|
||||||
} |
|
||||||
.footer_input { |
|
||||||
padding: 30px 0 20px 80px; |
|
||||||
} |
|
||||||
.footer_inputs { |
|
||||||
padding: 30px 0 20px 80px; |
|
||||||
} |
|
||||||
.footer_inputs p { |
|
||||||
font-size: 12px; |
|
||||||
padding-right: 20px; |
|
||||||
} |
|
||||||
/deep/ .el-input { |
|
||||||
width: 30%; |
|
||||||
} |
|
||||||
.button { |
|
||||||
height: 30px; |
|
||||||
width: 80px; |
|
||||||
margin-top: 7px; |
|
||||||
border: none; |
|
||||||
background-color: #9278ff; |
|
||||||
color: #ffffff; |
|
||||||
border-radius: 20px; |
|
||||||
position: absolute; |
|
||||||
right: 30px; |
|
||||||
} |
|
||||||
.button:focus { |
|
||||||
outline: 0; |
|
||||||
} |
|
||||||
/deep/ [class*=" el-icon-"], |
|
||||||
[class^="el-icon-"] { |
|
||||||
line-height: 3; |
|
||||||
padding-left: 10px; |
|
||||||
} |
|
||||||
.header { |
|
||||||
background-color: #ffffff; |
|
||||||
height: 45px; |
|
||||||
line-height: 45px; |
|
||||||
font-size: 14px; |
|
||||||
font-weight: 600; |
|
||||||
position: relative; |
|
||||||
} |
|
||||||
.header span { |
|
||||||
font-size: 14px; |
|
||||||
font-weight: 600; |
|
||||||
padding-left: 5px; |
|
||||||
} |
|
||||||
.header p { |
|
||||||
padding-left: 20px; |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
.footer_h { |
|
||||||
// padding: 10px 0; |
|
||||||
border-top: 1px dashed #cccccc; |
|
||||||
border-bottom: 1px dashed #cccccc; |
|
||||||
margin: 0 15px; |
|
||||||
height: 45px; |
|
||||||
line-height: 45px; |
|
||||||
} |
|
||||||
.flex { |
|
||||||
display: flex; |
|
||||||
justify-content: flex-start; |
|
||||||
} |
|
||||||
.footer { |
|
||||||
background-color: #ffffff; |
|
||||||
} |
|
||||||
.footer_h p { |
|
||||||
padding-left: 10px; |
|
||||||
font-size: 12px; |
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
.black { |
|
||||||
width: 8px; |
|
||||||
height: 18px; |
|
||||||
background-color: #333; |
|
||||||
margin-top: 10px; |
|
||||||
} |
|
||||||
.content { |
|
||||||
background-color: #f2f6fc; |
|
||||||
position: relative; |
|
||||||
top: 10px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,960 +0,0 @@ |
|||||||
<template> |
|
||||||
<!-- 交易类 --> |
|
||||||
<div class="content"> |
|
||||||
<div class="header"> |
|
||||||
<div> |
|
||||||
<i class="back el-icon-arrow-left" @click="Back()" style="cursor:pointer"> |
|
||||||
<span>Back</span> |
|
||||||
</i> |
|
||||||
<span class="title">判分点设置</span> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<el-button v-if="!isView" type="primary" size="mini" @click="saveAll">保存</el-button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div> |
|
||||||
<div class="form-con"> |
|
||||||
<div class="title"> |
|
||||||
<div class="black"></div> |
|
||||||
<div>基本信息</div> |
|
||||||
</div> |
|
||||||
<div class="item"> |
|
||||||
<div class="label">判分点名称</div> |
|
||||||
<el-input |
|
||||||
v-model.trim="formData.lcJudgmentPoint.name" |
|
||||||
:readonly="isView" |
|
||||||
@blur="handleBlur" |
|
||||||
placeholder="请输入内容" |
|
||||||
clearable |
|
||||||
style="width: 400px" |
|
||||||
></el-input> |
|
||||||
</div> |
|
||||||
<div class="item"> |
|
||||||
<div class="label">实验要求</div> |
|
||||||
<quill |
|
||||||
v-model="formData.lcJudgmentPoint.experimentalRequirements" |
|
||||||
:readonly="isView" |
|
||||||
:border="true" |
|
||||||
:minHeight="150" |
|
||||||
:height="150" |
|
||||||
style="width: 100%" |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="rule-con"> |
|
||||||
<div class="title-con"> |
|
||||||
<div class="title"> |
|
||||||
<div class="black"></div> |
|
||||||
<div>判分规则</div> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
<el-button v-if="!isView" :disabled="isAddRule" type="primary" size="mini" @click="addRule">新增</el-button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<el-card shadow="hover"> |
|
||||||
<el-table |
|
||||||
:data="tableData" |
|
||||||
:stripe="true" |
|
||||||
:cell-style="rowClass" |
|
||||||
header-align="center" |
|
||||||
:header-cell-style="headClass" |
|
||||||
> |
|
||||||
<el-table-column prop="indexNo" label="序号" width="80"></el-table-column> |
|
||||||
<el-table-column label="流程判分正确答案"> |
|
||||||
<template slot-scope="scope" v-if="scope.row.isSubject"> |
|
||||||
<p class="p">操作一致性规则：用户完成的功能操作与下方设置的操作点一致</p> |
|
||||||
<div class="tree-con"> |
|
||||||
<div class="block1"> |
|
||||||
<my-tree |
|
||||||
class="action" |
|
||||||
:ref="'tree-'+scope.$index" |
|
||||||
:data="treeData" |
|
||||||
:props="defaultProps" |
|
||||||
default-expand-all |
|
||||||
node-key="id" |
|
||||||
show-checkbox |
|
||||||
@check-change="(data, checked, indeterminate) => { |
|
||||||
handleCheckChange(data, checked, indeterminate, scope.row, scope.$index); |
|
||||||
}" |
|
||||||
></my-tree> |
|
||||||
</div> |
|
||||||
<div v-show="scope.row.isDisabled" class="mask"></div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label=" " width="150"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<el-button |
|
||||||
circle |
|
||||||
type="primary" |
|
||||||
v-if="scope.row.isSubject" |
|
||||||
:disabled="isView || scope.row.isDisabled" |
|
||||||
@click="changeResult(scope.row)" |
|
||||||
style="position: absolute; right: 55px" |
|
||||||
> |
|
||||||
{{ scope.row.resultOperation === 0 ? "且" : "或" }} |
|
||||||
</el-button> |
|
||||||
<el-button v-else type="primary" circle @click="changeRule(scope.row, scope.$index)"> |
|
||||||
{{ scope.row.ruleOperation === 0 ? "且" : "或" }} |
|
||||||
</el-button> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="交易结果正确答案"> |
|
||||||
<template slot-scope="scope" v-if="scope.row.isSubject"> |
|
||||||
<p class="p">交易结果一致性规则：用户交易结果需要与下面设置的交易结果指标要求一致</p> |
|
||||||
<div class="block"> |
|
||||||
<!-- type: 题目类型(1选择 2判断 3填空 4问答 5指标结果) --> |
|
||||||
<template v-if="scope.row.type == 1"> |
|
||||||
<div class="box"> |
|
||||||
<div class="line"> |
|
||||||
<div>{{ scope.row.name }}</div> |
|
||||||
</div> |
|
||||||
<div class="line"> |
|
||||||
<span class="label mini">正确答案</span> |
|
||||||
<div class="action"> |
|
||||||
<!--multiple:多选--> |
|
||||||
<el-select |
|
||||||
v-model="scope.row.value1" |
|
||||||
:disabled="isView || scope.row.isDisabled" |
|
||||||
size="mini" |
|
||||||
style="width: 100%" |
|
||||||
> |
|
||||||
<el-option |
|
||||||
v-for="(item, index) in scope.row.items" |
|
||||||
:key="index" |
|
||||||
:label="item.options" |
|
||||||
:value="item.itemId" |
|
||||||
></el-option> |
|
||||||
</el-select> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<template v-if="scope.row.type == 2"> |
|
||||||
<div class="box"> |
|
||||||
<div class="line"> |
|
||||||
<div>{{ scope.row.name }}</div> |
|
||||||
</div> |
|
||||||
<div class="line"> |
|
||||||
<span class="label mini">正确答案</span> |
|
||||||
<div class="action"> |
|
||||||
<el-select |
|
||||||
v-model="scope.row.value1" |
|
||||||
:disabled="isView || scope.row.isDisabled" |
|
||||||
size="mini" |
|
||||||
style="width: 100%" |
|
||||||
> |
|
||||||
<el-option |
|
||||||
v-for="(item, index) in scope.row.items" |
|
||||||
:key="index" |
|
||||||
:label="item.options" |
|
||||||
:value="item.itemId" |
|
||||||
></el-option> |
|
||||||
</el-select> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<template v-if="scope.row.type == 3"> |
|
||||||
<div class="box"> |
|
||||||
<div class="line" style="min-height: 100%;"> |
|
||||||
<span class="label"> |
|
||||||
<!--<el-checkbox v-model="scope.row.fieldOfReq" :disabled="isView || scope.row.isDisabled">字段要求</el-checkbox>--> |
|
||||||
字段要求 |
|
||||||
</span> |
|
||||||
<div class="action"> |
|
||||||
<el-input |
|
||||||
class="mini-textarea" |
|
||||||
type="textarea" |
|
||||||
rows="6" |
|
||||||
size="mini" |
|
||||||
v-model.trim="scope.row.value1" |
|
||||||
:disabled="isView || scope.row.isDisabled" |
|
||||||
placeholder="字段之间以逗号隔开" |
|
||||||
></el-input> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<template v-if="scope.row.type == 4"> |
|
||||||
<div class="box"> |
|
||||||
<div class="line"> |
|
||||||
<span class="label"> |
|
||||||
<!--<el-checkbox v-model="scope.row.numOfWords" :disabled="isView || scope.row.isDisabled">字数要求</el-checkbox>--> |
|
||||||
字数要求 |
|
||||||
</span> |
|
||||||
<div class="action a-line"> |
|
||||||
<el-select |
|
||||||
v-model="scope.row.value1" |
|
||||||
:disabled="isView || scope.row.isDisabled" |
|
||||||
size="mini" |
|
||||||
> |
|
||||||
<el-option label=">" value=">"></el-option> |
|
||||||
<el-option label="<" value="<"></el-option> |
|
||||||
<el-option label="=" value="="></el-option> |
|
||||||
<el-option label=">=" value=">="></el-option> |
|
||||||
<el-option label="<=" value="<="></el-option> |
|
||||||
<el-option label="无限制" value="无限制"></el-option> |
|
||||||
</el-select> |
|
||||||
<el-input |
|
||||||
class="number-input" |
|
||||||
v-model.trim="scope.row.value2" |
|
||||||
:disabled="isView || scope.row.isDisabled" |
|
||||||
onkeyup="value=this.value.replace(/\D+/g,'')" |
|
||||||
oninput="value=value.replace(/[^0-9.]/g,'')" |
|
||||||
type="number" |
|
||||||
min="1" |
|
||||||
size="mini" |
|
||||||
style="margin-left: 5px;" |
|
||||||
></el-input> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="line"> |
|
||||||
<span class="label"> |
|
||||||
<!--<el-checkbox v-model="scope.row.fieldOfReq" :disabled="isView || scope.row.isDisabled">字段要求</el-checkbox>--> |
|
||||||
字段要求 |
|
||||||
</span> |
|
||||||
<div class="action"> |
|
||||||
<el-input |
|
||||||
class="mini-textarea" |
|
||||||
type="textarea" |
|
||||||
rows="5" |
|
||||||
size="mini" |
|
||||||
v-model.trim="scope.row.value3" |
|
||||||
:disabled="isView || scope.row.isDisabled" |
|
||||||
placeholder="字段之间以逗号隔开" |
|
||||||
></el-input> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<template v-if="scope.row.type == 5"> |
|
||||||
<div class="box"> |
|
||||||
<div class="line"> |
|
||||||
<!-- |
|
||||||
<span class="label">选择指标</span> |
|
||||||
<div class="action"> |
|
||||||
<el-select |
|
||||||
v-model="scope.row.value1" |
|
||||||
:disabled="isView || scope.row.isDisabled" |
|
||||||
size="mini" |
|
||||||
> |
|
||||||
<el-option |
|
||||||
v-for="(item, index) in scope.row.items" |
|
||||||
:key="index" |
|
||||||
:label="item.options" |
|
||||||
:value="item.itemId" |
|
||||||
></el-option> |
|
||||||
</el-select> |
|
||||||
</div> |
|
||||||
--> |
|
||||||
<div>{{ scope.row.name }}</div> |
|
||||||
|
|
||||||
</div> |
|
||||||
<div class="line"> |
|
||||||
<span class="label">交易指标区间</span> |
|
||||||
<div class="action"> |
|
||||||
<div class="inputs"> |
|
||||||
<el-select |
|
||||||
v-model="scope.row.value2" |
|
||||||
:disabled="isView || scope.row.isDisabled" |
|
||||||
size="mini" |
|
||||||
> |
|
||||||
<el-option label="(" value="("></el-option> |
|
||||||
<el-option label="[" value="["></el-option> |
|
||||||
</el-select> |
|
||||||
<el-input |
|
||||||
class="number-input" |
|
||||||
v-model.trim="scope.row.value3" |
|
||||||
:disabled="isView || scope.row.isDisabled" |
|
||||||
type="number" |
|
||||||
size="mini" |
|
||||||
></el-input> |
|
||||||
<el-input |
|
||||||
class="number-input" |
|
||||||
v-model.trim="scope.row.value4" |
|
||||||
:disabled="isView || scope.row.isDisabled" |
|
||||||
type="number" |
|
||||||
size="mini" |
|
||||||
></el-input> |
|
||||||
<el-select |
|
||||||
:disabled="isView || scope.row.isDisabled" |
|
||||||
v-model="scope.row.value5" |
|
||||||
size="mini" |
|
||||||
> |
|
||||||
<el-option label=")" value=")"></el-option> |
|
||||||
<el-option label="]" value="]"></el-option> |
|
||||||
</el-select> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="操作" width="300" v-if="!isView"> |
|
||||||
<template slot-scope="scope" v-if="scope.row.isSubject"> |
|
||||||
<el-button v-show="scope.row.isDisabled" size="mini" type="text" @click="handleEdit(scope.row)">编辑 |
|
||||||
</el-button> |
|
||||||
<el-button v-show="!scope.row.isDisabled" size="mini" type="text" |
|
||||||
@click="handleSave(scope.row, scope.$index)">保存 |
|
||||||
</el-button> |
|
||||||
<el-button v-show="!scope.row.isDisabled" size="mini" type="text" |
|
||||||
@click="handleCancel(scope.row, scope.$index)">取消 |
|
||||||
</el-button> |
|
||||||
<el-button v-show="scope.row.isDisabled" size="mini" type="text" |
|
||||||
@click="handleDelete(scope.row, scope.$index)">删除 |
|
||||||
</el-button> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
</el-table> |
|
||||||
</el-card> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import quill from "@/components/quill"; |
|
||||||
import MyTree from "@/components/myTree/src/tree"; |
|
||||||
import {deepCopy} from "@/utils/deepCopy"; |
|
||||||
|
|
||||||
export default { |
|
||||||
components: {quill, MyTree}, |
|
||||||
data() { |
|
||||||
return { |
|
||||||
lcId: "", // 流程类判分点id |
|
||||||
isAdd: Boolean(this.$route.query.isAdd), // 添加 |
|
||||||
isEdit: Boolean(this.$route.query.isEdit), // 编辑 |
|
||||||
isView: Boolean(this.$route.query.isView), // 查看 |
|
||||||
isNameRepeat: false, // 名称是否重复 |
|
||||||
treeData: [], // 树结构数据 |
|
||||||
defaultProps: { |
|
||||||
children: "children", |
|
||||||
label: "name" |
|
||||||
}, // 树结构配置项 |
|
||||||
currentNodeData: {}, // 当前选中的节点 |
|
||||||
formData: { |
|
||||||
lcJudgmentPoint: { |
|
||||||
name: "", |
|
||||||
experimentalRequirements: "", |
|
||||||
isDel: 0, |
|
||||||
isOpen: 0, |
|
||||||
projectId: "", |
|
||||||
systemId: "" |
|
||||||
}, |
|
||||||
lcJudgmentRuleList: [] |
|
||||||
}, // 表单参数 |
|
||||||
tableData: [], // 规则表格数据 |
|
||||||
tableDataCopy: [], // 规则表格数据备份 |
|
||||||
isAddRule: false // 是否禁用新增规则按钮 |
|
||||||
}; |
|
||||||
}, |
|
||||||
mounted() { |
|
||||||
this.$route.query.token && this.$store.commit("setParam", { |
|
||||||
token: atob(decodeURI(this.$route.query.token)) |
|
||||||
}); |
|
||||||
this.getTreeData(); |
|
||||||
if (this.$route.query.lcId) { |
|
||||||
this.lcId = this.$route.query.lcId; |
|
||||||
this.getInfoData(this.$route.query.lcId); |
|
||||||
} |
|
||||||
if (this.$route.query.systemId) { |
|
||||||
this.formData.lcJudgmentPoint.systemId = this.$route.query.systemId; |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
getInfoData(lcId) { // 获取判分点详细信息 |
|
||||||
this.$get(`${this.api.queryJudgmentPointDetails}?lcId=${lcId}`).then(res => { |
|
||||||
if (res.status === 200) { |
|
||||||
let {judgmentPoint, judgmentRuleList} = res; |
|
||||||
this.formData = { |
|
||||||
lcJudgmentPoint: judgmentPoint, |
|
||||||
lcJudgmentRuleList: judgmentRuleList |
|
||||||
}; |
|
||||||
|
|
||||||
// 重新封装数据 |
|
||||||
let length = judgmentRuleList.length; |
|
||||||
let tempArr = []; |
|
||||||
judgmentRuleList.forEach((item, index) => { |
|
||||||
let obj = { |
|
||||||
...item, |
|
||||||
isSubject: true, |
|
||||||
isDisabled: true, // 已禁用 |
|
||||||
isSave: true // 已保存 |
|
||||||
}; |
|
||||||
//题目类型(1选择 2判断 3填空 4问答 5指标结果) |
|
||||||
if (item.type == 1 || item.type == 2) { |
|
||||||
obj.subjectId = Number(item.emptyOne); |
|
||||||
obj.value1 = Number(item.emptyTwo); |
|
||||||
} else if (item.type == 3) { |
|
||||||
obj.subjectId = Number(item.emptyOne); |
|
||||||
obj.value1 = item.emptyTwo; |
|
||||||
} else if (item.type == 4) { |
|
||||||
// 需要提目id |
|
||||||
if (item.emptyOne === "无限制") { |
|
||||||
obj.value1 = item.emptyOne; |
|
||||||
obj.value2 = ""; |
|
||||||
} else { |
|
||||||
obj.value1 = item.emptyOne.substring(0, item.emptyOne.indexOf(",")); |
|
||||||
obj.value2 = item.emptyOne.substring(item.emptyOne.indexOf(",") + 1, item.emptyOne.length); |
|
||||||
} |
|
||||||
obj.value3 = item.emptyTwo; |
|
||||||
} else if (item.type == 5) { |
|
||||||
obj.subjectId = Number(item.emptyOne); |
|
||||||
obj.value2 = item.emptyTwo[0]; |
|
||||||
obj.value3 = item.emptyTwo.substring(1, item.emptyTwo.indexOf("~")); |
|
||||||
obj.value4 = item.emptyTwo.substring(item.emptyTwo.indexOf("~") + 1, item.emptyTwo.length - 1); |
|
||||||
obj.value5 = item.emptyTwo[item.emptyTwo.length - 1]; |
|
||||||
} |
|
||||||
tempArr.push(obj); |
|
||||||
if (length > 1 && index !== (length - 1)) { |
|
||||||
tempArr.push({ruleOperation: item.ruleOperation}); |
|
||||||
} |
|
||||||
this.tableData = tempArr; |
|
||||||
}); |
|
||||||
|
|
||||||
this.tableData.forEach(async (item, index) => { |
|
||||||
// 勾选树节点 |
|
||||||
if (item.operationIds) { |
|
||||||
this.$nextTick(() => { |
|
||||||
this.$refs[`tree-${index}`].setCheckedKeys([item.operationIds]); |
|
||||||
}); |
|
||||||
} |
|
||||||
// 根据题目id,获取题目信息 |
|
||||||
if (item.isSubject && item.type && item.type != 4 && item.emptyOne) { |
|
||||||
await this.getSubjectData(item.emptyOne, index); |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
} else { |
|
||||||
this.$message.warning(res.message); |
|
||||||
} |
|
||||||
}).catch(err => { |
|
||||||
console.log(err); |
|
||||||
}); |
|
||||||
}, |
|
||||||
getSubjectData(subjectId, index) { // 获取题目信息 |
|
||||||
this.$get(`${this.api.getSubjectInfo}?subject_id=${subjectId}`).then(res => { |
|
||||||
if (res.status === 200) { |
|
||||||
let item = { |
|
||||||
...this.tableData[index], |
|
||||||
...res.subject, |
|
||||||
items: res.items |
|
||||||
}; |
|
||||||
this.$set(this.tableData, index, item); |
|
||||||
// console.log(JSON.stringify(this.tableData)) |
|
||||||
} |
|
||||||
}).catch(err => { |
|
||||||
console.log(err); |
|
||||||
}); |
|
||||||
}, |
|
||||||
handleCheckChange(data, checked, indeterminate, row, index) { // 处理勾选 |
|
||||||
if (checked && data.isNode === 1) { |
|
||||||
this.tableData[index].operationIds = data.id; // 操作id串 |
|
||||||
row.value1 = ""; |
|
||||||
row.value2 = ""; |
|
||||||
row.value3 = ""; |
|
||||||
row.value4 = ""; |
|
||||||
row.value5 = ""; |
|
||||||
if (data.subjectId) { // 是否有题目id |
|
||||||
this.currentNodeData = data; |
|
||||||
this.$refs[`tree-${index}`].setCheckedNodes([data]); |
|
||||||
this.getSubjectData(data.subjectId, index); |
|
||||||
} else { |
|
||||||
row.type = ""; |
|
||||||
this.currentNodeData = {}; |
|
||||||
this.$refs[`tree-${index}`].setCheckedNodes([data]); |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
getTreeData() { // 获取树结构数据 |
|
||||||
this.$get(this.api.getLcRecord).then(res => { |
|
||||||
if (res.status === 200 && res.list) { |
|
||||||
if (res.list.length) { |
|
||||||
this.treeData = this.toTreeId(res.list, res.list[0].parentId); |
|
||||||
} |
|
||||||
} else { |
|
||||||
this.$message.warning(res.message); |
|
||||||
} |
|
||||||
}).catch(err => { |
|
||||||
console.log(err); |
|
||||||
}); |
|
||||||
}, |
|
||||||
toTreeId(data, parentId) { // id重新串连成（父+子+孙）,已便达到树节点需要的key唯一性,且后面提交数据，需要传这个id串到后台 |
|
||||||
let result = []; |
|
||||||
data.forEach(item => { |
|
||||||
if (item.isNode === 0) { |
|
||||||
item.disabled = true; |
|
||||||
item.showCheckbox = false; |
|
||||||
} else { |
|
||||||
item.showCheckbox = true; |
|
||||||
} |
|
||||||
if (item.children && item.children.length) { |
|
||||||
item.id = `${parentId},${item.id}`; |
|
||||||
item.children = this.toTreeId(item.children, item.id); |
|
||||||
} else { |
|
||||||
item.id = `${parentId},${item.id}`; |
|
||||||
} |
|
||||||
result.push(item); |
|
||||||
}); |
|
||||||
return result; |
|
||||||
}, |
|
||||||
Back() { // 返回 |
|
||||||
this.$router.back(); |
|
||||||
}, |
|
||||||
handleBlur() { // 新增/编辑判分点名称判重 |
|
||||||
if (this.formData.lcJudgmentPoint.name) { |
|
||||||
let params = { |
|
||||||
lcId: this.lcId, |
|
||||||
name: this.formData.lcJudgmentPoint.name |
|
||||||
}; |
|
||||||
this.$post(this.api.queryNameIsExist, params).then(res => { |
|
||||||
if (res.status === 200) { |
|
||||||
this.isNameRepeat = false; |
|
||||||
} else { |
|
||||||
this.isNameRepeat = true; |
|
||||||
} |
|
||||||
}).catch(err => { |
|
||||||
console.log(err); |
|
||||||
}); |
|
||||||
} |
|
||||||
}, |
|
||||||
saveAll() { // 保存判分点 |
|
||||||
if (!this.formData.lcJudgmentPoint.name) { |
|
||||||
this.$message.warning(`判分点名称不能为空`); |
|
||||||
return; |
|
||||||
} |
|
||||||
if (this.isNameRepeat) { |
|
||||||
this.$message.warning(`当前判分点名称已存在`); |
|
||||||
return; |
|
||||||
} |
|
||||||
if (!this.formData.lcJudgmentPoint.experimentalRequirements) { |
|
||||||
this.$message.warning(`实验要求不能为空`); |
|
||||||
return; |
|
||||||
} |
|
||||||
if (!this.tableData.length) { |
|
||||||
this.$message.warning(`请添加判分规则`); |
|
||||||
return; |
|
||||||
} else { |
|
||||||
for (let i = 0; i < this.tableData.length; i++) { |
|
||||||
if (this.tableData[i].isSubject && !this.tableData[i].operationIds) { |
|
||||||
this.$message.warning(`第${i + 1}项请选择操作点`); |
|
||||||
return; |
|
||||||
} else if (this.tableData[i].isSubject && !this.tableData[i].isSave) { |
|
||||||
this.$message.warning(`第${i + 1}项，未保存`); |
|
||||||
return; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
let tempArr = []; |
|
||||||
this.tableData.forEach(i => { |
|
||||||
if (i.isSubject) { |
|
||||||
let obj = { |
|
||||||
emptyOne: "", |
|
||||||
emptyTwo: "", |
|
||||||
id: i.id ? i.id : "", |
|
||||||
lcId: i.lcId, |
|
||||||
type: i.type ? i.type : "", |
|
||||||
operationIds: i.operationIds, |
|
||||||
resultOperation: i.resultOperation, |
|
||||||
ruleOperation: i.ruleOperation |
|
||||||
}; |
|
||||||
//题目类型(1选择 2判断 3填空 4问答 5指标结果) |
|
||||||
if (i.type == 1 || i.type == 2) { |
|
||||||
obj.emptyOne = i.subjectId ? i.subjectId.toString() : ""; |
|
||||||
obj.emptyTwo = i.value1 ? i.value1.toString() : ""; |
|
||||||
} else if (i.type == 3) { |
|
||||||
obj.emptyOne = i.subjectId ? i.subjectId.toString() : ""; |
|
||||||
obj.emptyTwo = i.value1; |
|
||||||
} else if (i.type == 4) { |
|
||||||
if (i.value1 === "无限制") { |
|
||||||
obj.emptyOne = i.value1; // 问答题,传的不是题目id |
|
||||||
} else if (i.value1 && i.value2) { |
|
||||||
obj.emptyOne = `${i.value1},${i.value2}`; // 问答题,传的不是题目id |
|
||||||
} |
|
||||||
obj.emptyTwo = i.value3; |
|
||||||
} else if (i.type == 5) { |
|
||||||
// obj.emptyOne = i.value1; // 选择指标不传 |
|
||||||
obj.emptyOne = i.subjectId ? i.subjectId.toString() : ""; |
|
||||||
obj.emptyTwo = `${i.value2}${i.value3}~${i.value4}${i.value5}`; |
|
||||||
} |
|
||||||
tempArr.push(obj); |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
this.formData.lcJudgmentRuleList = tempArr; |
|
||||||
if (this.isAdd) { // 新增判分点 |
|
||||||
this.$post(this.api.addJudgmentPoint, this.formData).then(res => { |
|
||||||
if (res.status === 200) { |
|
||||||
this.$message.success("新增判分点成功"); |
|
||||||
this.Back(); |
|
||||||
} else { |
|
||||||
this.$message.warning(res.message); |
|
||||||
} |
|
||||||
}).catch(err => { |
|
||||||
console.log(err); |
|
||||||
}); |
|
||||||
} else if (this.isEdit) { // 编辑判分点 |
|
||||||
this.$post(this.api.updateJudgmentPoint, this.formData).then(res => { |
|
||||||
if (res.status === 200) { |
|
||||||
this.$message.success("更新判分点成功"); |
|
||||||
this.Back(); |
|
||||||
} else { |
|
||||||
this.$message.warning(res.message); |
|
||||||
} |
|
||||||
}).catch(err => { |
|
||||||
console.log(err); |
|
||||||
}); |
|
||||||
} |
|
||||||
}, |
|
||||||
addRule() { // 新增规则 |
|
||||||
this.isAddRule = true; |
|
||||||
this.tableData.length && this.tableData.push({ruleOperation: 0, indexNo: ""}); |
|
||||||
this.tableData.push({ |
|
||||||
indexNo: this.tableData.length ? parseInt(this.tableData.length/2)+1 : 1, |
|
||||||
isSubject: true, |
|
||||||
isDisabled: false, // 不禁用 |
|
||||||
isSave: false, // 未保存 |
|
||||||
lcId: this.lcId, |
|
||||||
resultOperation: 0, |
|
||||||
ruleOperation: 0, |
|
||||||
operationIds: "", |
|
||||||
value1: "", |
|
||||||
value2: "", |
|
||||||
value3: "", |
|
||||||
value4: "", |
|
||||||
value5: "" |
|
||||||
}); |
|
||||||
}, |
|
||||||
changeResult(row) { // （左右）结果运算符(0：且 1：或 默认0) |
|
||||||
row.resultOperation = row.resultOperation === 0 ? 1 : 0; |
|
||||||
}, |
|
||||||
changeRule(row, index) { // （上下）规则运算符(0：且 1：或 默认0) |
|
||||||
row.ruleOperation = row.ruleOperation === 0 ? 1 : 0; |
|
||||||
this.tableData[index - 1].ruleOperation = row.ruleOperation; |
|
||||||
}, |
|
||||||
handleEdit(row) { // 处理编辑规则 |
|
||||||
this.tableDataCopy = deepCopy(this.tableData); // 深拷贝 |
|
||||||
row.isDisabled = false; |
|
||||||
row.isSave = false; |
|
||||||
}, |
|
||||||
handleSave(row, index) { // 处理保存规则 |
|
||||||
let keys = this.$refs[`tree-${index}`].getCheckedKeys(); |
|
||||||
if (!keys.length || !row.operationIds) { |
|
||||||
this.$message.warning(`请选择操作点`); |
|
||||||
return; |
|
||||||
} else { |
|
||||||
//题目类型(1选择 2判断 3填空 4问答 5指标结果) |
|
||||||
if (row.type == 1 || row.type == 2) { |
|
||||||
if (!row.value1) { |
|
||||||
this.$message.warning(`请选择正确答案`); |
|
||||||
return; |
|
||||||
} |
|
||||||
} else if (row.type == 3) { |
|
||||||
if (!row.value1) { |
|
||||||
this.$message.warning(`请输入字段要求`); |
|
||||||
return; |
|
||||||
} |
|
||||||
} else if (row.type == 4) { |
|
||||||
if (!row.value1) { |
|
||||||
this.$message.warning(`请选择字数要求`); |
|
||||||
return; |
|
||||||
} else if (row.value1 !== "无限制" && !row.value2) { |
|
||||||
this.$message.warning(`请输入字数要求`); |
|
||||||
return; |
|
||||||
} else if (!row.value3) { |
|
||||||
this.$message.warning(`请输入字段要求`); |
|
||||||
return; |
|
||||||
} |
|
||||||
} else if (row.type == 5) { |
|
||||||
if (!row.value2 || !row.value5) { |
|
||||||
this.$message.warning(`请选择交易指标区间`); |
|
||||||
return; |
|
||||||
} else if (!row.value3 || !row.value4) { |
|
||||||
this.$message.warning(`请输入交易指标区间`); |
|
||||||
} else if (row.value3 > row.value4) { |
|
||||||
this.$message.warning(`第一个指标必须小于第二个指标`); |
|
||||||
return; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
row.isSave = true; |
|
||||||
row.isDisabled = true; |
|
||||||
this.isAddRule = false; |
|
||||||
}, |
|
||||||
handleCancel(row, index) { // 处理取消编辑规则 |
|
||||||
if (row.isSave) { |
|
||||||
this.$set(this.tableData, index, this.tableDataCopy[index]); |
|
||||||
if (!this.tableData[index].operationIds) { |
|
||||||
this.$refs[`tree-${index}`].setCheckedKeys([]); |
|
||||||
} else { |
|
||||||
this.$refs[`tree-${index}`].setCheckedKeys([this.tableData[index].operationIds]); |
|
||||||
} |
|
||||||
} else { |
|
||||||
this.tableData.splice(index, 1); |
|
||||||
index ? this.tableData.splice(index - 1, 1) : this.tableData.splice(0, 1); |
|
||||||
this.isAddRule = false; |
|
||||||
} |
|
||||||
}, |
|
||||||
handleDelete(row, index) { // 处理删除规则 |
|
||||||
this.$confirm("此操作将永久删除该规则, 是否继续?", "提示", { |
|
||||||
confirmButtonText: "确定", |
|
||||||
cancelButtonText: "取消", |
|
||||||
type: "warning", |
|
||||||
center: true |
|
||||||
}).then(() => { |
|
||||||
this.tableData.splice(index, 1); |
|
||||||
index ? this.tableData.splice(index - 1, 1) : this.tableData.splice(0, 1); |
|
||||||
this.isAddRule = false; |
|
||||||
}).catch(() => { |
|
||||||
}); |
|
||||||
}, |
|
||||||
// 表头样式设置 |
|
||||||
headClass() { |
|
||||||
return "text-align: center;"; |
|
||||||
}, |
|
||||||
// 表格样式设置 |
|
||||||
rowClass() { |
|
||||||
return "text-align: center;"; |
|
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
.content { |
|
||||||
position: relative; |
|
||||||
top: 10px; |
|
||||||
padding: 0 10px; |
|
||||||
background-color: #ffffff; |
|
||||||
|
|
||||||
.header { |
|
||||||
border-bottom: 1px dashed #ccc; |
|
||||||
height: 45px; |
|
||||||
line-height: 45px; |
|
||||||
font-size: 14px; |
|
||||||
font-weight: 600; |
|
||||||
padding: 0 10px; |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
|
|
||||||
.back { |
|
||||||
line-height: 3; |
|
||||||
padding-left: 10px; |
|
||||||
|
|
||||||
span { |
|
||||||
font-size: 14px; |
|
||||||
font-weight: 600; |
|
||||||
padding-left: 5px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.title { |
|
||||||
font-weight: bold; |
|
||||||
margin-left: 20px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// 表单容器 |
|
||||||
.form-con { |
|
||||||
padding-bottom: 24px; |
|
||||||
border-bottom: 1px dashed #ccc; |
|
||||||
|
|
||||||
.title { |
|
||||||
padding: 10px 0; |
|
||||||
border-bottom: 1px dashed #ccc; |
|
||||||
display: flex; |
|
||||||
|
|
||||||
.black { |
|
||||||
width: 8px; |
|
||||||
height: 18px; |
|
||||||
background-color: #333; |
|
||||||
margin-right: 10px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.item { |
|
||||||
display: flex; |
|
||||||
margin-top: 24px; |
|
||||||
|
|
||||||
.label { |
|
||||||
width: 200px; |
|
||||||
text-align: right; |
|
||||||
padding-right: 20px; |
|
||||||
line-height: 35px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// 规则容器 |
|
||||||
.rule-con { |
|
||||||
padding-bottom: 60px; |
|
||||||
|
|
||||||
.title-con { |
|
||||||
height: 60px; |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
.title { |
|
||||||
display: flex; |
|
||||||
|
|
||||||
.black { |
|
||||||
width: 8px; |
|
||||||
height: 18px; |
|
||||||
background-color: #333; |
|
||||||
margin-right: 10px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// 滚动条的宽度 |
|
||||||
/deep/ ::-webkit-scrollbar { |
|
||||||
width: 6px; // 横向滚动条 |
|
||||||
height: 6px; // 纵向滚动条 必写 |
|
||||||
} |
|
||||||
|
|
||||||
// 滚动条的滑块 |
|
||||||
/deep/ ::-webkit-scrollbar-thumb { |
|
||||||
background-color: #9278ff; |
|
||||||
border-radius: 3px; |
|
||||||
-webkit-box-shadow: inset 0 0 5px #dddddd; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ ::-webkit-scrollbar-track { |
|
||||||
/*滚动条里面轨道*/ |
|
||||||
-webkit-box-shadow: inset 0 0 5px #dddddd; |
|
||||||
border-radius: 0; |
|
||||||
background: #dddddd; |
|
||||||
} |
|
||||||
|
|
||||||
.tree-con { |
|
||||||
height: 230px; |
|
||||||
position: relative; |
|
||||||
|
|
||||||
.mask { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
bottom: 0; |
|
||||||
right: 10px; |
|
||||||
cursor: not-allowed; |
|
||||||
z-index: 99999; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@mixin block { |
|
||||||
padding: 10px; |
|
||||||
border: 1px solid #e4e7ed; |
|
||||||
border-radius: 4px; |
|
||||||
} |
|
||||||
.block1 { |
|
||||||
@include block; |
|
||||||
height: 230px; |
|
||||||
background-color: #fff; |
|
||||||
overflow: auto; |
|
||||||
} |
|
||||||
.block { |
|
||||||
@include block; |
|
||||||
min-height: 100px; |
|
||||||
background-color: #fff; |
|
||||||
overflow: auto; |
|
||||||
|
|
||||||
.box { |
|
||||||
padding: 0 24px; |
|
||||||
} |
|
||||||
|
|
||||||
.line { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
margin: 12px 0; |
|
||||||
|
|
||||||
.label { |
|
||||||
//width: 100px; |
|
||||||
margin-right: 10px; |
|
||||||
text-align: right; |
|
||||||
font-size: 12px; |
|
||||||
|
|
||||||
&.mini { |
|
||||||
width: auto; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.action { |
|
||||||
flex: 1; |
|
||||||
text-align: left; |
|
||||||
|
|
||||||
/deep/ .el-input { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
&.steps { |
|
||||||
@include block; |
|
||||||
display: inline-flex; |
|
||||||
flex-direction: column; |
|
||||||
height: 150px; |
|
||||||
font-size: 12px; |
|
||||||
overflow: auto; |
|
||||||
|
|
||||||
.radio-wrap { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
|
|
||||||
.child { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
margin-left: 15px; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .el-radio { |
|
||||||
margin: 3px 0; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.inputs { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
/deep/ .el-input { |
|
||||||
width: 100px; |
|
||||||
margin: 0 5px; |
|
||||||
|
|
||||||
&:first-child { |
|
||||||
margin-left: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&.a-line { |
|
||||||
display: inline-flex; |
|
||||||
} |
|
||||||
|
|
||||||
.mini-textarea, |
|
||||||
/deep/ .mini-textarea .el-textarea__inner { |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.number-input { |
|
||||||
/deep/ .el-input__inner { |
|
||||||
padding-right: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
Loading…
Reference in new issue