From 78c9439e91d11e7e387c5286bd06a7d30dcccd9e Mon Sep 17 00:00:00 2001
From: "hong.yang" <hong.yang@ustcinfo.com>
Date: Tue, 11 Jul 2023 10:40:32 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=95=B0=E6=8D=AE=E9=9B=86=E6=A0=87?=
=?UTF-8?q?=E7=AD=BE=E9=80=89=E6=8B=A9=E5=99=A8=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
数据集标签选择器优化
---
.../src/LabelSelect.vue | 88 ++++++++++++++++---
.../src/LabelTypeEdit.vue | 18 ++--
2 files changed, 82 insertions(+), 24 deletions(-)
diff --git a/data-room-ui/packages/DataSetLabelManagement/src/LabelSelect.vue b/data-room-ui/packages/DataSetLabelManagement/src/LabelSelect.vue
index 4c8b9d1a..3c810bc6 100644
--- a/data-room-ui/packages/DataSetLabelManagement/src/LabelSelect.vue
+++ b/data-room-ui/packages/DataSetLabelManagement/src/LabelSelect.vue
@@ -5,6 +5,7 @@
:key="label.id"
:closable="isEdit"
:disable-transitions="false"
+ style="margin-right: 2px;margin-left: 2px;background-color: #2f3440;border-color: #313640;"
@close="handleCloseTag(label)"
>
{{ label.labelName }}
@@ -13,7 +14,7 @@
class="item"
content="添加关联标签"
effect="dark"
- placement="right"
+ placement="bottom"
>
<el-button
circle
@@ -47,8 +48,10 @@
placeholder="请输入标签名称"
/>
</el-form-item>
-
- <el-form-item label="">
+ <el-form-item
+ class="filter-item"
+ prop="labelType"
+ >
<el-select
v-model="searchForm.labelType"
class="bs-el-select"
@@ -59,15 +62,34 @@
@change="selectLabelType"
>
<el-option
+ key="all"
label="全部"
value=""
/>
<el-option
- v-for="(item, index) in labelTypeList"
+ v-for="(type, index) in labelTypeList"
:key="index"
- :label="item"
- :value="item"
- />
+ :label="type"
+ :value="type"
+ >
+ <span>
+ {{ type }}
+ </span>
+ <span style="float: right;padding-right: 20px">
+ <el-button
+ v-show="isManage"
+ icon="el-icon-edit"
+ type="text"
+ @click.stop="editLabelType(type)"
+ />
+ <el-button
+ v-if="isManage"
+ icon="el-icon-delete"
+ type="text"
+ @click.stop="deleteLabelType(type)"
+ />
+ </span>
+ </el-option>
</el-select>
</el-form-item>
<el-form-item>
@@ -190,6 +212,11 @@
@afterEdit="afterEdit"
ref="labelEdit"
/>
+ <label-type-edit
+ v-if="labelTypeEditVisible"
+ @afterEdit="afterEdit(true)"
+ ref="labelTypeEdit"
+ />
</div>
</el-dialog>
</div>
@@ -197,13 +224,15 @@
<script>
import LabelEdit from './LabelConfigEdit'
+import LabelTypeEdit from './LabelTypeEdit.vue'
import { pageMixins } from 'packages/js/mixins/page'
-import {getLabelType, labelList, getLabelListByDatasetId, removeLabel} from 'packages/js/utils/LabelConfigService'
+import {getLabelType, labelList, getLabelListByDatasetId, removeLabel, removeLabelByType} from 'packages/js/utils/LabelConfigService'
export default {
name: 'LabelSelect',
components: {
- LabelEdit
+ LabelEdit,
+ LabelTypeEdit
},
mixins: [pageMixins],
props: {
@@ -233,6 +262,8 @@ export default {
dialogFormVisible: false,
// 编辑弹窗可见性
editFormVisible: false,
+ // 标签类型编辑弹窗可见性
+ labelTypeEditVisible: false,
searchForm: {
labelName: '',
labelType: ''
@@ -351,7 +382,8 @@ export default {
this.$confirm('确定删除当前标签吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
- type: 'warning'
+ type: 'warning',
+ customClass: 'bs-el-message-box'
}).then(() => {
removeLabel(id).then(() => {
this.getDataList()
@@ -411,6 +443,35 @@ export default {
selectLabelType () {
this.getDataList()
},
+ /**
+ * 标签类型编辑
+ */
+ editLabelType (type) {
+ this.labelTypeEditVisible = true
+ this.$nextTick(() => {
+ this.$refs.labelTypeEdit.dialogFormVisible = true
+ this.$refs.labelTypeEdit.init(type)
+ })
+ },
+ /**
+ * 标签类型删除
+ */
+ deleteLabelType (type) {
+ this.$confirm('是否删除当前标签类型? ', '提示', {
+ confirmButtonText: '确定',
+ cancelButtonText: '取消',
+ type: 'warning',
+ customClass: 'bs-el-message-box'
+ }).then(() => {
+ removeLabelByType({ labelType: type }).then(() => {
+ this.$nextTick(() => {
+ this.getDataList()
+ this.getLabelType()
+ this.$message.success('删除成功')
+ })
+ })
+ })
+ },
/**
* 弹窗关闭
*/
@@ -428,9 +489,12 @@ export default {
this.$emit('commit', this.idListCopy)
},
/**
- * 标签编辑/新增后回调
+ * 标签编辑/新增、标签类型编辑 后回调
*/
- afterEdit () {
+ afterEdit (cleanType) {
+ if (cleanType) {
+ this.searchForm.labelType = ''
+ }
this.getDataList()
this.getLabelType()
}
diff --git a/data-room-ui/packages/DataSetLabelManagement/src/LabelTypeEdit.vue b/data-room-ui/packages/DataSetLabelManagement/src/LabelTypeEdit.vue
index c8a9e640..7be3d3b3 100644
--- a/data-room-ui/packages/DataSetLabelManagement/src/LabelTypeEdit.vue
+++ b/data-room-ui/packages/DataSetLabelManagement/src/LabelTypeEdit.vue
@@ -79,20 +79,14 @@ export default {
},
submitForm (formName) {
this.$refs[formName].validate((valid) => {
- if (valid) {
- updateLabelType(this.dataForm).then(() => {
- if (this.$parent.queryForm.labelType !== '') {
- this.$parent.queryForm.labelType = this.dataForm.labelType
- }
- this.$parent.reSearch()
- this.$parent.getLabelType()
-
- this.cancel()
- this.$message.success('保存成功')
- })
- } else {
+ if (!valid) {
return false
}
+ updateLabelType(this.dataForm).then(() => {
+ this.$emit('afterEdit')
+ this.cancel()
+ this.$message.success('保存成功')
+ })
})
}
}