初始化
This commit is contained in:
砂糖
228
frontend/packages/DataSetLabelManagement/src/LabelConfigEdit.vue
Normal file
228
frontend/packages/DataSetLabelManagement/src/LabelConfigEdit.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
class="bs-dialog-wrap bs-el-dialog"
|
||||
:append-to-body="true"
|
||||
:before-close="cancel"
|
||||
:title="dataForm.id!==''?'编辑标签':'新增标签'"
|
||||
:visible.sync="formVisible"
|
||||
>
|
||||
<el-form
|
||||
ref="ruleForm"
|
||||
:model="dataForm"
|
||||
:rules="rules"
|
||||
label-position="right"
|
||||
label-width="90px"
|
||||
class="form-container bs-el-form"
|
||||
>
|
||||
<el-form-item
|
||||
label="标签名称"
|
||||
prop="labelName"
|
||||
>
|
||||
<el-input
|
||||
v-model="dataForm.labelName"
|
||||
class="bs-el-input"
|
||||
clearable
|
||||
placeholder="请输入标签名称"
|
||||
maxlength="200"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="标签类型"
|
||||
prop="labelType"
|
||||
>
|
||||
<el-select
|
||||
ref="searchSelect"
|
||||
v-model="dataForm.labelType"
|
||||
class="bs-el-select"
|
||||
popper-class="bs-el-select"
|
||||
allow-create
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择或输入标签类型"
|
||||
@blur="selectBlur"
|
||||
@input.native="filterData"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item,K) in labelTypeList"
|
||||
:key="K"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
label="标签说明"
|
||||
prop="labelDesc"
|
||||
>
|
||||
<el-input
|
||||
v-model="dataForm.labelDesc"
|
||||
clearable
|
||||
placeholder="请输入标签说明"
|
||||
class="bs-el-input"
|
||||
type="text"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
>
|
||||
<el-button
|
||||
class="bs-el-button-default"
|
||||
@click="cancel"
|
||||
>
|
||||
取消
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="submitForm('ruleForm')"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addOrUpdateLabel, checkRepeatLabel } from 'data-room-ui/js/utils/LabelConfigService'
|
||||
|
||||
export default {
|
||||
name: 'LabelEdit',
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
datasetList: [],
|
||||
typeId: '',
|
||||
dataForm: {
|
||||
id: '',
|
||||
labelName: '',
|
||||
labelType: '',
|
||||
labelDesc: '',
|
||||
relList: []
|
||||
},
|
||||
formVisible: true,
|
||||
rules: {
|
||||
labelName: [
|
||||
{ required: true, message: '标签名称不能为空', trigger: 'blur' },
|
||||
{ validator: this.validateLabelName, trigger: 'blur' }
|
||||
],
|
||||
labelType: [
|
||||
{ required: true, message: '标签类型不能为空', trigger: 'change' }
|
||||
]
|
||||
},
|
||||
// 分类树数据
|
||||
categoryData: [],
|
||||
relVisible: false,
|
||||
// 标签分类列表
|
||||
labelTypeList: [],
|
||||
// 选中的数据集id列表
|
||||
datasetIdList: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'dataForm.labelType': function (val) {
|
||||
if (val.length > 20) {
|
||||
this.dataForm.labelType = val.substring(0, 20)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 初始化
|
||||
* @param row 标签信息
|
||||
*/
|
||||
init (row) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.ruleForm.clearValidate()
|
||||
})
|
||||
this.dataForm.id = row ? row.id : ''
|
||||
this.formVisible = true
|
||||
if (row) {
|
||||
this.dataForm.id = row.id
|
||||
this.dataForm.labelName = row.labelName
|
||||
this.dataForm.labelType = row.labelType
|
||||
this.dataForm.labelDesc = row.labelDesc
|
||||
} else {
|
||||
this.dataForm.id = ''
|
||||
this.dataForm.labelName = ''
|
||||
this.dataForm.labelType = ''
|
||||
this.dataForm.labelDesc = ''
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 标签名称校验
|
||||
* @param rule
|
||||
* @param value
|
||||
* @param callback
|
||||
*/
|
||||
validateLabelName (rule, value, callback) {
|
||||
checkRepeatLabel({ id: this.dataForm.id, labelName: this.dataForm.labelName }).then(repeat => {
|
||||
if (repeat) {
|
||||
callback(new Error('标签名称已存在'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 表单关闭
|
||||
*/
|
||||
handleClose () {
|
||||
this.$parent.editFormVisible = false
|
||||
},
|
||||
/**
|
||||
* 取消按钮
|
||||
*/
|
||||
cancel () {
|
||||
this.formVisible = false
|
||||
this.$nextTick(() => {
|
||||
this.handleClose()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 提交按钮
|
||||
* @param formName
|
||||
*/
|
||||
submitForm (formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
this.saveForm(true)
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 保存标签信息
|
||||
* @param flag
|
||||
*/
|
||||
saveForm (flag) {
|
||||
addOrUpdateLabel(this.dataForm).then((r) => {
|
||||
this.$message.success('保存成功')
|
||||
this.cancel()
|
||||
this.$emit('afterEdit')
|
||||
})
|
||||
},
|
||||
selectBlur (e) {
|
||||
this.dataForm.labelType = e.target.value
|
||||
},
|
||||
// 对输入字符串控制
|
||||
filterData () {
|
||||
// 此属性得到输入的文字
|
||||
const str = this.$refs.searchSelect.$data.selectedLabel
|
||||
// 控制的js
|
||||
if (str.length > 20) {
|
||||
this.$refs.searchSelect.$data.selectedLabel = str.substr(0, 20)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.form-container{
|
||||
padding: 0 8px;
|
||||
}
|
||||
</style>
|
||||
535
frontend/packages/DataSetLabelManagement/src/LabelSelect.vue
Normal file
535
frontend/packages/DataSetLabelManagement/src/LabelSelect.vue
Normal file
@@ -0,0 +1,535 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-tag
|
||||
v-for="label in selectLabelListInitial"
|
||||
: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 }}
|
||||
</el-tag>
|
||||
<el-tooltip
|
||||
class="item"
|
||||
content="添加关联标签"
|
||||
effect="dark"
|
||||
placement="bottom"
|
||||
>
|
||||
<el-button
|
||||
circle
|
||||
class="bs-el-button-default"
|
||||
icon="el-icon-plus"
|
||||
style="margin-left: 10px"
|
||||
@click="addLabelRelation"
|
||||
/>
|
||||
</el-tooltip>
|
||||
<!-- 配置按钮 -->
|
||||
<el-button
|
||||
type="text"
|
||||
@click="manageLabel"
|
||||
>
|
||||
管理
|
||||
</el-button>
|
||||
<!-- 标签列表弹窗 -->
|
||||
<el-dialog
|
||||
class="bs-dialog-wrap bs-el-dialog"
|
||||
:append-to-body="true"
|
||||
:before-close="handleClose"
|
||||
:visible.sync="dialogFormVisible"
|
||||
:title="isManage ? '标签管理' : '选择标签'"
|
||||
width="1000px"
|
||||
>
|
||||
<div>
|
||||
<el-form
|
||||
:inline="true"
|
||||
class="bs-el-form filter-container"
|
||||
>
|
||||
<el-form-item label="">
|
||||
<el-input
|
||||
v-model="searchForm.labelName"
|
||||
clearable
|
||||
class="bs-el-input"
|
||||
placeholder="请输入标签名称"
|
||||
@clear="getDataList"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="filter-item"
|
||||
prop="labelType"
|
||||
>
|
||||
<el-select
|
||||
v-model="searchForm.labelType"
|
||||
class="bs-el-select"
|
||||
popper-class="bs-el-select"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择标签类型"
|
||||
@change="selectLabelType"
|
||||
>
|
||||
<el-option
|
||||
key="all"
|
||||
label="全部"
|
||||
value=""
|
||||
/>
|
||||
<el-option
|
||||
v-for="(type, index) in labelTypeList"
|
||||
:key="index"
|
||||
: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>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="current=1;getDataList()"
|
||||
>
|
||||
查询
|
||||
</el-button>
|
||||
</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-table
|
||||
ref="labelTable"
|
||||
v-loading="labelCheckLoading"
|
||||
class="bs-el-table bs-scrollbar"
|
||||
element-loading-text="正在加载中..."
|
||||
:data="labelList"
|
||||
row-key="id"
|
||||
height="calc(100vh - 450px)"
|
||||
@select="labelCheckChange"
|
||||
@select-all="selectAll"
|
||||
>
|
||||
<el-empty slot="empty" />
|
||||
<el-table-column
|
||||
v-if="!isManage"
|
||||
key="selection"
|
||||
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
|
||||
v-if="isManage"
|
||||
key="opt"
|
||||
align="center"
|
||||
label="操作"
|
||||
width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
class="bs-el-button-default"
|
||||
@click="editLabel(scope.row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
class="bs-el-button-default"
|
||||
@click="deleteLabel(scope.row.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="bs-pagination">
|
||||
<el-pagination
|
||||
class="bs-el-pagination"
|
||||
popper-class="bs-el-pagination"
|
||||
:current-page="current"
|
||||
:page-size="sizeLabel"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="totalCount"
|
||||
background
|
||||
layout="total, prev, pager, next,sizes,jumper"
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
>
|
||||
<el-button
|
||||
v-show="!isManage"
|
||||
class="bs-el-button-default"
|
||||
@click="handleClose"
|
||||
>
|
||||
取消
|
||||
</el-button>
|
||||
<el-button
|
||||
v-show="!isManage"
|
||||
type="primary"
|
||||
@click="commitLabel"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
<el-button
|
||||
v-show="isManage"
|
||||
class="bs-el-button-default"
|
||||
@click="handleClose"
|
||||
>
|
||||
返回
|
||||
</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<label-edit
|
||||
v-if="editFormVisible"
|
||||
ref="labelEdit"
|
||||
@afterEdit="afterEdit"
|
||||
/>
|
||||
<label-type-edit
|
||||
v-if="labelTypeEditVisible"
|
||||
ref="labelTypeEdit"
|
||||
@afterEdit="afterEdit(true)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import LabelEdit from './LabelConfigEdit'
|
||||
import LabelTypeEdit from './LabelTypeEdit.vue'
|
||||
import { pageMixins } from 'data-room-ui/js/mixins/page'
|
||||
import { getLabelType, labelList, getLabelListByDatasetId, removeLabel, removeLabelByType } from 'data-room-ui/js/utils/LabelConfigService'
|
||||
|
||||
export default {
|
||||
name: 'LabelSelect',
|
||||
components: {
|
||||
LabelEdit,
|
||||
LabelTypeEdit
|
||||
},
|
||||
mixins: [pageMixins],
|
||||
props: {
|
||||
// 选中的标签id列表
|
||||
idList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
isEdit: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
datasetId: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isManage: false,
|
||||
idListCopy: this.idList,
|
||||
// 选中的标签列表
|
||||
selectLabelList: [],
|
||||
// 初始选中的标签列表
|
||||
selectLabelListInitial: [],
|
||||
labelList: [],
|
||||
dialogFormVisible: false,
|
||||
// 编辑弹窗可见性
|
||||
editFormVisible: false,
|
||||
// 标签类型编辑弹窗可见性
|
||||
labelTypeEditVisible: false,
|
||||
searchForm: {
|
||||
labelName: '',
|
||||
labelType: ''
|
||||
},
|
||||
sizeLabel: 10,
|
||||
labelTypeList: [],
|
||||
labelCheckLoading: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 根据数据集id获取关联的标签列表
|
||||
if (this.datasetId) {
|
||||
getLabelListByDatasetId(this.datasetId).then((data) => {
|
||||
this.selectLabelListInitial = cloneDeep(data)
|
||||
this.selectLabelList = cloneDeep(data)
|
||||
const idList = []
|
||||
data.forEach((item) => {
|
||||
idList.push(item.id)
|
||||
})
|
||||
this.$emit('commit', idList)
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// labelList变化时，根据selectLabelList中项的id，设置选中状态
|
||||
labelList: {
|
||||
handler (val) {
|
||||
val.forEach((label) => {
|
||||
this.selectLabelList.forEach((selected) => {
|
||||
if (label.id === selected.id) {
|
||||
// 设置选中状态
|
||||
this.$nextTick(() => {
|
||||
this.$refs.labelTable.toggleRowSelection(label)
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
// 根据selectLabelList的变化，将id赋值给idList
|
||||
selectLabelList: {
|
||||
handler (val) {
|
||||
this.idListCopy = []
|
||||
val.forEach((item) => {
|
||||
this.idListCopy.push(item.id)
|
||||
})
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 初始化方法
|
||||
*/
|
||||
init (manage) {
|
||||
this.isManage = manage
|
||||
this.$nextTick(() => {
|
||||
this.dialogFormVisible = true
|
||||
this.getDataList()
|
||||
this.getLabelType()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取标签类型列表
|
||||
*/
|
||||
getLabelType () {
|
||||
getLabelType().then((data) => {
|
||||
this.labelTypeList = data
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 获取标签列表
|
||||
*/
|
||||
getDataList () {
|
||||
this.labelCheckLoading = true
|
||||
const params = {
|
||||
current: this.current,
|
||||
size: this.sizeLabel,
|
||||
labelName: this.searchForm.labelName,
|
||||
labelType: this.searchForm.labelType
|
||||
}
|
||||
labelList(params).then((data) => {
|
||||
this.totalCount = data.totalCount
|
||||
this.labelList = data.list
|
||||
this.labelCheckLoading = false
|
||||
}).catch(() => {
|
||||
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',
|
||||
customClass: 'bs-el-message-box'
|
||||
}).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 (selection, label) {
|
||||
// 如果selectLabelList中包含id相同的项，则从selectLabelList中移除
|
||||
if (this.selectLabelList.some(item => item.id === label.id)) {
|
||||
this.selectLabelList = this.selectLabelList.filter(item => item.id !== label.id)
|
||||
} else {
|
||||
// 否则，将该项添加到selectLabelList中
|
||||
this.selectLabelList.push(label)
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 移除选中的标签
|
||||
*/
|
||||
handleCloseTag (label) {
|
||||
this.idListCopy = []
|
||||
this.selectLabelListInitial.forEach((item, index) => {
|
||||
if (item.id === label.id) {
|
||||
this.selectLabelListInitial.splice(index, 1)
|
||||
}
|
||||
})
|
||||
this.selectLabelList.forEach((item, index) => {
|
||||
if (item.id === label.id) {
|
||||
this.selectLabelList.splice(index, 1)
|
||||
}
|
||||
})
|
||||
this.selectLabelList.forEach(item => {
|
||||
this.idListCopy.push(item.id)
|
||||
})
|
||||
this.$emit('commit', this.idListCopy)
|
||||
},
|
||||
/**
|
||||
* 点击添加标签关联按钮
|
||||
*/
|
||||
addLabelRelation () {
|
||||
// 初始化
|
||||
this.init(false)
|
||||
},
|
||||
/**
|
||||
* 标签管理按钮
|
||||
*/
|
||||
manageLabel () {
|
||||
this.init(true)
|
||||
},
|
||||
/**
|
||||
* 选中标签类型
|
||||
*/
|
||||
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('删除成功')
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 弹窗关闭
|
||||
*/
|
||||
handleClose () {
|
||||
this.selectLabelList = cloneDeep(this.selectLabelListInitial)
|
||||
this.dialogFormVisible = false
|
||||
},
|
||||
/**
|
||||
* 确认按钮
|
||||
*/
|
||||
commitLabel () {
|
||||
this.labelCheckLoading = false
|
||||
this.dialogFormVisible = false
|
||||
this.selectLabelListInitial = cloneDeep(this.selectLabelList)
|
||||
this.$emit('commit', this.idListCopy)
|
||||
},
|
||||
/**
|
||||
* 标签编辑/新增、标签类型编辑 后回调
|
||||
*/
|
||||
afterEdit (cleanType) {
|
||||
if (cleanType) {
|
||||
this.searchForm.labelType = ''
|
||||
}
|
||||
this.getDataList()
|
||||
this.getLabelType()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../assets/style/bsTheme.scss';
|
||||
|
||||
.bs-pagination {
|
||||
::v-deep .el-input__inner {
|
||||
border: none;
|
||||
background: var(--bs-el-background-1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
100
frontend/packages/DataSetLabelManagement/src/LabelTypeEdit.vue
Normal file
100
frontend/packages/DataSetLabelManagement/src/LabelTypeEdit.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:append-to-body="true"
|
||||
:before-close="handleClose"
|
||||
:visible.sync="dialogFormVisible"
|
||||
class="bs-dialog-wrap bs-el-dialog"
|
||||
title="标签类型修改"
|
||||
width="500px"
|
||||
>
|
||||
<div style="margin: 20px;">
|
||||
<el-form
|
||||
ref="ruleForm"
|
||||
:model="dataForm"
|
||||
:rules="rules"
|
||||
label-position="left"
|
||||
label-width="90px"
|
||||
class="bs-el-form"
|
||||
>
|
||||
<el-form-item
|
||||
label="标签类型"
|
||||
prop="labelType"
|
||||
>
|
||||
<el-input
|
||||
v-model="dataForm.labelType"
|
||||
class="bs-el-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<span
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
>
|
||||
<el-button
|
||||
class="bs-el-button-default"
|
||||
@click="cancel"
|
||||
>取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="submitForm('ruleForm')"
|
||||
>确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { updateLabelType } from 'data-room-ui/js/utils/LabelConfigService'
|
||||
|
||||
export default {
|
||||
name: 'LabelTypeEdit',
|
||||
data () {
|
||||
return {
|
||||
dialogFormVisible: false,
|
||||
dataForm: {
|
||||
labelType: '',
|
||||
oldLabelType: ''
|
||||
},
|
||||
rules: {
|
||||
labelType: [
|
||||
{ required: true, message: '标签类型不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init (labelType) {
|
||||
this.dataForm.labelType = labelType
|
||||
this.dataForm.oldLabelType = labelType
|
||||
},
|
||||
handleClose () {
|
||||
this.$parent.labelTypeEditVisible = false
|
||||
},
|
||||
cancel () {
|
||||
this.dialogFormVisible = false
|
||||
this.$nextTick(() => {
|
||||
this.handleClose()
|
||||
})
|
||||
},
|
||||
submitForm (formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
updateLabelType(this.dataForm).then(() => {
|
||||
this.$emit('afterEdit')
|
||||
this.cancel()
|
||||
this.$message.success('保存成功')
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* .dialogClass .el-dialog__body {
|
||||
min-height: auto;
|
||||
} */
|
||||
</style>
|
||||
Reference in New Issue
Block a user