<template>
|
<div>
|
<template v-for='(tag, index) in tags'>
|
<a-tooltip :key='tag' :title='tag'>
|
<a-tag :key='tag' :closable='true' @close='() => handleClose(tag)'>
|
{{ tag }}
|
</a-tag>
|
</a-tooltip>
|
|
</template>
|
<a-input
|
v-if='inputVisible'
|
ref='input'
|
type='text'
|
size='small'
|
:style="{ width: '78px' }"
|
:value='inputValue'
|
@change='handleInputChange'
|
@blur='handleInputConfirm'
|
@keyup.enter='handleInputConfirm'
|
/>
|
<a-tag v-else style='background: #fff; borderStyle: dashed;' @click='showInput'>
|
<a-icon type='plus' />
|
新增
|
</a-tag>
|
</div>
|
</template>
|
|
<script>
|
import { deleteAction, getAction, postAction } from '@api/manage'
|
|
export default {
|
name: 'CondTag',
|
props: {
|
currSelectedTyp: {
|
type: Object,
|
required: true
|
},
|
type: {
|
type: Number,
|
required: true
|
}
|
},
|
watch: {
|
currSelectedTyp: {
|
immediate: true,
|
handler(val) {
|
this.queryCondList()
|
|
}
|
}
|
},
|
data() {
|
return {
|
tags: [],
|
inputVisible: false,
|
inputValue: '',
|
records:[],
|
url: {
|
addCond: '/lims/testing/cond/add',
|
editCond: '/lims/testing/cond/edit',
|
delCond: '/lims/testing/cond/delete',
|
listCond: '/lims/testing/cond/list'
|
}
|
}
|
},
|
mounted() {
|
},
|
methods: {
|
handleClose(removedTag) {
|
const tag = this.records.filter(tag => tag.cond === removedTag)
|
this.handleDel(tag[0].id)
|
|
},
|
|
showInput() {
|
this.inputVisible = true
|
this.$nextTick(function() {
|
this.$refs.input.focus()
|
})
|
},
|
|
handleInputChange(e) {
|
this.inputValue = e.target.value
|
},
|
|
handleInputConfirm() {
|
const inputValue = this.inputValue
|
/* let tags = this.tags;
|
if (inputValue && tags.indexOf(inputValue) === -1) {
|
tags = [...tags, inputValue];
|
}
|
console.log(tags);*/
|
let tags = this.tags;
|
if (inputValue && tags.indexOf(inputValue) === -1) {
|
this.handleAdd(inputValue)
|
}
|
Object.assign(this, {
|
// tags,
|
inputVisible: false,
|
inputValue: ''
|
})
|
},
|
queryCondList() {
|
let params = Object.assign({}, {
|
standardId: this.currSelectedTyp.standardId,
|
categoryId: this.currSelectedTyp.pid,
|
typeId: this.currSelectedTyp.id,
|
type:this.type
|
})
|
if (!params.standardId || !params.categoryId || !params.typeId) {
|
this.$message.warning('参数错误！')
|
return false
|
}
|
getAction(this.url.listCond, params).then(res => {
|
if (res.success) {
|
//this.$message.success(res.message)
|
this.tags = []
|
this.records = res.result.records
|
this.records.forEach(item => {
|
if (item.cond) {
|
this.tags.push(item.cond)
|
}
|
})
|
|
}
|
})
|
},
|
handleAdd(value) {
|
let params = Object.assign({}, {
|
standardId: this.currSelectedTyp.standardId,
|
categoryId: this.currSelectedTyp.pid,
|
typeId: this.currSelectedTyp.id,
|
type: this.type,
|
cond: value
|
})
|
postAction(this.url.addCond, params).then(res => {
|
if (res.success) {
|
this.$message.success(res.message)
|
this.queryCondList()
|
}
|
})
|
},
|
handleDel(id) {
|
deleteAction(this.url.delCond,{id:id}).then(res=>{
|
if(res.success){
|
this.$message.success(res.message)
|
this.queryCondList()
|
}
|
})
|
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
