{extend name="common/common2" /}
{block name="main"}
<style>
.supervise-content{
width: 60%;
height: auto;
margin-bottom: 20px;
border: 1px solid #c3c3c3;
box-shadow:4px 4px 15px #f1f1f1;
padding: 10px;
margin-left: 7%;
}
.question-form{
height: 34px;
line-height: 34px;
margin: 5px 0;
overflow: hidden;
}
.question-form-option{
width: auto;
height: auto;
margin: 5px 0;
overflow: hidden;
}
.question-form-title{
display: inline-block;
width: 70px;
height: 100%;
}
.question-form-option{
height: auto;
margin: 5px 0;
overflow: hidden;
}
.question-form-title{
display: inline-block;
width: 70px;
height: 100%;
}
.question-form-input{
display: inline-block;
width: 65%;
height: 100%;
}
.question-form-input1{
display: inline-block;
width: 80%;
height: 100%;
}
.question-options{
/*width: 640px;*/
width: 90%;
height: 32px;
color: #606266!important;
font-size: 13px!important;
padding: 5px 15px!important;
border-width: 1px;
border-style: solid;
border-color: rgb(229, 230, 231);
}
.xz:focus,.form-select:focus,.question-options:focus{
border-color: #6eb7ff !important;
outline:0;
}
ul, ol {
margin: 0;
}
.standard-table{
overflow: hidden;
}
.standard-input{
width: 100%;
height: 100%;
color: #606266!important;
font-size: 13px!important;
padding: 5px 15px!important;
border-width: 1px;
border-style: solid;
border-color: rgb(229, 230, 231);
}
.list-group-item{
width: 74%;
margin-bottom: 20px;
border: 2px solid var(--themeColor) !important;
position: relative;
z-index: 20;
}
.a_add{
width: 100%;
height: 35px;
line-height: 35px;
text-align: center;
}
.sub_standard{
border: 1px solid #0a6aa1;
margin-bottom: 10px;
padding: 8px;
position: relative;
z-index: 20;
}
.text-danger{
position: absolute;
z-index: 19;
top: 10px;
right: 10px;
/*float: right;*/
}
</style>
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>{$meta_title}</h5>
<div class="ibox-tools">
<a class="toback" href="{:url('index')}">
返回上一页
</a>
</div>
</div>
<div class="ibox-content" id="vueapp">
<form method="post" action="{:url('add')}" class="form-horizontal">
<input type="hidden" name="id" value="{$info['id']|default='0'}">
<input type="hidden" name="content" value="" id="content">
<div class="question-form">
<div class="question-form-title">名称</div>
<div class="question-form-input">
<input type="text" v-model="title" name="title" class="form-control">
</div>
</div>
<div class="question-form">
<div class="question-form-title">备注</div>
<div class="question-form-input">
<input type="text" v-model="remark" name="remark" class="form-control">
</div>
</div>
<div class="question-form">
<a href="javascript:;" style="margin-left:34.5%" @click="addStandard()">添加标准</a>
</div>
<div class="question-form-option">
<ul class="list-group">
<li class="list-group-item" v-for="(item,index) in content" :key="index">
<a href="javascript:void(0)" class="text-danger" @click="delStandard(index)">删除</a>
<div class="question-form">
<div class="question-form-title">标准名称</div>
<div class="question-form-input1">
<input type="text" v-model="item.title" class="question-options">
</div>
</div>
<div class="a_add">
<a href="javascript:;" @click="addSubStandard(index)">添加子标准</a>
</div>
<div class="sub_standard" v-for="(item1,index1) in item.sub" :key="index1">
<a href="javascript:void(0)" class="text-danger" @click="delSubStandard(index,index1)">删除</a>
<div class="question-form">
<div class="question-form-title">子标准名称</div>
<div class="question-form-input1">
<input type="text" v-model="item1.title" class="question-options">
</div>
</div>
<!-- <div class="question-form">-->
<!-- <div class="question-form-title">评分</div>-->
<!-- <div class="question-form-input">-->
<!-- <input type="number" v-model="item1.score" class="question-options">-->
<!-- </div>-->
<!-- </div>-->
<div class="question-form">
<div class="question-form-title">评分标准</div>
<div class="question-form-input1">
<input type="text" v-model="item1.standard" class="question-options">
</div>
</div>
<a href="javascript:;" @click="addkhbz(index,index1)">添加考核标准</a>
<div class="standard-table" >
<table class="table table-bordered">
<thead>
<tr>
<th style="width: 60%;">考核标准内容</th>
<th>分值</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item2,index2) in item1.sub" :key="index2">
<td style="width: 60%;"><input type="text" v-model="item2.title" class="standard-input"></td>
<td><input type="number" onkeyup="clearNoNum1(this)" v-model="item2.score" class="standard-input"></td>
<td><a href="javascript:;" @click="delkhbz(index,index1,index2)" style="color:#ed5565">删除</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
</ul>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-6 col-sm-offset-2">
<button class="btn btn-primary ajax-post" target-form="form-horizontal" type="submit">确 定</button>
<a href="{:url('index')}" class="btn btn-default">取 消</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript" src="/static/vuejs/require.js"></script>
<script>
$(document).ready(function(){
// formSetValue("cate", {$info.cate|default=0});
});
var info = <?=json_encode($info)?>;
var content = JSON.parse(info.content);
var vm = new Vue({
el: '#vueapp',
data: {
title:info.title,
remark:info.remark,
content:content,
maxid:0,
maxsubid:0,
},
computed: {
resoptions: function () {
return JSON.parse(JSON.stringify(this.content));
}
},
watch: {
resoptions: function (newval, oldval) {
const str = JSON.stringify(newval)
$('#content').val(str);
},
},
created: function () {
const str = JSON.stringify(content)
$('#content').val(str);
},
methods: {
addStandard(){
const sub = {
title:'工作标准名称',
score:0,
sub:[{
title:'子标准名称',
score:0,
standard:'评分标准',
sub:[{
title:'考核标准内容',
score:0,
}]
}]
}
this.content.push(sub);
},
addSubStandard(index){
for(let i in this.content){
if(i == Number(index)){
const info = this.content[i];
const sub = {
title:'子标准名称',
score:0,
standard:'评分标准',
sub:[{
title:'考核标准内容',
score:0,
}]
}
info.sub.push(sub);
}
}
},
addkhbz(index,index1){
for(let i in this.content){
if(i == Number(index)){
const info = this.content[i].sub;
for (let o in info){
const info2 = info[o];
if(o == Number(index1)){
const sub = {
title:'考核标准内容',
score:0,
}
info2.sub.push(sub);
}
}
}
}
},
delStandard(index){
const newsArr = []
for (let i in this.content){
if(i != Number(index)){
newsArr.push(this.content[i])
}
}
this.content = newsArr;
},
delSubStandard(index,index1){
for (let i in this.content){
if(i == Number(index)){
const sub = this.content[i].sub;
const newsub = [];
for (let o in sub){
if(o != Number(index1)){
newsub.push(sub[i]);
}
}
this.content[i].sub = newsub;
}
}
},
delkhbz(index,index1,index2){
for (let i in this.content){
if(i == Number(index)){
const sub = this.content[i].sub;
for (let o in sub){
if(o == Number(index1)){
const subsub = sub[o].sub;
const newsub = [];
for (let t in subsub){
if(t != Number(index2)){
newsub.push(subsub[t]);
}
}
this.content[i].sub[o].sub = newsub;
}
}
}
}
},
}
})
</script>
{/block}