<template>
<div class="codeItem ">
<div class="inputContent">
<div class="inputBox">
<red-star />
<input-vue title="位数" width="150px" v-model.number="itemInfo.snDigit">
</input-vue>
</div>
</div>
<div class="inputContent">
<div class="inputBox">
<red-star />
<input-vue title="名称" v-model="itemInfo.snDigitName"></input-vue>
</div>
</div>
<div class="Content_content">
<div class="left_title"><red-star />编码规则：</div>
<div class="right_content">
<div class="title">
<div class="title_item">
<input-vue>
<el-checkbox v-model="itemInfo.checked" >是否关联前一项</el-checkbox>
</input-vue>
</div>
<div class="title_item" >
<input-vue title="关联项名称">
<el-select @change="changitemInfo"
v-model="relevanceName"
filterable
placeholder="请选择"
style="width: 130px"
>
<el-option
v-for="(item,index) in NameList"
:key="index"
:label="item.snDigitName"
:value="item.snDigitName"
>
</el-option>
</el-select>
</input-vue>
</div>
<div class="title_item">
<i class="el-icon-circle-plus icon" @click="addAry"></i>
</div>
</div>
<div class="right_content_conetent">
<div v-for="(item,index) in itemInfo.itemList" :key="index">
<code-item v-model=" itemInfo.itemList[index]" @upmove="upmove(index)" @downmove="downmove(index)" @remove="remove(index)" :checked="checked" :codeList="codelist"></code-item>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import InputVue from '../input/inputVue.vue'
import RedStar from '../redStar.vue'
import codeItem from './codeItem.vue'
export default {
components: { codeItem, InputVue, RedStar },
props:['ruleList','allInfo','index'],
// model: {
// prop: 'snDigitOrder',
// event: 'changeSnDigitOrder'
// },
mounted(){
this.itemInfo = {...this.ruleList} //单个框数据
// allInfo 全部数据
// this.itemInfo = this.ruleList // 根据 对象的性质
// this.$on('submitCode',()=>{console.log(11);})
// this.codeItemInfo =
},
data(){
return{
checked:false,
itemInfo:{},
relevanceName:'',
codelist:'',
codeItemInfo:''//编码详情
}
},
methods:{
remove(index){
this.itemInfo.itemList.splice(index,1)
},
upmove(index){
if(index==0)return
console.log(this.itemInfo);
let temp = this.itemInfo.itemList[index-1]
this.itemInfo.itemList[index-1] =this.itemInfo.itemList[index]
this.itemInfo.itemList[index] =temp
console.log(this.itemInfo.itemList[index]);
},
downmove(index){
console.log(index, this.itemInfo.itemList.length-1);
if(index==this.itemInfo.itemList.length-1 )return
let temp = this.itemInfo.itemList[index+1]
this.itemInfo.itemList[index+1] =this.itemInfo.itemList[index]
this.itemInfo.itemList[index] =temp
},
addAry(){
console.log( this.itemInfo);
this.itemInfo.itemList.push({
digitItem:'',
digitPre:'',
digitItemIllustration:''
})
},
changitemInfo(){
const temp = this.NameList.findIndex(item => {
return item.snDigitName == this.relevanceName
})
if(temp==-1)return []
const ary = this.NameList[temp].itemList.map(item => {
return { digitItem:item.digitItem}
})
console.log(ary,"======ary=====");
this.codelist = ary
// this.codelist = temp
},
},
watch:{
itemInfo:{
handler(vls){
this.changitemInfo()
// iteminfo改变时改变父组件
// 判断是否带前项编码
// if(!vls.checked){
// const temp = vls.itemList.map(item => {
// item.itemList = {
// digitItem:item.digitItem,
// digitItemIllustration:item.digitItemIllustration
// }
// return item
// })
// this.$emit('changeRuleList',{data:temp,index:this.index})
// // console.log(temp, "-===========================",vls);
// }else{
this.$emit('changeRuleList',{data:vls,index:this.index})
// }
},
deep:true
},
allInfo:{
handler(vls){
this.changitemInfo()
},
deep:true
},
// checked(){
// this.subInfo(this.itemInfo)
// }
// ruleList:{
// handler(vls){
// if(this.itemInfo.digitItem)
// this.itemInfo = {...vls}
// },
// deep:true,
// immediate:true
// }
},
computed:{
NameList(){
// console.log(this.allInfo[0].itemList[0].digitItem,"=========");
const temp = [...this.allInfo]
const temp2 = temp.slice (0 ,this.index)
// console.log(temp2[0].itemList[0].digitItem,"+=====temp2====");
return [...temp2]
// return []
},
// codeList(){
// const index = this.allInfo.findIndex(item => {
// return item.snDigitName = this.relevanceName
// // console.log(item.snDigitName , this.relevanceName);
// })
// // if(index==-1) return []
// // const temp = this.ruleList[index].itemList
// // return [...temp]
// return index
// }
}
}
</script>
<style lang="scss" scoped>
.codeItem {
display: flex;
flex: 1;
.inputContent {
flex: 1;
.inputBox {
display: flex;
align-items: center;
}
}
.Content_content {
flex: 3;
display: flex;
// align-items:center;
.left_title{
line-height: 50px;
padding: 0 10px;
}
.right_content{
flex: 1;
.title{
align-items:center;
display: flex;
.title_item{
flex: 1;
.icon{
width: 40px;
height: 40px;
color: skyblue;
// margin-left: 10px;
text-align: center;
font-size: 20px;
line-height: 40px;
}
}
}
.right_content_conetent{
display: flex;
flex-direction: column;
/* justify-content: right; */
align-items: end;
}
}
}
}
</style>
