chore: 新增标签管理

src/components/base/AppList.vue

@@ -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>

src/components/layout/Aside.vue

@@ -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' }
       ]
     }
   },

src/modules/settings/labels/api.js

+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)
+}

src/modules/settings/labels/components/Editform.vue

+<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>

src/modules/settings/labels/index.js

+const routes = [
+  {
+    path: '/settings',
+    component: () => import('@/components/layout/Index.vue'),
+    children: [{ path: 'labels', component: () => import('./views/List.vue') }]
+  }
+]
+
+export { routes }

src/modules/settings/labels/views/List.vue

+<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>

src/modules/settings/permissions/views/List.vue

@@ -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' }
         ]
       }
     }