提交 2ce9cd31 authored 作者: 王鹏飞's avatar 王鹏飞

chore: 新增标签管理

上级 04748ca7
......@@ -18,14 +18,12 @@
clearable
v-bind="item"
v-if="item.type === 'select'"
@change="search"
>
@change="search">
<template v-for="(option, index) in item.options">
<el-option
:label="option[item.labelKey] || option.label"
:value="option[item.valueKey] || option.value"
:key="index"
></el-option>
:key="index"></el-option>
</template>
</el-select>
</template>
......@@ -46,12 +44,12 @@
<slot name="body" v-bind="{ data: dataList }">
<el-table
:data="dataList"
:header-cell-style="{ background: '#f7f9fa' }"
v-loading="loading"
v-bind="$attrs"
v-on="$listeners"
style="height: 100%"
ref="table"
>
ref="table">
<template v-for="item in columns">
<el-table-column v-bind="item" :key="item.prop" v-if="visible(item)">
<template v-slot:default="scope" v-if="item.slots || item.computed">
......@@ -78,8 +76,7 @@
@size-change="pageSizeChange"
@current-change="fetchList()"
:hide-on-single-page="true"
v-if="hasPagination"
>
v-if="hasPagination">
</el-pagination>
</div>
<!-- 更多筛选 -->
......@@ -101,14 +98,12 @@
clearable
v-bind="item"
v-if="item.type === 'select'"
style="width: 100%"
>
style="width: 100%">
<template v-for="(option, index) in item.options">
<el-option
:label="option[item.labelKey] || option.label"
:value="option[item.valueKey] || option.value"
:key="index"
></el-option>
:key="index"></el-option>
</template>
</el-select>
</template>
......
......@@ -36,7 +36,8 @@ export default {
// }
{ name: '成员管理', path: '/settings/users', icon: 'el-icon-user' },
{ name: '角色管理', path: '/settings/roles', icon: 'el-icon-star-off' },
{ name: '权限管理', path: '/settings/permissions', icon: 'el-icon-coordinate' }
{ name: '权限管理', path: '/settings/permissions', icon: 'el-icon-coordinate' },
{ name: '标签管理', path: '/settings/labels', icon: 'el-icon-collection-tag' }
]
}
},
......
import httpRequest from '@/utils/axios'
/**
* 获取标签列表
*/
export function getLabelList(params) {
return httpRequest.get(`/api/permissions/admin/v1/${params.app_id}/application/levels`, { params })
}
/**
* 获取分组列表
*/
export function getGroupList(params) {
return httpRequest.get(`/api/permissions/admin/v1/${params.app_id}/application/level-groups`, { params })
}
/**
* 获取标签详情
*/
export function getLabel(params) {
return httpRequest.get(`/api/permissions/admin/v1/application/level/${params.id}/detail`, { params })
}
/**
* 创建标签
*/
export function createLabel(data) {
return httpRequest.post(`/api/permissions/admin/v1/${data.app_id}/application/level/create`, data)
}
/**
* 修改标签
*/
export function updateLabel(data) {
return httpRequest.put(`/api/permissions/admin/v1/application/level/${data.id}/update`, data)
}
/**
* 删除标签
*/
export function deleteLabel(data) {
return httpRequest.delete(`/api/permissions/admin/v1/application/level/${data.id}/delete`, data)
}
<template>
<el-dialog :title="title" :close-on-click-modal="false" v-bind="$attrs" v-on="$listeners" width="500px">
<el-form ref="form" :model="form" :rules="rules" label-position="top">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="标识" prop="tag">
<el-input v-model="form.tag" :disabled="isEdit" />
</el-form-item>
<el-form-item label="描述" prop="desc">
<el-input type="textarea" v-model="form.desc" />
</el-form-item>
<el-form-item label="分组" prop="group_tag">
<el-select v-model="form.group_tag" :disabled="isEdit" style="width: 100%">
<el-option v-for="item in groups" :key="item.id" :label="item.group_tag_name" :value="item.group_tag" />
</el-select>
</el-form-item>
<template v-if="groupConfig">
<el-form-item required :label="groupConfig.label" :prop="groupConfig.key.name">
<el-select
v-model="form[groupConfig.key.name]"
:multiple="groupConfig.request.is_more"
collapse-tags
style="width: 100%">
<el-option
v-for="(item, index) in groupConfigDataList"
:key="index"
:label="item[groupConfig.value.list_map]"
:value="item[groupConfig.key.list_map]" />
</el-select>
</el-form-item>
</template>
</el-form>
<template #footer>
<el-button type="text" @click="onCancel">取消</el-button>&nbsp;&nbsp;
<el-button type="primary" size="medium" @click="onPrimary">保存</el-button>
</template>
</el-dialog>
</template>
<script>
import axios from 'axios'
import { getLabel, getGroupList, createLabel, updateLabel } from '../api.js'
export default {
props: {
isEdit: { type: Boolean, default: false },
data: { type: Object, default: () => ({}) }
},
data() {
return {
groups: [],
form: { name: '', tag: '', desc: '', group_tag: '' },
rules: {
name: [{ required: true, message: '请输入标签名称', trigger: 'blur' }],
tag: [{ required: true, message: '请输入标签标识', trigger: 'blur' }],
group_tag: [{ required: true, message: '请选择分组', trigger: 'blur' }]
},
groupConfigDataList: []
}
},
watch: {
data: {
immediate: true,
handler(data) {
this.form = Object.assign({}, this.form, data)
}
},
groupConfig() {
this.fetchGroupDataList()
}
},
computed: {
appid() {
return this.$store.state.appid
},
title() {
return this.isEdit ? '修改标签' : '创建标签'
},
groupConfig() {
const config = this.groups.find(item => item.group_tag === this.form.group_tag)?.config || null
return Array.isArray(config) ? null : config
}
},
beforeMount() {
this.isEdit && this.fetchInfo()
this.getGroupList()
},
methods: {
fetchInfo() {
getLabel({ id: this.data.id }).then(res => {
this.form = Object.assign({}, this.form, res.data.detail)
})
},
getGroupList() {
getGroupList({ app_id: this.appid, limit: 500 }).then(res => {
this.groups = res.data.items
})
},
// 取消
onCancel() {
this.$emit('update:visible', false)
},
// 确定
onPrimary() {
this.$refs.form.validate().then(() => {
const params = Object.assign({ app_id: this.appid }, this.form)
if (this.groupConfig) {
const groupConfigValue = params[this.groupConfig.key.name]
if (Array.isArray(groupConfigValue)) {
params[this.groupConfig.key.name] = groupConfigValue.join(',')
}
}
this.isEdit ? this.edit(params) : this.create(params)
})
},
// 创建标签
create(params) {
createLabel(params).then(res => {
this.$message.success('创建成功')
this.$emit('update:visible', false)
this.$emit('success', res.data)
})
},
// 编辑标签
edit(params) {
updateLabel(params).then(res => {
this.$message.success('修改成功')
this.$emit('update:visible', false)
this.$emit('success', res.data)
})
},
fetchGroupDataList() {
if (!this.groupConfig) return
axios
.get(this.groupConfig.request.urls || '/api/permissions/admin/v1/131614279236792320/application/role-all')
.then(res => {
this.groupConfigDataList = res.data.data.items
if (this.isEdit) {
this.form[this.groupConfig.key.name] = this.form.sources.map(item => item.id)
}
})
}
}
}
</script>
<style></style>
const routes = [
{
path: '/settings',
component: () => import('@/components/layout/Index.vue'),
children: [{ path: 'labels', component: () => import('./views/List.vue') }]
}
]
export { routes }
<template>
<app-card>
<app-list v-bind="tableOptions" ref="list">
<template #header-aside>
<el-button type="primary" icon="el-icon-plus" @click="handleCreate">创建标签</el-button>
</template>
<template v-slot:table-x="{ row }">
<el-button type="text" @click="handleUpdate(row)">修改</el-button>
<el-button type="text" @click="onRemove(row)">删除</el-button>
</template>
</app-list>
<editform
:visible.sync="visible"
:isEdit="isEdit"
:data="editRaw"
@success="handleSuccess"
v-if="visible"></editform>
</app-card>
</template>
<script>
// 接口
import { getLabelList, deleteLabel, getGroupList } from '../api'
export default {
components: { Editform: () => import('../components/Editform.vue') },
data() {
return {
groups: [],
visible: false,
isEdit: false, // 是否是编辑状态
editRaw: {}, // 编辑的数据
multipleSelection: [] // 已选择的数据
}
},
computed: {
appid() {
return this.$store.state.appid
},
// 列表配置
tableOptions() {
return {
remote: {
httpRequest: getLabelList,
params: { app_id: this.$store.state.appid, id: '', name: '', tag: '', group_tag: '' }
},
filters: [
{ type: 'input', prop: 'id', placeholder: 'ID' },
{ type: 'input', prop: 'name', placeholder: '名称' },
{ type: 'input', prop: 'tag', placeholder: '标识' },
{
type: 'select',
prop: 'group_tag',
options: this.groups,
labelKey: 'group_tag_name',
valueKey: 'group_tag',
placeholder: '选择分组'
}
],
columns: [
{ label: '名称', prop: 'name' },
{ label: '标识', prop: 'tag' },
{ label: '分组标识', prop: 'group_tag' },
{ label: '绑定数量', prop: 'source_count' },
{ label: '描述', prop: 'desc' },
{ label: '操作', slots: 'table-x', align: 'right', width: '100', fixed: 'right' }
]
}
}
},
beforeMount() {
this.getGroupList()
},
methods: {
getGroupList() {
getGroupList({ app_id: this.appid, limit: 100 }).then(res => {
this.groups = res.data.items
})
},
// 创建成功刷新列表
handleSuccess() {
this.$refs.list.refetch()
},
// 创建
handleCreate() {
this.isEdit = false
this.editRaw = {}
this.visible = true
},
// 编辑
handleUpdate(row) {
this.isEdit = true
this.editRaw = row
this.visible = true
},
// 删除
onRemove(row) {
this.$confirm('标签删除请谨慎操作,确定删除?', '删除标签', {
confirmButtonText: '删除',
cancelButtonText: '取消',
type: 'warning'
}).then(() => this.handleRemove(row))
},
// 删除
handleRemove(row) {
deleteLabel({ app_id: this.appid, id: row.id }).then(() => {
this.$message({ type: 'success', message: '删除成功' })
this.$refs.list.refetch()
})
}
}
}
</script>
......@@ -12,7 +12,7 @@
:key="index"></el-tab-pane>
</el-tabs>
<template v-slot:table-x="{ row }">
<el-button type="text" @click="handleCreate(row)">创建子权限</el-button><br />
<el-button type="text" @click="handleCreate(row)">创建子权限</el-button>
<el-button type="text" @click="handleUpdate(row)">编辑</el-button>
<el-button type="text" @click="onRemove(row)">删除</el-button>
</template>
......@@ -76,7 +76,7 @@ export default {
}
},
{ label: '权限描述', prop: 'desc' },
{ label: '操作', slots: 'table-x', align: 'center', width: 150, fixed: 'right' }
{ label: '操作', slots: 'table-x', align: 'center', width: 200, fixed: 'right' }
]
}
}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论