|
@@ -20,19 +20,21 @@
|
|
class="bs-el-button-default"
|
|
class="bs-el-button-default"
|
|
icon="el-icon-plus"
|
|
icon="el-icon-plus"
|
|
style="margin-left: 10px"
|
|
style="margin-left: 10px"
|
|
- @click="addLabel"
|
|
|
|
|
|
+ @click="addLabelRelation"
|
|
/>
|
|
/>
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
|
|
+ <!-- 配置按钮 -->
|
|
|
|
+ <el-button type="text" @click="manageLabel">管理</el-button>
|
|
<!-- 标签列表弹窗 -->
|
|
<!-- 标签列表弹窗 -->
|
|
<el-dialog
|
|
<el-dialog
|
|
class="bs-dialog-wrap bs-el-dialog"
|
|
class="bs-dialog-wrap bs-el-dialog"
|
|
:append-to-body="true"
|
|
:append-to-body="true"
|
|
:before-close="handleClose"
|
|
:before-close="handleClose"
|
|
:visible.sync="dialogFormVisible"
|
|
:visible.sync="dialogFormVisible"
|
|
- title="选择标签"
|
|
|
|
|
|
+ :title="isManage ? '标签管理' : '选择标签'"
|
|
width="1000px"
|
|
width="1000px"
|
|
>
|
|
>
|
|
- <div v-loading="labelCheckLoading">
|
|
|
|
|
|
+ <div>
|
|
<el-form
|
|
<el-form
|
|
:inline="true"
|
|
:inline="true"
|
|
class="bs-el-form filter-container"
|
|
class="bs-el-form filter-container"
|
|
@@ -68,7 +70,6 @@
|
|
/>
|
|
/>
|
|
</el-select>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
-
|
|
|
|
<el-form-item>
|
|
<el-form-item>
|
|
<el-button
|
|
<el-button
|
|
type="primary"
|
|
type="primary"
|
|
@@ -77,57 +78,82 @@
|
|
查询
|
|
查询
|
|
</el-button>
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
+ <el-form-item>
|
|
|
|
+ <el-button
|
|
|
|
+ v-show="isManage"
|
|
|
|
+ type="primary"
|
|
|
|
+ class="bs-el-button-default"
|
|
|
|
+ @click="insertLabel"
|
|
|
|
+ >
|
|
|
|
+ 新增
|
|
|
|
+ </el-button>
|
|
|
|
+ </el-form-item>
|
|
</el-form>
|
|
</el-form>
|
|
- <!-- 标签选项组 -->
|
|
|
|
- <el-checkbox-group
|
|
|
|
- v-model="checkLabelList"
|
|
|
|
- style="padding-bottom: 10px"
|
|
|
|
|
|
+ <el-table
|
|
|
|
+ ref="labelTable"
|
|
|
|
+ v-loading="labelCheckLoading"
|
|
|
|
+ class="bs-el-table bs-scrollbar"
|
|
|
|
+ element-loading-text="正在加载中..."
|
|
|
|
+ :data="labelList"
|
|
|
|
+ row-key="id"
|
|
|
|
+ @select="labelCheckChange"
|
|
|
|
+ @select-all="selectAll"
|
|
>
|
|
>
|
|
- <el-row :gutter="2">
|
|
|
|
- <el-col
|
|
|
|
- v-for="label in labelList"
|
|
|
|
- :key="label.id"
|
|
|
|
- :span="4"
|
|
|
|
- style="padding-top: 10px"
|
|
|
|
- >
|
|
|
|
- <el-tooltip
|
|
|
|
- v-if="label.labelDesc || getByteLength(label.labelName) > 18"
|
|
|
|
- effect="light"
|
|
|
|
- placement="top-start"
|
|
|
|
|
|
+ <el-empty slot="empty" />
|
|
|
|
+ <el-table-column
|
|
|
|
+ key="selection"
|
|
|
|
+ v-if="!isManage"
|
|
|
|
+ type="selection"
|
|
|
|
+ width="55"
|
|
|
|
+ />
|
|
|
|
+ <el-table-column
|
|
|
|
+ key="labelName"
|
|
|
|
+ label="标签名称"
|
|
|
|
+ prop="labelName"
|
|
|
|
+ show-overflow-tooltip
|
|
|
|
+ />
|
|
|
|
+ <el-table-column
|
|
|
|
+ key="labelType"
|
|
|
|
+ label="标签类型"
|
|
|
|
+ prop="labelType"
|
|
|
|
+ show-overflow-tooltip
|
|
|
|
+ />
|
|
|
|
+ <el-table-column
|
|
|
|
+ key="labelDesc"
|
|
|
|
+ label="标签说明"
|
|
|
|
+ prop="labelDesc"
|
|
|
|
+ show-overflow-tooltip
|
|
|
|
+ />
|
|
|
|
+ <el-table-column
|
|
|
|
+ key="opt"
|
|
|
|
+ align="center"
|
|
|
|
+ label="操作"
|
|
|
|
+ width="200"
|
|
|
|
+ v-if="isManage"
|
|
|
|
+ >
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <el-button
|
|
|
|
+ class="bs-el-button-default"
|
|
|
|
+ @click="editLabel(scope.row)"
|
|
>
|
|
>
|
|
- <div slot="content">
|
|
|
|
- <div v-if="getByteLength(label.labelName) > 18">
|
|
|
|
- 名称: {{ label.labelName }}
|
|
|
|
- </div>
|
|
|
|
- <div v-if="label.labelDesc">
|
|
|
|
- 描述: {{ label.labelDesc }}
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <el-checkbox
|
|
|
|
- :label="label.id"
|
|
|
|
- @change="labelCheckChange(label)"
|
|
|
|
- >
|
|
|
|
- {{ getByteLength(label.labelName) > 18 ? ellipsis(label.labelName, 18) : label.labelName }}
|
|
|
|
- </el-checkbox>
|
|
|
|
- </el-tooltip>
|
|
|
|
- <el-checkbox
|
|
|
|
- v-else
|
|
|
|
- :label="label.id"
|
|
|
|
- @change="labelCheckChange(label)"
|
|
|
|
|
|
+ 编辑
|
|
|
|
+ </el-button>
|
|
|
|
+ <el-button
|
|
|
|
+ class="bs-el-button-default"
|
|
|
|
+ @click="deleteLabel(scope.row.id)"
|
|
>
|
|
>
|
|
- {{ label.labelName }}
|
|
|
|
- </el-checkbox>
|
|
|
|
- </el-col>
|
|
|
|
- </el-row>
|
|
|
|
- </el-checkbox-group>
|
|
|
|
-
|
|
|
|
|
|
+ 删除
|
|
|
|
+ </el-button>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
<div class="bs-pagination">
|
|
<div class="bs-pagination">
|
|
<el-pagination
|
|
<el-pagination
|
|
class="bs-el-pagination"
|
|
class="bs-el-pagination"
|
|
popper-class="bs-el-pagination"
|
|
popper-class="bs-el-pagination"
|
|
:current-page="current"
|
|
:current-page="current"
|
|
:page-size="sizeLabel"
|
|
:page-size="sizeLabel"
|
|
- :page-sizes="[20, 40, 60, 80]"
|
|
|
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
:total="totalCount"
|
|
:total="totalCount"
|
|
background
|
|
background
|
|
layout="total, prev, pager, next,sizes,jumper"
|
|
layout="total, prev, pager, next,sizes,jumper"
|
|
@@ -137,28 +163,48 @@
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="el-dialog__footer">
|
|
<div class="el-dialog__footer">
|
|
- <el-button @click="handleClose">
|
|
|
|
|
|
+ <el-button
|
|
|
|
+ v-show="!isManage"
|
|
|
|
+ class="bs-el-button-default"
|
|
|
|
+ @click="handleClose"
|
|
|
|
+ >
|
|
取消
|
|
取消
|
|
</el-button>
|
|
</el-button>
|
|
<el-button
|
|
<el-button
|
|
|
|
+ v-show="!isManage"
|
|
type="primary"
|
|
type="primary"
|
|
@click="commitLabel"
|
|
@click="commitLabel"
|
|
>
|
|
>
|
|
确定
|
|
确定
|
|
</el-button>
|
|
</el-button>
|
|
|
|
+ <el-button
|
|
|
|
+ v-show="isManage"
|
|
|
|
+ class="bs-el-button-default"
|
|
|
|
+ @click="handleClose"
|
|
|
|
+ >
|
|
|
|
+ 返回
|
|
|
|
+ </el-button>
|
|
</div>
|
|
</div>
|
|
|
|
+ <label-edit
|
|
|
|
+ v-if="editFormVisible"
|
|
|
|
+ @afterEdit="afterEdit"
|
|
|
|
+ ref="labelEdit"
|
|
|
|
+ />
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
+import LabelEdit from './LabelConfigEdit'
|
|
import { pageMixins } from 'packages/js/mixins/page'
|
|
import { pageMixins } from 'packages/js/mixins/page'
|
|
-import { getLabelType, labelList, getLabelListByDatasetId } from 'packages/js/utils/LabelConfigService'
|
|
|
|
|
|
+import {getLabelType, labelList, getLabelListByDatasetId, removeLabel} from 'packages/js/utils/LabelConfigService'
|
|
|
|
|
|
export default {
|
|
export default {
|
|
name: 'LabelSelect',
|
|
name: 'LabelSelect',
|
|
- components: {},
|
|
|
|
|
|
+ components: {
|
|
|
|
+ LabelEdit
|
|
|
|
+ },
|
|
mixins: [pageMixins],
|
|
mixins: [pageMixins],
|
|
props: {
|
|
props: {
|
|
// 选中的标签id列表
|
|
// 选中的标签id列表
|
|
@@ -177,17 +223,20 @@ export default {
|
|
},
|
|
},
|
|
data () {
|
|
data () {
|
|
return {
|
|
return {
|
|
|
|
+ isManage: false,
|
|
idListCopy: this.idList,
|
|
idListCopy: this.idList,
|
|
|
|
+ // 选中的标签列表
|
|
selectLabelList: [],
|
|
selectLabelList: [],
|
|
// 初始选中的标签列表
|
|
// 初始选中的标签列表
|
|
selectLabelListInitial: [],
|
|
selectLabelListInitial: [],
|
|
labelList: [],
|
|
labelList: [],
|
|
dialogFormVisible: false,
|
|
dialogFormVisible: false,
|
|
|
|
+ // 编辑弹窗可见性
|
|
|
|
+ editFormVisible: false,
|
|
searchForm: {
|
|
searchForm: {
|
|
labelName: '',
|
|
labelName: '',
|
|
labelType: ''
|
|
labelType: ''
|
|
},
|
|
},
|
|
- checkLabelList: [],
|
|
|
|
sizeLabel: 20,
|
|
sizeLabel: 20,
|
|
labelTypeList: [],
|
|
labelTypeList: [],
|
|
labelCheckLoading: false
|
|
labelCheckLoading: false
|
|
@@ -206,11 +255,13 @@ export default {
|
|
// labelList变化时,根据selectLabelList中项的id,设置选中状态
|
|
// labelList变化时,根据selectLabelList中项的id,设置选中状态
|
|
labelList: {
|
|
labelList: {
|
|
handler (val) {
|
|
handler (val) {
|
|
- this.checkLabelList = []
|
|
|
|
val.forEach((label) => {
|
|
val.forEach((label) => {
|
|
this.selectLabelList.forEach((selected) => {
|
|
this.selectLabelList.forEach((selected) => {
|
|
if (label.id === selected.id) {
|
|
if (label.id === selected.id) {
|
|
- this.checkLabelList.push(label.id)
|
|
|
|
|
|
+ // 设置选中状态
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.$refs.labelTable.toggleRowSelection(label)
|
|
|
|
+ })
|
|
}
|
|
}
|
|
})
|
|
})
|
|
})
|
|
})
|
|
@@ -220,25 +271,25 @@ export default {
|
|
// 根据selectLabelList的变化,将id赋值给idList
|
|
// 根据selectLabelList的变化,将id赋值给idList
|
|
selectLabelList: {
|
|
selectLabelList: {
|
|
handler (val) {
|
|
handler (val) {
|
|
- this.checkLabelList = []
|
|
|
|
this.idListCopy = []
|
|
this.idListCopy = []
|
|
val.forEach((item) => {
|
|
val.forEach((item) => {
|
|
this.idListCopy.push(item.id)
|
|
this.idListCopy.push(item.id)
|
|
- this.checkLabelList.push(item.id)
|
|
|
|
})
|
|
})
|
|
},
|
|
},
|
|
deep: true
|
|
deep: true
|
|
}
|
|
}
|
|
-
|
|
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
/**
|
|
/**
|
|
* 初始化方法
|
|
* 初始化方法
|
|
*/
|
|
*/
|
|
- init () {
|
|
|
|
- this.dialogFormVisible = true
|
|
|
|
- this.getDataList()
|
|
|
|
- this.getLabelType()
|
|
|
|
|
|
+ init (manage) {
|
|
|
|
+ this.isManage = manage
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.dialogFormVisible = true
|
|
|
|
+ this.getDataList()
|
|
|
|
+ this.getLabelType()
|
|
|
|
+ })
|
|
},
|
|
},
|
|
/**
|
|
/**
|
|
* 获取标签类型列表
|
|
* 获取标签类型列表
|
|
@@ -267,10 +318,57 @@ export default {
|
|
this.labelCheckLoading = false
|
|
this.labelCheckLoading = false
|
|
})
|
|
})
|
|
},
|
|
},
|
|
|
|
+ /**
|
|
|
|
+ * 当前页全选
|
|
|
|
+ * @param {*} labelList
|
|
|
|
+ */
|
|
|
|
+ selectAll (labelList) {
|
|
|
|
+ // 如果selectLabelList中包含id相同的项,则忽略,否则,将该项添加到selectLabelList中
|
|
|
|
+ labelList.forEach((label) => {
|
|
|
|
+ if (!this.selectLabelList.some(selected => selected.id === label.id)) {
|
|
|
|
+ this.selectLabelList.push(label)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 新增标签
|
|
|
|
+ */
|
|
|
|
+ insertLabel () {
|
|
|
|
+ this.editFormVisible = true
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.$refs.labelEdit.labelTypeList = this.labelTypeList
|
|
|
|
+ this.$refs.labelEdit.init()
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ editLabel (row) {
|
|
|
|
+ this.editFormVisible = true
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.$refs.labelEdit.labelTypeList = this.labelTypeList
|
|
|
|
+ this.$refs.labelEdit.init(row)
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ deleteLabel (id) {
|
|
|
|
+ this.$confirm('确定删除当前标签吗?', '提示', {
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
+ type: 'warning'
|
|
|
|
+ }).then(() => {
|
|
|
|
+ removeLabel(id).then(() => {
|
|
|
|
+ this.getDataList()
|
|
|
|
+ this.$message.success('删除成功')
|
|
|
|
+ // 如果selectLabelList中包含id相同的项,则从selectLabelList中移除
|
|
|
|
+ if (this.selectLabelList.some(item => item.id === id)) {
|
|
|
|
+ this.selectLabelList = this.selectLabelList.filter(item => item.id !== id)
|
|
|
|
+ }
|
|
|
|
+ this.selectLabelListInitial = _.cloneDeep(this.selectLabelList)
|
|
|
|
+ })
|
|
|
|
+ }).catch(() => {
|
|
|
|
+ })
|
|
|
|
+ },
|
|
/**
|
|
/**
|
|
* 标签选项组选中事件
|
|
* 标签选项组选中事件
|
|
*/
|
|
*/
|
|
- labelCheckChange (label) {
|
|
|
|
|
|
+ labelCheckChange (selection, label) {
|
|
// 如果selectLabelList中包含id相同的项,则从selectLabelList中移除
|
|
// 如果selectLabelList中包含id相同的项,则从selectLabelList中移除
|
|
if (this.selectLabelList.some(item => item.id === label.id)) {
|
|
if (this.selectLabelList.some(item => item.id === label.id)) {
|
|
this.selectLabelList = this.selectLabelList.filter(item => item.id !== label.id)
|
|
this.selectLabelList = this.selectLabelList.filter(item => item.id !== label.id)
|
|
@@ -295,11 +393,17 @@ export default {
|
|
})
|
|
})
|
|
},
|
|
},
|
|
/**
|
|
/**
|
|
- * 点击添加标签按钮
|
|
|
|
|
|
+ * 点击添加标签关联按钮
|
|
*/
|
|
*/
|
|
- addLabel () {
|
|
|
|
|
|
+ addLabelRelation () {
|
|
// 初始化
|
|
// 初始化
|
|
- this.init()
|
|
|
|
|
|
+ this.init(false)
|
|
|
|
+ },
|
|
|
|
+ /**
|
|
|
|
+ * 标签管理按钮
|
|
|
|
+ */
|
|
|
|
+ manageLabel() {
|
|
|
|
+ this.init(true)
|
|
},
|
|
},
|
|
/**
|
|
/**
|
|
* 选中标签类型
|
|
* 选中标签类型
|
|
@@ -323,25 +427,12 @@ export default {
|
|
this.selectLabelListInitial = _.cloneDeep(this.selectLabelList)
|
|
this.selectLabelListInitial = _.cloneDeep(this.selectLabelList)
|
|
this.$emit('commit', this.idListCopy)
|
|
this.$emit('commit', this.idListCopy)
|
|
},
|
|
},
|
|
- getByteLength (str) {
|
|
|
|
- return unescape(encodeURIComponent(str)).length
|
|
|
|
- },
|
|
|
|
- ellipsis (str, len) {
|
|
|
|
- if ((!str && typeof (str) !== 'undefined')) {
|
|
|
|
- return ''
|
|
|
|
- }
|
|
|
|
- let num = 0
|
|
|
|
- const str1 = str
|
|
|
|
- var str = ''
|
|
|
|
- for (let i = 0, lens = str1.length; i < lens; i++) {
|
|
|
|
- num += ((str1.charCodeAt(i) > 255) ? 2 : 1)
|
|
|
|
- if (num > len - 3) {
|
|
|
|
- break
|
|
|
|
- } else {
|
|
|
|
- str = str1.substring(0, i + 1)
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- return str + '...'
|
|
|
|
|
|
+ /**
|
|
|
|
+ * 标签编辑/新增后回调
|
|
|
|
+ */
|
|
|
|
+ afterEdit () {
|
|
|
|
+ this.getDataList()
|
|
|
|
+ this.getLabelType()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|