标签组管理
This commit is contained in:
parent
b0a86767ce
commit
05d17a539e
|
|
@ -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',
|
||||||
|
|
|
||||||
|
|
@ -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: '',
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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 || '删除失败');
|
||||||
|
|
|
||||||
|
|
@ -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}"吗?删除后将无法恢复!`, '操作提示', {
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue