hong.yang
2 years ago
parent
4790b9702f
commit
8384004d4b
@ -0,0 +1,7 @@
|
||||
import LabelConfig from './src/index.vue'
|
||||
|
||||
LabelConfig.install = function (Vue) {
|
||||
Vue.component(LabelConfig.name, LabelConfig)
|
||||
}
|
||||
|
||||
export default LabelConfig
|
||||
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:append-to-body="true"
|
||||
:before-close="handleClose"
|
||||
:visible.sync="dialogFormVisible"
|
||||
class="dialogClass"
|
||||
title="标签类型修改"
|
||||
width="500px"
|
||||
>
|
||||
<div style="margin: 20px;">
|
||||
<el-form ref="ruleForm" :model="dataForm" :rules="rules" label-position="left" label-width="90px">
|
||||
<el-form-item label="标签类型" prop="labelType">
|
||||
<el-input v-model="dataForm.labelType"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {updateLabelType} from 'packages/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) {
|
||||
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 {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.dialogClass .el-dialog__body {
|
||||
min-height: auto;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<el-tree
|
||||
:ref="treeRef"
|
||||
:data="treeData"
|
||||
:default-expand-all="expandAll"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
:highlight-current="true"
|
||||
:indent="0"
|
||||
:props="defaultProps"
|
||||
node-key="id"
|
||||
style="width: fit-content;min-width: 100%;"
|
||||
@node-click="handleNodeClick"
|
||||
@node-contextmenu="rihgtClick"
|
||||
>
|
||||
<span
|
||||
slot-scope="{ node,data }"
|
||||
class="custom-tree-node"
|
||||
style="width: 100%;position: relative;"
|
||||
@mouseenter="mouseEnter(data)"
|
||||
@mouseleave="mouseLeave(data)"
|
||||
>
|
||||
<span :style="data.children && data.children.length ? {} : {'padding-left': '12px'}">
|
||||
<i :class="data.children && data.children.length ? 'el-icon el-icon-folder': 'el-icon el-icon-document'"
|
||||
style="margin-right: 8px;"></i>
|
||||
<span class="nodeText">{{ data.name }}</span>
|
||||
</span>
|
||||
<span v-if="optionShow" class="options">
|
||||
<el-dropdown @command="(command) => { treeCommand(command, data) }">
|
||||
<i class="el-icon-more"></i>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<slot name="options"></slot>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
</el-tree>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Tree',
|
||||
props: {
|
||||
treeData: {
|
||||
type: Array,
|
||||
default: () => ([])
|
||||
},
|
||||
treeRef: {
|
||||
type: String,
|
||||
default: 'tree'
|
||||
},
|
||||
nodeWidth: {
|
||||
type: String,
|
||||
default: '280px'
|
||||
},
|
||||
expandAll: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
filterText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
optionShow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'treeData': function (val) {
|
||||
// console.log('valx', val)
|
||||
},
|
||||
filterText(val) {
|
||||
this.$refs[this.treeRef].filter(val)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
treeCommand(command, nodeData) {
|
||||
this.$emit('treeCommand', command, nodeData)
|
||||
},
|
||||
filterNode(value, data) {
|
||||
if (!value) return true
|
||||
return data.name.indexOf(value) !== -1
|
||||
},
|
||||
// 节点点击
|
||||
handleNodeClick(row, value) {
|
||||
this.$emit('handleNodeClick', row, value)
|
||||
},
|
||||
// 节点右键
|
||||
rihgtClick(event, object, value, element) {
|
||||
this.$emit('rihgtClick', event, object, value, element)
|
||||
},
|
||||
mouseEnter(data) {
|
||||
// this.$set(data, 'show', true)
|
||||
// 弹射节点数据
|
||||
this.$emit('mouseEnter', data)
|
||||
},
|
||||
mouseLeave(data) {
|
||||
// this.$set(data, 'show', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/deep/ .el-tree-node {
|
||||
display: block;
|
||||
min-width: 270px;
|
||||
|
||||
.el-tree-node__content {
|
||||
width: 270px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-tree-node__children {
|
||||
.el-tree-node {
|
||||
display: block;
|
||||
min-width: 270px;
|
||||
|
||||
.el-tree-node__content {
|
||||
width: 270px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tree-node {
|
||||
position: relative;
|
||||
|
||||
.nodeText {
|
||||
display: inline-block;
|
||||
width: 225px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.options {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
height: 16px;
|
||||
top: 2px;
|
||||
line-height: 16px;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
// /deep/ .is-current .options{
|
||||
// background: #fff;
|
||||
// }
|
||||
</style>
|
||||
@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<div class="db-container">
|
||||
<div
|
||||
v-if="labelVisible"
|
||||
class="inner-container"
|
||||
>
|
||||
<el-form
|
||||
ref="queryForm"
|
||||
:model="queryForm"
|
||||
class="filter-container"
|
||||
>
|
||||
<el-form-item
|
||||
class="filter-item"
|
||||
prop="labelName"
|
||||
>
|
||||
标签名称
|
||||
<el-input
|
||||
v-model="queryForm.labelName"
|
||||
clearable
|
||||
placeholder="请输入标签名称"
|
||||
@clear="reSearch()"
|
||||
@keyup.enter.native="reSearch()"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="filter-item"
|
||||
prop="labelType"
|
||||
>
|
||||
标签类型
|
||||
<el-select
|
||||
v-model="queryForm.labelType"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择标签类型"
|
||||
@change="reSearch()"
|
||||
>
|
||||
<el-option
|
||||
key="all"
|
||||
label="全部"
|
||||
value=""
|
||||
/>
|
||||
<el-option
|
||||
v-for="labelType in labelTypeList"
|
||||
:key="labelType"
|
||||
:label="labelType"
|
||||
:value="labelType"
|
||||
>
|
||||
<span>
|
||||
{{ labelType }}
|
||||
</span>
|
||||
<span style="float: right;padding-right: 20px">
|
||||
<el-button
|
||||
icon="el-icon-edit"
|
||||
type="text"
|
||||
@click.stop="editLabelType(labelType)"
|
||||
/>
|
||||
<el-button
|
||||
icon="el-icon-delete"
|
||||
type="text"
|
||||
@click.stop="deleteLabelType(labelType)"
|
||||
/>
|
||||
</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="filter-item">
|
||||
<el-button
|
||||
:loading="dataListLoading"
|
||||
icon="el-icon-search"
|
||||
type="primary"
|
||||
@click="reSearch"
|
||||
>
|
||||
查询
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
class="filter-item"
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="addOrUpdateLabel(undefined)"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="db-table-box">
|
||||
<el-table
|
||||
v-table
|
||||
v-loading="dataListLoading"
|
||||
height="0"
|
||||
:data="tableData"
|
||||
class="db-el-table db-scrollbar"
|
||||
:element-loading-text="loadingText"
|
||||
:header-cell-style="sortStyle"
|
||||
@sort-change="reSort"
|
||||
>
|
||||
<el-empty slot="empty" />
|
||||
<el-table-column
|
||||
label="标签名称"
|
||||
prop="labelName"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
label="标签类型"
|
||||
prop="labelType"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
label="标签说明"
|
||||
prop="labelDesc"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="操作"
|
||||
width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="getDetail(scope.row)">
|
||||
详情
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="addOrUpdateLabel(scope.row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="handleDelete(scope.row.id)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="db-pagination">
|
||||
<el-pagination
|
||||
class="db-el-pagination"
|
||||
popper-class="db-el-pagination"
|
||||
:current-page="current"
|
||||
:next-text="nextText"
|
||||
:page-size="size"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:prev-text="prevText"
|
||||
:total="totalCount"
|
||||
background
|
||||
layout="total, prev, pager, next, sizes"
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<label-config-add-or-update
|
||||
v-if="addOrUpdateVisible"
|
||||
ref="LabelConfigAddOrUpdate"
|
||||
/>
|
||||
<label-type-edit
|
||||
v-if="labelTypeEditVisible"
|
||||
ref="LabelTypeEdit"
|
||||
/>
|
||||
<label-config-details
|
||||
ref="LabelConfigDetails"
|
||||
>
|
||||
</label-config-details>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import table from 'packages/js/utils/table.js'
|
||||
import { pageMixins } from 'packages/js/mixins/page'
|
||||
import LabelConfigAddOrUpdate from './LabelConfigAddOrUpdate.vue'
|
||||
import LabelConfigDetails from './LabelConfigDetails.vue'
|
||||
import LabelTypeEdit from './LabelTypeEdit.vue'
|
||||
import { getLabelType, labelList, removeLabel, removeLabelByType } from 'packages/js/utils/LabelConfigService'
|
||||
|
||||
export default {
|
||||
name: 'LabelConfig',
|
||||
directives: {
|
||||
table // 注册自定义指令
|
||||
},
|
||||
mixins: [pageMixins],
|
||||
components: {
|
||||
LabelConfigDetails,
|
||||
LabelConfigAddOrUpdate,
|
||||
LabelTypeEdit
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tableData: [],
|
||||
addOrUpdateVisible: false,
|
||||
addOrUpdateDetailVisible: false,
|
||||
labelTypeEditVisible: false,
|
||||
labelVisible: true,
|
||||
labelTypeList: [],
|
||||
dataListLoading: false,
|
||||
loadingText: '',
|
||||
queryForm: {
|
||||
labelName: '',
|
||||
labelType: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
mounted () {
|
||||
this.getDataList()
|
||||
this.getLabelType()
|
||||
},
|
||||
methods: {
|
||||
deleteLabelType (labelType) {
|
||||
this.$confirm('是否删除当前标签类型? ', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
removeLabelByType({ labelType: labelType }).then(() => {
|
||||
this.$nextTick(() => {
|
||||
this.reSearch()
|
||||
this.getLabelType()
|
||||
this.$message.success('删除成功')
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
editLabelType (labelType) {
|
||||
this.labelTypeEditVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.LabelTypeEdit.dialogFormVisible = true
|
||||
this.$refs.LabelTypeEdit.init(labelType)
|
||||
})
|
||||
},
|
||||
handleDelete (id) {
|
||||
this.$confirm('确定删除当前标签吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
removeLabel(id).then(() => {
|
||||
this.getDataList()
|
||||
this.$message.success('删除成功')
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
},
|
||||
// 新增/编辑
|
||||
addOrUpdateLabel (row) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.LabelConfigAddOrUpdate.labelTypeList = this.labelTypeList
|
||||
this.$refs.LabelConfigAddOrUpdate.init(row)
|
||||
})
|
||||
},
|
||||
// 查看详情
|
||||
getDetail (row) {
|
||||
this.addOrUpdateDetailVisible = true
|
||||
this.labelVisible = false
|
||||
this.$nextTick(() => {
|
||||
this.$refs.LabelConfigDetails.init(row)
|
||||
})
|
||||
},
|
||||
// 获取标签列表
|
||||
getLabelType () {
|
||||
getLabelType().then((data) => {
|
||||
this.labelTypeList = data
|
||||
})
|
||||
},
|
||||
// 获取列表方法
|
||||
getDataList () {
|
||||
this.dataListLoading = true
|
||||
this.loadingText = '正在查询数据...'
|
||||
const params = {
|
||||
current: this.current,
|
||||
size: this.size,
|
||||
...this.queryForm
|
||||
}
|
||||
labelList(params).then((data) => {
|
||||
this.totalCount = data.totalCount
|
||||
this.tableData = data.list
|
||||
this.dataListLoading = false
|
||||
}).catch(() => {
|
||||
this.dataListLoading = false
|
||||
})
|
||||
},
|
||||
// 查询事件
|
||||
reSearch () {
|
||||
// 从第一页
|
||||
this.current = 1
|
||||
this.getDataList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-table{
|
||||
border-color: var(--db-el-border) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,92 @@
|
||||
/*!
|
||||
* 标签管理
|
||||
*/
|
||||
import { get, post } from 'packages/js/utils/http'
|
||||
|
||||
/**
|
||||
* 获取标签列表
|
||||
* @returns {*}
|
||||
*/
|
||||
const getLabelList = () => get(`/label/getLabelList`)
|
||||
|
||||
/**
|
||||
* 获取标签
|
||||
* @param data
|
||||
* @returns {*}
|
||||
*/
|
||||
const labelList = (data) => get(`/label/list`, data)
|
||||
|
||||
/**
|
||||
* 获取标签分类
|
||||
* @returns {*}
|
||||
*/
|
||||
const getLabelType = () => get(`/label/getLabelType`)
|
||||
|
||||
/**
|
||||
* 根据种类移除标签
|
||||
* @param data
|
||||
* @returns {*}
|
||||
*/
|
||||
const removeLabelByType = (data) => post(`/label/removeLabelByType`, data)
|
||||
|
||||
/**
|
||||
* 移除标签
|
||||
* @param id
|
||||
* @returns {*}
|
||||
*/
|
||||
const removeLabel = (id = '-1') => get(`/label/removeLabel/${id}`)
|
||||
|
||||
/**
|
||||
* 检查重复标签
|
||||
* @param data
|
||||
* @returns {*}
|
||||
*/
|
||||
const checkRepeatLabel = (data) => post(`/label/checkRepeat`, data)
|
||||
|
||||
/**
|
||||
* 新增/修改标签
|
||||
* @param data
|
||||
* @returns {*}
|
||||
*/
|
||||
const addOrUpdateLabel = (data) => post(`/label/addOrUpdateLabel`, data)
|
||||
|
||||
/**
|
||||
* 获取标签详情
|
||||
* @param id
|
||||
* @returns {*}
|
||||
*/
|
||||
const getLabelDetail = (id = '-1') => get(`/label/getLabelDetail/${id}`)
|
||||
|
||||
/**
|
||||
* 修改标签种类
|
||||
* @param data
|
||||
* @returns {*}
|
||||
*/
|
||||
const updateLabelType = (data) => post(`/label/updateLabelType`, data)
|
||||
|
||||
|
||||
/**
|
||||
* 根据标签id获取数据集id列表
|
||||
* @param id
|
||||
*/
|
||||
const getDataSetIdListByLabelId = (id = '-1') => get(`/label/queryDataSetIdList/${id}`)
|
||||
|
||||
/**
|
||||
* 根据数据集id获取标签列表
|
||||
* @param id
|
||||
*/
|
||||
const getLabelListByDatasetId = (id = '-1') => get(`/label/queryDataSetLabelList/${id}`)
|
||||
|
||||
export {
|
||||
getLabelList,
|
||||
labelList,
|
||||
getLabelType,
|
||||
removeLabelByType,
|
||||
removeLabel,
|
||||
checkRepeatLabel,
|
||||
addOrUpdateLabel,
|
||||
getLabelDetail,
|
||||
updateLabelType,
|
||||
getDataSetIdListByLabelId,
|
||||
getLabelListByDatasetId
|
||||
}
|
||||
Loading…
Reference in New Issue