标签组管理

This commit is contained in:
cwchen 2025-12-18 17:24:20 +08:00
parent b0a86767ce
commit 05d17a539e
6 changed files with 68 additions and 38 deletions

View File

@ -57,7 +57,7 @@ export function addLabelAPI(data) {
} }
/* 数据管理->标签管理->修改标签 */ /* 数据管理->标签管理->修改标签 */
export function editDataAPI(data) { export function editLabelAPI(data) {
return request({ return request({
url: '/smartPlatform/data/label/editLabelData', url: '/smartPlatform/data/label/editLabelData',
method: 'POST', method: 'POST',

View File

@ -3,7 +3,7 @@
<el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true" <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
:closeOnClickModal="false" @close="handleClose" :append-to-body="true"> :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
<div> <div>
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px"> <el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px" label-position="top">
<el-form-item label="标签组名称" prop="labelGroupName"> <el-form-item label="标签组名称" prop="labelGroupName">
<el-input class="form-item" v-model="form.labelGroupName" clearable show-word-limit <el-input class="form-item" v-model="form.labelGroupName" clearable show-word-limit
placeholder="请输入标签组名称" maxlength="32" :disabled="isDisabled"></el-input> placeholder="请输入标签组名称" maxlength="32" :disabled="isDisabled"></el-input>
@ -42,6 +42,8 @@ export default {
isDisabled: true, isDisabled: true,
form: { form: {
labelGroupId: null, labelGroupId: null,
labelId: null,
labelGroupName: '',
labelName: '', labelName: '',
labelDesc: '', labelDesc: '',
}, },
@ -57,6 +59,9 @@ export default {
handler(newVal) { handler(newVal) {
if (newVal === CONSTANT_PARAMS.type) { if (newVal === CONSTANT_PARAMS.type) {
this.initFormData(); this.initFormData();
}else{
this.form.labelGroupName = this.rowData.labelGroupName
this.form.labelGroupId = this.rowData.labelGroupId
} }
}, },
immediate: true, immediate: true,
@ -75,6 +80,7 @@ export default {
this.form = { this.form = {
labelGroupId: this.rowData.labelGroupId, labelGroupId: this.rowData.labelGroupId,
labelGroupName: this.rowData.labelGroupName || '', labelGroupName: this.rowData.labelGroupName || '',
labelId: this.rowData.labelId || '',
labelName: this.rowData.labelName || '', labelName: this.rowData.labelName || '',
labelDesc: this.rowData.labelDesc || '', labelDesc: this.rowData.labelDesc || '',
}; };
@ -94,7 +100,8 @@ export default {
reset() { reset() {
this.form = { this.form = {
labelGroupId: null, labelGroupId: null,
groupId: null, labelId: null,
labelGroupName: '',
labelName: '', labelName: '',
labelDesc: '', labelDesc: '',
}; };

View File

@ -3,7 +3,7 @@
<el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true" <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
:closeOnClickModal="false" @close="handleClose" :append-to-body="true"> :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
<div> <div>
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px"> <el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px" label-position="top">
<el-form-item label="标签组名称" prop="labelGroupName"> <el-form-item label="标签组名称" prop="labelGroupName">
<el-input class="form-item" v-model="form.labelGroupName" clearable show-word-limit <el-input class="form-item" v-model="form.labelGroupName" clearable show-word-limit
placeholder="请输入标签组名称" maxlength="32"></el-input> placeholder="请输入标签组名称" maxlength="32"></el-input>

View File

@ -8,21 +8,24 @@
<i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer;" @click="handleSearch"></i> <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer;" @click="handleSearch"></i>
</el-input> </el-input>
<div class="category-list"> <div class="category-list">
<div v-for="item in categoryList" :key="item.labelGroupId" class="category-item" <template v-if="categoryList.length > 0">
:class="{ active: activeCategory === item.labelGroupId }" <div v-for="item in categoryList" :key="item.labelGroupId" class="category-item"
@click="handleCategoryClick(item.labelGroupId)"> :class="{ active: activeCategory === item.labelGroupId }"
<i class="el-icon-folder" style="margin-right: 8px; color: #666;"></i> @click="handleCategoryClick(item)">
<span class="category-name">{{ item.labelGroupName }}</span> <i class="el-icon-folder" style="margin-right: 8px; color: #666;"></i>
<el-dropdown trigger="click" @command="handleCategoryCommand"> <span class="category-name">{{ item.labelGroupName }}</span>
<span class="el-dropdown-link"> <el-dropdown trigger="click" @command="handleCategoryCommand">
<i class="el-icon-more"></i> <span class="el-dropdown-link">
</span> <i class="el-icon-more"></i>
<el-dropdown-menu slot="dropdown"> </span>
<el-dropdown-item :command="{ type: 'edit', raw: item }">编辑</el-dropdown-item> <el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="{ type: 'delete', raw: item }">删除</el-dropdown-item> <el-dropdown-item :command="{ type: 'edit', raw: item }">编辑</el-dropdown-item>
</el-dropdown-menu> <el-dropdown-item :command="{ type: 'delete', raw: item }">删除</el-dropdown-item>
</el-dropdown> </el-dropdown-menu>
</div> </el-dropdown>
</div>
</template>
<el-empty v-else description="无数据" :image-size="80"></el-empty>
</div> </div>
<!-- 添加标签组弹窗 --> <!-- 添加标签组弹窗 -->
<LabelGroupForm ref="labelGroupForm" v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title" <LabelGroupForm ref="labelGroupForm" v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
@ -47,6 +50,7 @@ export default {
data() { data() {
return { return {
activeCategory: null, activeCategory: null,
activeCategoryName: '',
categoryList: [], categoryList: [],
title: "", title: "",
isflag: false, isflag: false,
@ -81,7 +85,8 @@ export default {
if (res.data.length > 0 && !this.activeCategory) { if (res.data.length > 0 && !this.activeCategory) {
const labelGroupId = res.data[0].labelGroupId; const labelGroupId = res.data[0].labelGroupId;
this.activeCategory = labelGroupId this.activeCategory = labelGroupId
this.$emit('change', labelGroupId) this.activeCategoryName = res.data[0].labelGroupName
this.$emit('change', labelGroupId, this.activeCategoryName)
} }
}) })
}, },
@ -92,9 +97,9 @@ export default {
this.row = {}; this.row = {};
this.isflag = true; this.isflag = true;
}, },
handleCategoryClick(id) { handleCategoryClick(item) {
this.activeCategory = id this.activeCategory = item.labelGroupId
this.$emit('change', id) this.$emit('change', item.labelGroupId, item.labelGroupName)
this.handleQuery(); this.handleQuery();
}, },
handleCategoryCommand(command) { handleCategoryCommand(command) {
@ -125,6 +130,7 @@ export default {
if (res.code === 200) { if (res.code === 200) {
this.$message.success('删除成功'); this.$message.success('删除成功');
this.activeCategory = null; this.activeCategory = null;
this.$emit('change', null, null)
this.handleQuery(); this.handleQuery();
} else { } else {
this.$message.error(res.msg || '删除失败'); this.$message.error(res.msg || '删除失败');

View File

@ -7,21 +7,22 @@
<h3>数据列表</h3> <h3>数据列表</h3>
</template> </template>
<template slot="tableActions"> <template slot="tableActions">
<el-button @click="handleAdd" :disabled="disabled" v-hasPermi="['data:label:add']" <el-button @click="handleAdd" :disabled="disabled" v-hasPermi="['data:label:add']" class="add-btn"><i
class="add-btn"><i class="el-icon-plus"></i> 新增</el-button> class="el-icon-plus"></i> 新增</el-button>
</template> </template>
<template slot="handle" slot-scope="{ data }"> <template slot="handle" slot-scope="{ data }">
<el-button type="text" v-hasPermi="['data:label:edit']" class="action-btn" <el-button type="text" v-hasPermi="['data:label:edit']" class="action-btn" style="color: #EAA819;"
style="color: #EAA819;" @click="handleUpdate(data)"> @click="handleUpdate(data)">
编辑 编辑
</el-button> </el-button>
<el-button type="text" v-hasPermi="['data:label:del']" class="action-btn" <el-button type="text" v-hasPermi="['data:label:del']" class="action-btn" style="color: #DB3E29;"
style="color: #DB3E29;" @click="handleDelete(data)"> @click="handleDelete(data)">
删除 删除
</el-button> </el-button>
</template> </template>
</TableModel> </TableModel>
<LabelForm ref="labelForm" v-if="dialogVisible" :isAdd="isAdd" :rowData="rowData" @handleQuery="handleQuery" :title="title" :disabled="disabled" @closeDialog="closeDialog" /> <LabelForm ref="labelForm" v-if="isflag" :isAdd="isAdd" :rowData="rowData" @handleQuery="handleQuery"
:title="title" :disabled="disabled" @closeDialog="closeDialog" :width="600" />
</div> </div>
</template> </template>
@ -42,17 +43,21 @@ export default {
type: [String, Number], type: [String, Number],
default: null default: null
}, },
activeCategoryName: {
type: String,
default: ''
}
}, },
data() { data() {
return { return {
formLabel, formLabel,
columnsList, columnsList,
labelListAPI, labelListAPI,
dialogVisible: false, isflag: false,
fileData: {}, fileData: {},
rowData: {}, rowData: {},
title: '', title: '',
isAdd: '', isAdd: '',
} }
}, },
watch: { watch: {
@ -84,24 +89,34 @@ export default {
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd() { handleAdd() {
this.rowData = {} this.rowData = {
labelGroupName: this.activeCategoryName,
labelGroupId: this.value
}
this.title = '新增标签' this.title = '新增标签'
this.isAdd = 'add' this.isAdd = 'add'
this.dialogVisible = true this.isflag = true
}, },
/** 修改操作 */ /** 修改操作 */
handleUpdate(row) { handleUpdate(row) {
this.rowData = row this.rowData = {
labelGroupName: this.activeCategoryName,
...row
}
this.title = '编辑标签' this.title = '编辑标签'
this.isAdd = 'edit' this.isAdd = 'edit'
this.dialogVisible = true this.isflag = true
}, },
/* 搜索操作 */ /* 搜索操作 */
handleQuery() { handleQuery() {
this.$refs.labelTableRef.getTableList() this.$refs.labelTableRef.getTableList()
}, },
closeDialog() {
this.isflag = false;
},
/** 删除操作 */ /** 删除操作 */
handleDelete(raw) { handleDelete(raw) {
this.$confirm(`确定要删除标签名称"${raw.labelName}"吗?删除后将无法恢复!`, '操作提示', { this.$confirm(`确定要删除标签名称"${raw.labelName}"吗?删除后将无法恢复!`, '操作提示', {

View File

@ -6,7 +6,7 @@
<LeftLabelGroup :value="activeCategory" @change="handleCategoryChange" /> <LeftLabelGroup :value="activeCategory" @change="handleCategoryChange" />
</el-col> </el-col>
<el-col :span="20" class="right-col"> <el-col :span="20" class="right-col">
<RightTable :value="activeCategory" /> <RightTable :value="activeCategory" :activeCategoryName="activeCategoryName" />
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
@ -26,11 +26,13 @@ export default {
data() { data() {
return { return {
activeCategory: null, activeCategory: null,
activeCategoryName: '',
} }
}, },
methods: { methods: {
handleCategoryChange(categoryId) { handleCategoryChange(categoryId, categoryName) {
this.activeCategory = categoryId this.activeCategory = categoryId
this.activeCategoryName = categoryName
}, },
} }
} }