<template>
|
<GlobalWindow
|
:title="title"
|
width="50%"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<div class="box">
|
<div class="box-info">
|
<i class="el-icon-info"></i>
|
<span>最多可添加50个标签</span>
|
</div>
|
<div class="box-serch">
|
<el-input v-model="value" placeholder="请输入请输入新标签"></el-input>
|
<el-button type="primary" style="margin-left: 15px;" @click="add">添加</el-button>
|
</div>
|
<div class="box-list">
|
<div class="box-list-item" v-for="(item, index) in list" :key="index">
|
<span>{{item.name}}</span>
|
<i class="el-icon-circle-close" @click="dele(item.id)"></i>
|
</div>
|
</div>
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { createLabels, list, labelsDeleteById } from '@/api/business/knowledge'
|
export default {
|
name: 'tagLibrary',
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data () {
|
return {
|
value: '',
|
list: []
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/knowledge',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
async open(title, target) {
|
this.title = title
|
await this.getData()
|
this.visible = true
|
},
|
async getData() {
|
this.list = await list()
|
},
|
// 添加标签
|
async add() {
|
if (!this.value) return this.$message.warning('请先输入内容')
|
let res = await createLabels({ name: this.value })
|
await this.getData()
|
this.$emit('refresh')
|
this.value = ''
|
this.$message.success('添加成功')
|
},
|
// 删除
|
async dele(id) {
|
let res = await labelsDeleteById(id)
|
await this.getData()
|
this.$emit('refresh')
|
this.$message.success('删除成功')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
.box-info {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 15px;
|
span {
|
color: rgba(154,154,154,1);
|
font-size: 14px;
|
margin-left: 6px;
|
}
|
}
|
.box-serch {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 20px;
|
}
|
.box-list {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
.box-list-item {
|
padding: 5px 10px;
|
box-sizing: border-box;
|
border-radius: 20px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
background-color: rgba(239,239,239,1);
|
cursor: pointer;
|
margin-right: 15px;
|
margin-bottom: 15px;
|
span {
|
color: rgba(16,16,16,1);
|
font-size: 16px;
|
margin-right: 10px;
|
}
|
i {
|
font-size: 20px;
|
color: red;
|
}
|
}
|
}
|
}
|
</style>
|
