能力标签相关更改

back/src/views/modules/ability/components/tag-directory.vue

@@ -0,0 +1,144 @@
+<template>
+    <div class="tag-directory-box">
+        <div class="left-tree-box">
+            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+                <el-form-item>
+                    <el-input v-model="dataForm.dictName" placeholder="标签名称" clearable></el-input>
+                </el-form-item>
+                <el-form-item>
+                    <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+                </el-form-item>
+                <div class="tree-box">
+                    <el-tree class="filter-tree" :data="dataListCopy" :props="defaultProps" default-expand-all
+                        @node-click="handleNodeClick" :filter-node-method="filterNode" ref="tree">
+                    </el-tree>
+                </div>
+            </el-form>
+        </div>
+
+        <div class="right-detail">
+            <div class="title">标签详情</div>
+            <el-form :model="dataForm" label-width="120px">
+                <el-form-item prop="dictName" label="标签名称">
+                    <el-input v-model="dataForm.dictName" :placeholder="$t('dict.dictName')"></el-input>
+                </el-form-item>
+                <el-form-item prop="dictType" label="标签编号">
+                    <el-input v-model="dataForm.dictType" placeholder="标签编号"></el-input>
+                </el-form-item>
+                <el-form-item prop="dictType" label="标签分类" style="width:100%">
+                    <el-input v-model="dataForm.dictType" placeholder="标签分类"></el-input>
+                </el-form-item>
+                <el-form-item prop="remark" :label="$t('dict.remark')" style="width:100%">
+                    <el-input type="textarea" :rows="4" v-model="dataForm.remark" :placeholder="$t('dict.remark')">
+                    </el-input>
+                </el-form-item>
+            </el-form>
+        </div>
+    </div>
+</template>
+  
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from '../tag-type-add-or-update'
+import TagSysBuildLife from './tag-sys-build-life'
+import { addDynamicRoute } from '@/router'
+
+
+export default {
+    mixins: [mixinViewModule],
+    data() {
+        return {
+            mixinViewModuleOptions: {
+                getDataListURL: '/sys/dict/type/page',
+                getDataListIsPage: true,
+                deleteURL: '/sys/dict/type',
+                deleteIsBatch: true
+            },
+            dataForm: {
+                id: '0',
+                dictName: '',
+                dictType: '',
+                dictLabel: '',
+            },
+            filterText: '',
+            dataList: [],
+            dataListCopy: [],
+            defaultProps: {
+                children: 'sysDictDataDTOList',
+                label: 'dictName'
+            }
+        }
+    },
+    watch: {
+        filterText(val) {
+            this.$refs.tree.filter(val);
+        },
+        dataList: {
+            handler(newVal) {
+                this.dataListCopy = []
+                newVal.map(v => {
+                    if (v.sysDictDataDTOList && v.sysDictDataDTOList.length && v.sysDictDataDTOList.length > 0) {
+                        v.sysDictDataDTOList.map(x => {
+                            x.dictName = x.dictLabel;
+                            return x
+                        })
+                    }
+                    this.dataListCopy.push(v)
+                })
+            }
+        }
+    },
+    methods: {
+        filterNode(value, data) {
+            if (!value) return true;
+            return data.label.indexOf(value) !== -1;
+        },
+        handleNodeClick(data) {
+            console.log('data------------>', data);
+            this.dataForm = data
+        }
+    },
+
+}
+</script>
+<style scoped lang="scss">
+.tag-directory-box {
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+}
+
+.left-tree-box {
+    width: 350px;
+    background: #fff;
+    padding: 20px 0;
+}
+
+.right-detail {
+    flex: 1;
+    margin-left: 20px;
+    background: #fff;
+    padding: 20px;
+}
+
+.right-detail {
+    .el-form {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .el-form-item {
+        width: 50%;
+    }
+}
+
+.title {
+    line-height: 24px;
+    font-size: 20px;
+    color: #303133;
+    padding-bottom: 25px;
+}
+</style>
+  

back/src/views/modules/ability/components/tag-sys-build-life.vue

@@ -0,0 +1,62 @@
+<template>
+  <el-dialog :visible.sync="visible" title="生命周期管理" :close-on-click-modal="false" :close-on-press-escape="false">
+    <div class="title">{{ rowData.dictName }}</div>
+    <el-table v-loading="dataListLoading" :data="dataList" border style="width: 100%;">
+      <el-table-column prop="status" label="状态" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="time" label="时间" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="remark" label="备注" header-align="center" align="center"></el-table-column>
+      <el-table-column prop="operator" label="操作者" header-align="center" align="center"></el-table-column>
+    </el-table>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      visible: false,
+      dataList: [
+        {
+          status: '创建',
+          time: '2022-10-11',
+          remark: '创建',
+          operator: '管理员'
+        },
+        {
+          status: '修改',
+          time: '2022-09-24',
+          remark: '修改标签描述',
+          operator: '管理员'
+        },
+        {
+          status: '修改',
+          time: '2022-09-19',
+          remark: '补充城市管理标签页',
+          operator: '城管账号'
+        },
+        {
+          status: '删除',
+          time: '2022-08-11',
+          remark: '停止使用',
+          operator: '管理员'
+        },
+      ],
+      rowData: {}
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+.title {
+  line-height: 24px;
+  font-size: 20px;
+  color: #303133;
+  padding-bottom: 25px;
+}
+</style>

back/src/views/modules/ability/components/tag-sys-build.vue

@@ -0,0 +1,103 @@
+<template>
+    <el-card shadow="never" class="aui-card--fill">
+        <div class="mod-sys__dict">
+            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+                <el-form-item>
+                    <el-input v-model="dataForm.dictName" placeholder="标签名称" clearable></el-input>
+                </el-form-item>
+                <el-form-item>
+                    <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="addOrUpdateHandle()">新增分类</el-button>
+                </el-form-item>
+            </el-form>
+            <el-table v-loading="dataListLoading" :data="dataList" border
+                @selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle"
+                style="width: 100%;">
+                <el-table-column prop="dictName" label="分类名称" header-align="center" align="center"></el-table-column>
+                <el-table-column prop="remark" label="描述" header-align="center" align="center"></el-table-column>
+                <el-table-column prop="dictType" label="编号" header-align="center" align="center"></el-table-column>
+                <el-table-column label="状态" header-align="center" align="center">
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.status == 1 ? '启用' : '禁用' }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="createDate" label="创建时间" header-align="center" align="center"></el-table-column>
+                <el-table-column label="操作" fixed="right" header-align="center" align="center" width="280">
+                    <template slot-scope="scope">
+                        <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
+                        <el-button type="text" size="small" @click="handleClick()">{{ scope.row.status
+                                == 1 ? '禁用' : '启用'
+                        }}</el-button>
+                        <el-button type="text" @click="childHandle(scope.row)">新建标签</el-button>
+                        <el-button type="text" size="small" @click="showLife(scope.row)">生命周期管理</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
+                layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+                @current-change="pageCurrentChangeHandle">
+            </el-pagination>
+            <!-- 弹窗, 新增 / 修改 -->
+            <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+            <!-- 生命周期管理 -->
+            <TagSysBuildLife ref="lifeModal" @refreshDataList="getDataList"></TagSysBuildLife>
+        </div>
+    </el-card>
+</template>
+  
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from '../tag-type-add-or-update'
+import TagSysBuildLife from './tag-sys-build-life'
+import { addDynamicRoute } from '@/router'
+export default {
+    mixins: [mixinViewModule],
+    data() {
+        return {
+            mixinViewModuleOptions: {
+                getDataListURL: '/sys/dict/type/page',
+                getDataListIsPage: true,
+                deleteURL: '/sys/dict/type',
+                deleteIsBatch: true
+            },
+            dataForm: {
+                id: '0',
+                dictName: '',
+                dictType: '',
+                dictLabel: '',
+            },
+            rowClickData: {},
+        }
+    },
+    components: {
+        AddOrUpdate, TagSysBuildLife
+    },
+    methods: {
+        // 子级
+        childHandle(row) {
+            // 路由参数
+            const routeParams = {
+                routeName: `${this.$route.name}__${row.id}`,
+                title: `${this.$route.meta.title} - ${row.dictType}`,
+                path: 'ability/tag-data',
+                params: {
+                    dictTypeId: row.id
+                }
+            }
+            // 动态路由
+            addDynamicRoute(routeParams, this.$router)
+        },
+        // 生命周期管理
+        showLife(row) {
+            this.$refs.lifeModal.visible = true;
+            this.$refs.lifeModal.rowData = row;
+        },
+        handleClick() {
+
+        }
+    }
+}
+</script>
+  

back/src/views/modules/ability/tag.vue

@@ -1,75 +1,40 @@
 <template>
-    <el-card shadow="never" class="aui-card--fill">
+    <div style="height:100%">
-        <div class="mod-sys__dict">
+        <div class="tab-box">
-            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+            <div class="tab-item" v-for="(tab, i) in tabList" :key="i" @click="selectTab = tab.key"
-                <el-form-item>
+                :class="[selectTab == tab.key ? 'tab-active' : '', i == 0 ? 'no-border-right' : '']">
-                    <el-input v-model="dataForm.dictName" placeholder="标签名称" clearable></el-input>
+                {{ tab.name }}
-                </el-form-item>
+            </div>
-                <!-- <el-form-item>
-                    <el-input v-model="dataForm.dictLabel" placeholder="资源名称" clearable></el-input>
-                </el-form-item> -->
-                <el-form-item>
-                    <el-button @click="getDataList()">{{ $t('query') }}</el-button>
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="addOrUpdateHandle()">新增分类</el-button>
-                </el-form-item>
-            </el-form>
-            <el-table v-loading="dataListLoading" :data="dataList" border
-                @selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle"
-                style="width: 100%;">
-                <el-table-column prop="dictName" label="标签名称" header-align="center" align="center"></el-table-column>
-                <el-table-column prop="dictType" label="英文名称" header-align="center" align="center">
-                    <template slot-scope="scope">
-                        <el-button type="text" @click="childHandle(scope.row)">{{ scope.row.dictType }}</el-button>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="remark" label="描述" header-align="center" align="center"></el-table-column>
-                <el-table-column prop="createDate" label="创建时间" header-align="center" align="center"></el-table-column>
-                <el-table-column label="操作" fixed="right" header-align="center" align="center" width="280">
-                    <template slot-scope="scope">
-                        <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">新增</el-button>
-                        <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">删除</el-button>
-                        <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
-                        <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">详情</el-button>
-                        <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{scope.row.status == 1 ? '禁用' : '启用'}}</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
-                layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
-                @current-change="pageCurrentChangeHandle">
-            </el-pagination>
-            <!-- 弹窗, 新增 / 修改 -->
-            <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
         </div>
-    </el-card>
+        <TagSysBuild v-if="selectTab == 'build'"></TagSysBuild>
+        <TagDirectory v-if="selectTab == 'directory'"></TagDirectory>
+    </div>
 </template>
   
 <script>
 import mixinViewModule from '@/mixins/view-module'
-  import AddOrUpdate from './tag-type-add-or-update'
+import TagSysBuild from './components/tag-sys-build'
+import TagDirectory from './components/tag-directory'
 import { addDynamicRoute } from '@/router'
 export default {
     mixins: [mixinViewModule],
     data() {
         return {
-            mixinViewModuleOptions: {
+            tabList: [
-                getDataListURL: '/sys/dict/type/page',
+                {
-                getDataListIsPage: true,
+                    name: '标签体系构建',
-                deleteURL: '/sys/dict/type',
+                    key: 'build'
-                deleteIsBatch: true
+                }, {
-            },
+                    name: '标签目录管理',
-            dataForm: {
+                    key: 'directory'
-                id: '0',
+                },
-                dictName: '',
+            ],
-                dictType: '',
+            selectTab: 'build'
-                dictLabel: '',
-            }
         }
     },
     components: {
-          AddOrUpdate
+        TagSysBuild,
+        TagDirectory
     },
     methods: {
         // 子级
@@ -89,4 +54,28 @@ export default {
     }
 }
 </script>
+<style scoped>
+.tab-box {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.tab-item {
+    display: inline-block;
+    padding: 10px 20px;
+    cursor: pointer;
+    border: 1px solid #e0e0e0;
+    box-sizing: border-box;
+}
+
+.no-border-right {
+    border-right: 0;
+}
+
+.tab-active {
+    background: #0058e1;
+    color: #fff;
+}
+</style>