修改

src/permission.js

@@ -44,6 +44,9 @@ const myRoles = [
   'commendList', 
   'festivalManage', 
   'festivalList', 
+  'dictManage', 
+  'dictList', 
+  'dictDataList', 
 ]
 
 router.beforeEach((to, from, next) => {

src/router/index.js

@@ -203,6 +203,20 @@ export const asyncRouterMap = [
       { path: 'festivalList', component: _import('festivalManage/festivalList'), name: 'festivalList', meta: { title: '节日列表', icon: 'lipin', noCache: true }},
     ]
   },
+  {
+    path: '/dictManage',
+    component: Layout,
+    redirect: 'noredirect',
+    name: 'dictManage',
+    meta: {
+      title: '字典管理',
+      icon: 'lipin'
+    },
+    children: [
+      { path: 'dictList', component: _import('dictManage/dictList'), name: 'dictList', meta: { title: '字典列表', noCache: true }},
+      { path: 'dictDataList/:id', component: _import('dictManage/dictDataList'), name: 'dictDataList', meta: { title: '字典数据', noCache: false, hideTag: true, hidden: true }},
+    ]
+  },
 
 
 

src/views/dictManage/dictDataList.vue

@@ -0,0 +1,388 @@
+<template>
+    <div class="app-container calendar-list-container">
+
+        <!-- 查询和其他操作 -->
+        <div class="filter-container">
+            <el-select v-model="listQuery.nameId" clearable placeholder="字典名称" class="filter-item" style="width: 200px">
+                <el-option :key="item.type" v-for="item in dictNameList" :label="item.name" :value="item.type">
+                </el-option>
+            </el-select>
+            <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入字典标签"
+                v-model="listQuery.tag"></el-input>
+                <el-select v-model="listQuery.type" clearable placeholder="状态" class="filter-item" style="width: 200px">
+                <el-option :key="item.type" v-for="item in typeList" :label="item.name" :value="item.type">
+                </el-option>
+            </el-select>
+            <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
+            <el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-edit">添加</el-button>
+            <!-- <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="delAll">批量删除</el-button> -->
+
+        </div>
+
+        <!-- 查询结果 -->
+        <el-table size="small" :data="list" v-loading="listLoading" @selection-change="handleSelectionChange"
+            element-loading-text="正在查询中。。。" border fit highlight-current-row>
+            <el-table-column type="selection" width="55px"> </el-table-column>
+            <el-table-column align="center" min-width="60px" label="字典编码" prop="code">
+            </el-table-column>
+            <el-table-column align="center" min-width="100px" label="字典标签" prop="tag">
+            </el-table-column>
+            <el-table-column align="center" min-width="60px" label="字典键值" prop="value">
+            </el-table-column>
+            <el-table-column align="center" min-width="60px" label="字典排序" prop="sort">
+            </el-table-column>
+            <el-table-column align="center" min-width="100px" label="状态">
+            <template slot-scope="scope">
+                <el-tag v-if="scope.row.status == 1">{{ scope.row.statusName }}</el-tag>
+                <el-tag v-else>{{ scope.row.statusName }}</el-tag>
+            </template>
+        </el-table-column>
+        <el-table-column align="center" min-width="200px" label="备注" prop="remark">
+        </el-table-column>
+        <el-table-column align="center" min-width="100px" label="创建时间" prop="createTime">
+        </el-table-column>
+            <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
+                <template slot-scope="scope">
+                    <el-button type="primary" size="small" @click="handleUpdate(scope.row, false)">编辑</el-button>
+
+                    <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <!-- 分页 -->
+        <div class="pagination-container">
+            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]" :page-size="listQuery.limit"
+                layout="total, sizes, prev, pager, next, jumper" :total="total">
+            </el-pagination>
+        </div>
+
+        <!-- 添加或修改对话框 -->
+        <el-dialog
+        :title="textMap[dialogStatus]"
+        :visible.sync="dialogFormVisible"
+        width="40%"
+      >
+        <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="80px" style='width: 700px; margin-left:50px;'>
+            <el-form-item  label="字典类型" prop="type">
+              <el-input disabled style="width: 300px" v-model="dataForm.type"></el-input>
+            </el-form-item>
+            <el-form-item  label="字典标签" prop="tag">
+              <el-input style="width: 300px" v-model="dataForm.tag"></el-input>
+            </el-form-item>
+            <el-form-item  label="字典键值" prop="value">
+              <el-input style="width: 300px" v-model="dataForm.value"></el-input>
+            </el-form-item>
+            <el-form-item label="显示排序" prop="sort">
+                <el-input-number
+                  :precision="0"
+                  :step="1"
+                  v-model="dataForm.sort"
+                ></el-input-number>
+              </el-form-item>
+            <el-form-item  label="状态">
+                <el-radio-group v-model="dataForm.status">
+                    <el-radio :label="1">正常</el-radio>
+                    <el-radio :label="0">停用</el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item  label="备注">
+              <el-input type="textarea" :rows="2" style="width: 300px" v-model="dataForm.remark"></el-input>
+            </el-form-item>
+            
+            
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取消</el-button>
+          <el-button v-if="dialogStatus == 'create'" type="primary" @click="createData">确定</el-button>
+          <el-button v-else type="primary" @click="updateData">确定</el-button>
+        </div>
+      </el-dialog>
+
+    </div>
+</template>
+  
+<style>
+.demo-table-expand {
+    font-size: 0;
+}
+
+.demo-table-expand label {
+    width: 200px;
+    color: #99a9bf;
+}
+
+.demo-table-expand .el-form-item {
+    margin-right: 0;
+    margin-bottom: 0;
+}
+</style>
+  
+<script>
+import { listNews, createNews, updateNews, deleteNews, deleteAllNews } from "@/api/newsCenter";
+import waves from "@/directive/waves"; // 水波纹指令
+import Tinymce from '@/components/Tinymce'
+
+export default {
+    components: { Tinymce },
+    directives: { waves },
+    data() {
+        return {
+            id: undefined,
+            dictNameList: [
+                {
+                    id:1,
+                    type: 'sys_user_sex',
+                    name: "用户性别",
+                },
+                {
+                    id:2,
+                    type: 'sys_normal_disable',
+                    name: "系统开关",
+                },
+            ],
+            typeList: [
+                {
+                    type: 1,
+                    name: "正常",
+                },
+                {
+                    type: 0,
+                    name: "停用",
+                },
+            ],
+            list: [
+                {
+                    type:'sys_user_sex',
+                    code: 1,
+                    tag: '男',
+                    value: 0,
+                    sort:1,
+                    status:0,
+                    statusName:'正常',
+                    remark:'性别男',
+                    createTime:'2023-6-22',
+                },
+            ],
+            delarr: [],
+            multipleSelection: [],
+            total: 0,
+            listLoading: false,
+            listQuery: {
+                page: 1,
+                limit: 10,
+                nameId: '',
+                tag: '',
+                status: '',
+            },
+            dataForm: {
+                type: undefined,
+                tag: undefined,
+                value: undefined,
+                sort: undefined,
+                status: 1,
+                remark: undefined,
+            },
+            dialogFormVisible: false,
+            dialogStatus: '',
+            textMap: {
+                update: "编辑",
+                create: "创建",
+            },
+            imageUrl: undefined,
+            rules: {
+                tag: [{ required: true, message: "字典标签不能为空", trigger: "blur" }],
+                value: [{ required: true, message: "字典键值不能为空", trigger: "blur" }],
+                sort: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
+            },
+        }
+    },
+    created() {
+        this.id = this.$route.params.id
+        // this.getList();
+    },
+    methods: {
+
+        resetForm() {
+            this.dataForm = {
+                type: undefined,
+                tag: undefined,
+                value: undefined,
+                sort: undefined,
+                status: 1,
+                remark: undefined,
+            };
+        },
+        handleCreate() {
+            this.resetForm();
+            this.dialogFormVisible = true;
+            this.dialogStatus = "create";
+            this.$nextTick(() => {
+                this.$refs["dataForm"].clearValidate();
+            });
+        },
+        createData() {
+            this.$refs["dataForm"].validate((valid) => {
+                if (valid) {
+                    createNews(this.dataForm)
+                        .then(() => {
+                            this.getList();
+                            this.dialogFormVisible = false;
+
+                            this.$notify({
+                                title: "成功",
+                                message: "创建成功",
+                                type: "success",
+                                duration: 2000,
+                            });
+                            this.getList()
+                        })
+                }
+            });
+        },
+        getList() {
+            this.listLoading = true
+            listNews(this.listQuery).then(response => {
+                this.list = response.data.data.items
+                this.total = response.data.data.total
+                this.listLoading = false
+            }).catch(() => {
+                this.list = []
+                this.total = 0
+                this.listLoading = false
+            })
+        },
+
+        handleFilter() {
+            this.listQuery.page = 1
+            this.getList()
+        },
+
+        handleSizeChange(val) {
+            this.listQuery.limit = val
+            this.getList()
+        },
+
+        handleCurrentChange(val) {
+            this.listQuery.page = val
+            this.getList()
+        },
+
+        handleUpdate(row) {
+            this.dataForm = Object.assign({}, row);
+            this.dialogStatus = 'update'
+            this.dialogFormVisible = true
+            this.$nextTick(() => {
+                this.$refs['dataForm'].clearValidate()
+            })
+        },
+
+        updateData() {
+            this.$refs['dataForm'].validate((valid) => {
+                if (valid) {
+                    updateNews(this.dataForm).then(() => {
+                        this.dialogFormVisible = false
+                        this.$notify({
+                            title: '成功',
+                            message: '更新成功',
+                            type: 'success',
+                            duration: 2000
+                        })
+                        this.getList()
+                    })
+
+                }
+            })
+        },
+
+        handleDelete(row) {
+
+            this.$confirm('确认删除吗?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                deleteNews(row).then(response => {
+                    this.$notify({
+                        title: '成功',
+                        message: '删除成功',
+                        type: 'success',
+                        duration: 2000
+                    })
+                    const index = this.list.indexOf(row)
+                    this.list.splice(index, 1)
+                })
+            }).catch(() => {
+
+            })
+
+        },
+        delAll() {
+            this.$confirm("确认删除吗?", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            })
+                .then(() => {
+                    const length = this.multipleSelection.length;
+
+                    if (length > 0) {
+                        for (let i = 0; i < length; i++) {
+                            this.delarr.push(this.multipleSelection[i].id);
+                        }
+                        const newsIds = this.delarr.join(",");
+                        deleteAllNews({ newsId: newsIds })
+                            .then(() => {
+                                this.$notify({
+                                    title: "成功",
+                                    message: "删除成功",
+                                    type: "success",
+                                    duration: 2000,
+                                });
+                                this.getList();
+                            })
+                            .catch(() => { });
+                    } else {
+                        this.$notify({
+                            title: "警告提示",
+                            message: "请选择要删除的信息！",
+                            type: "warning",
+                        });
+                    }
+                })
+                .catch(() => { });
+        },
+        handleSelectionChange(val) {
+            this.multipleSelection = val;
+        },
+    }
+}
+</script>
+<style>
+.ad-avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.ad-avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+}
+
+.ad-avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+}
+
+.ad-avatar {
+    display: block;
+}
+</style>
+  

src/views/dictManage/dictList.vue

@@ -0,0 +1,382 @@
+<template>
+    <div class="app-container calendar-list-container">
+  
+      <!-- 查询和其他操作 -->
+      <div class="filter-container">
+        <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入字典名称" v-model="listQuery.name"></el-input>
+        <el-input clearable class="filter-item" style="width: 200px;" placeholder="请输入字典类型" v-model="listQuery.type"></el-input>
+        <el-select v-model="listQuery.status" clearable placeholder="字典状态" class="filter-item" style="width: 200px">
+            <el-option :key="item.type" v-for="item in typeList" :label="item.name" :value="item.type">
+            </el-option>
+        </el-select>
+      <el-date-picker
+        clearable
+        class="filter-item"
+        style="width: 250px"
+        v-model="listQuery.dateRange"
+        type="daterange"
+        unlink-panels
+        range-separator="~"
+        value-format="yyyy-MM-dd"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      >
+      </el-date-picker>
+        <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查找</el-button>
+        <el-button class="filter-item" type="primary" @click="handleCreate" icon="el-icon-edit">添加</el-button>
+        <!-- <el-button class="filter-item" type="warning" icon="el-icon-delete" @click="delAll">批量删除</el-button> -->
+  
+      </div>
+  
+      <!-- 查询结果 -->
+      <el-table
+        size="small"
+        :data="list"
+        v-loading="listLoading"
+        @selection-change="handleSelectionChange"
+        element-loading-text="正在查询中。。。"
+        border
+        fit
+        highlight-current-row
+      >
+        <el-table-column type="selection" width="55px"> </el-table-column>
+        <el-table-column type="index" label="序号" header-align="center" align="center">
+        </el-table-column>
+  
+        <el-table-column align="center" min-width="100px" label="字典名称" prop="name">
+        </el-table-column>
+        <el-table-column align="center" min-width="100px" label="字典类型">
+            <template slot-scope="scope">
+                <router-link :to="{name: 'dictDataList', params: { id: scope.row.id }}">
+                    <div style="color: #337ab7;cursor: pointer;">{{ scope.row.type }}</div>
+                </router-link>
+            </template>
+        </el-table-column>
+        <el-table-column align="center" min-width="100px" label="状态">
+            <template slot-scope="scope">
+                <el-tag v-if="scope.row.status == 1">{{ scope.row.statusName }}</el-tag>
+                <el-tag v-else>{{ scope.row.statusName }}</el-tag>
+            </template>
+            
+        </el-table-column>
+        <el-table-column align="center" min-width="200px" label="备注" prop="remark">
+        </el-table-column>
+        <el-table-column align="center" min-width="100px" label="创建时间" prop="createTime">
+        </el-table-column>
+        <el-table-column align="center" label="操作" width="240px" class-name="small-padding fixed-width">
+          <template slot-scope="scope">
+            <el-button
+              type="primary"
+              size="small"
+              @click="handleUpdate(scope.row, false)"
+              >编辑</el-button
+            >
+  
+            <el-button type="danger" size="mini"  @click="handleDelete(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+  
+      <!-- 分页 -->
+      <div class="pagination-container">
+        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
+          :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
+        </el-pagination>
+      </div>
+  
+      <!-- 添加或修改对话框 -->
+      <el-dialog
+        :title="textMap[dialogStatus]"
+        :visible.sync="dialogFormVisible"
+        width="40%"
+      >
+        <el-form :rules="rules" ref="dataForm" :model="dataForm" status-icon label-position="left" label-width="80px" style='width: 700px; margin-left:50px;'>
+            <el-form-item  label="字典名称" prop="name">
+              <el-input style="width: 300px" v-model="dataForm.name"></el-input>
+            </el-form-item>
+            <el-form-item  label="字典类型" prop="type">
+              <el-input style="width: 300px" v-model="dataForm.type"></el-input>
+            </el-form-item>
+            <el-form-item  label="状态">
+                <el-radio-group v-model="dataForm.status">
+                    <el-radio :label="1">正常</el-radio>
+                    <el-radio :label="0">停用</el-radio>
+                </el-radio-group>
+            </el-form-item>
+            <el-form-item  label="备注">
+              <el-input type="textarea" :rows="2" style="width: 300px" v-model="dataForm.remark"></el-input>
+            </el-form-item>
+            
+            
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取消</el-button>
+          <el-button v-if="dialogStatus == 'create'" type="primary" @click="createData">确定</el-button>
+          <el-button v-else type="primary" @click="updateData">确定</el-button>
+        </div>
+      </el-dialog>
+  
+    </div>
+  </template>
+  
+  <style>
+    .demo-table-expand {
+      font-size: 0;
+    }
+    .demo-table-expand label {
+      width: 200px;
+      color: #99a9bf;
+    }
+    .demo-table-expand .el-form-item {
+      margin-right: 0;
+      margin-bottom: 0;
+    }
+  </style>
+  
+  <script>
+    import {listNews, createNews, updateNews, deleteNews, deleteAllNews } from "@/api/newsCenter";
+    import waves from "@/directive/waves"; // 水波纹指令
+    import Tinymce from '@/components/Tinymce'
+  
+  export default {
+    components: { Tinymce },
+    directives: { waves },
+    data() {
+      return {
+        typeList: [
+        {
+          type: 1,
+          name: "正常",
+        },
+        {
+          type: 0,
+          name: "停用",
+        },
+      ],
+        list: [
+          {
+            id:1,
+            name:'用户性别',
+            type:'sys_user_sex',
+            status:0,
+            statusName:'正常',
+            remark:'用户性别列表',
+            createTime:'2023-6-22',
+            
+          },
+        ],
+        delarr: [],
+        multipleSelection: [],
+        total: 0,
+        listLoading: false,
+        listQuery: {
+          page: 1,
+          limit: 10,
+          name: '',
+          type: '',
+          status: '',
+          dateRange: '',
+        },
+        dataForm: {
+          name: undefined,
+          type: undefined,
+          status: 1,
+          remark: undefined,
+        },
+        dialogFormVisible: false,
+        dialogStatus: '',
+        textMap: {
+          update: "编辑",
+          create: "创建",
+        },
+        imageUrl: undefined,
+        rules: {
+          name: [{ required: true, message: "字典名称不能为空", trigger: "blur" }],
+          type: [{ required: true, message: "字典类型不能为空", trigger: "blur" }],
+        },
+      }
+    },
+    created() {
+        // this.getList();
+    },
+    methods: {
+        handleDictData(row){
+
+        },
+      resetForm() {
+        this.dataForm = {
+            name: undefined,
+            type: undefined,
+            status: 1,
+            remark: undefined,
+        };
+      },
+      handleCreate() {
+        this.resetForm();
+        this.dialogFormVisible = true;
+        this.dialogStatus = "create";
+        this.$nextTick(() => {
+          this.$refs["dataForm"].clearValidate();
+        });
+      },
+      createData() {
+        this.$refs["dataForm"].validate((valid) => {
+          if (valid) {
+            createNews(this.dataForm)
+                  .then(() => {
+                    this.getList();
+                    this.dialogFormVisible = false;
+  
+                    this.$notify({
+                      title: "成功",
+                      message: "创建成功",
+                      type: "success",
+                      duration: 2000,
+                    });
+                    this.getList()
+                  })
+          }
+        });
+      },
+      getList() {
+        this.listLoading = true
+        listNews(this.listQuery).then(response => {
+          this.list = response.data.data.items
+          this.total = response.data.data.total
+          this.listLoading = false
+        }).catch(() => {
+          this.list = []
+          this.total = 0
+          this.listLoading = false
+        })
+      },
+  
+      handleFilter() {
+        this.listQuery.page = 1
+        this.getList()
+      },
+  
+      handleSizeChange(val) {
+        this.listQuery.limit = val
+        this.getList()
+      },
+  
+      handleCurrentChange(val) {
+        this.listQuery.page = val
+        this.getList()
+      },
+  
+      handleUpdate(row) {
+        this.dataForm = Object.assign({}, row);
+        this.dialogStatus = 'update'
+        this.dialogFormVisible = true
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
+      },
+  
+      updateData() {
+        this.$refs['dataForm'].validate((valid) => {
+          if (valid) {
+            updateNews(this.dataForm).then(() => {
+                this.dialogFormVisible = false
+                this.$notify({
+                  title: '成功',
+                  message: '更新成功',
+                  type: 'success',
+                  duration: 2000
+                })
+                this.getList()
+              })
+            
+          }
+        })
+      },
+  
+      handleDelete(row) {
+  
+        this.$confirm('确认删除吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          deleteNews(row).then(response => {
+            this.$notify({
+              title: '成功',
+              message: '删除成功',
+              type: 'success',
+              duration: 2000
+            })
+            const index = this.list.indexOf(row)
+            this.list.splice(index, 1)
+          })
+        }).catch(() => {
+  
+        })
+  
+      },
+      delAll() {
+        this.$confirm("确认删除吗?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            const length = this.multipleSelection.length;
+  
+            if (length > 0) {
+              for (let i = 0; i < length; i++) {
+                this.delarr.push(this.multipleSelection[i].id);
+              }
+              const newsIds = this.delarr.join(",");
+              deleteAllNews({ newsId: newsIds })
+                .then(() => {
+                  this.$notify({
+                    title: "成功",
+                    message: "删除成功",
+                    type: "success",
+                    duration: 2000,
+                  });
+                  this.getList();
+                })
+                .catch(() => {});
+            } else {
+              this.$notify({
+                title: "警告提示",
+                message: "请选择要删除的信息！",
+                type: "warning",
+              });
+            }
+          })
+          .catch(() => {});
+      },
+      handleSelectionChange(val) {
+        this.multipleSelection = val;
+      },
+    }
+  }
+  </script>
+  <style>
+    .ad-avatar-uploader .el-upload {
+      border: 1px dashed #d9d9d9;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
+    .ad-avatar-uploader .el-upload:hover {
+      border-color: #409EFF;
+    }
+    .ad-avatar-uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+      width: 178px;
+      height: 178px;
+      line-height: 178px;
+      text-align: center;
+    }
+    .ad-avatar {
+      display: block;
+    }
+  </style>
+