菜单栏更新

minggao/package.json

@@ -35,6 +35,7 @@
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
     "less-loader": "^5.0.0",
+    "mockjs": "^1.1.0",
     "node-notifier": "^5.1.2",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",

minggao/src/components/tree-table/tree-item.vue

@@ -0,0 +1,155 @@
+<template>
+  <div :class="tdClass">
+    <span
+      class="before-line"
+      v-if="root !== 0 && nodes !== 1"
+      :style="{ left: model.bLeft + 'px' }"
+    ></span>
+    <table>
+      <tr>
+        <td :colspan="colSpan">
+          <table>
+            <tr class="leve" :class="levelClass">
+              <td class="td1">{{ model.id }}</td>
+              <td class="td2">
+                <div class="td-title" @dblclick="handlerExpand(model)">
+                  <span
+                    v-if="model.childrens.length > 0"
+                    class="tree-close"
+                    :class="{ 'tree-open': model.isExpand }"
+                    @click="handlerExpand(model)"
+                  ></span>
+                  <a class="ellipsis">
+                    <i class="t-icon m-dep"></i>
+                    <span :title="model.org_name">{{
+                      model.org_name
+                    }}</span>
+                  </a>
+                </div>
+              </td>
+              <td class="td3">{{ model.create_time }}</td>
+              <td class="td4">
+                <span :title="model.modify_time" class="ellipsis">{{
+                  model.modify_time
+                }}</span>
+              </td>
+              <td class="td6">
+                <a class="reset" href="javascript:;" @click="actionFunc(model)"
+                  >编辑</a
+                >
+                <i class="line"></i>
+                <a class="delete" href="javascript:;" @click="deleteFunc(model)"
+                  >删除</a
+                >
+                <i class="line"></i>
+                <a
+                  class="addr"
+                  href="javascript:;"
+                  @click="addOrganizationFunc(model)"
+                  >添加下级组织</a
+                >
+              </td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+    </table>
+
+    <!-- 暂无数据 -->
+
+    <div v-show="model.isExpand" class="other-node" :class="otherNodeClass">
+      <tree-item
+        v-for="(m, i) in model.childrens"
+        :key="String('child_node' + i)"
+        :num="i"
+        :root="1"
+        @actionFunc="actionFunc"
+        @deleteFunc="deleteFunc"
+        @addOrganization="addOrganizationFunc"
+        @handlerExpand="handlerExpand"
+        :nodes.sync="model.childrens.length"
+        :trees.sync="trees"
+        :model.sync="m"
+      >
+      </tree-item>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "treeItem",
+  props: ["model", "num", "nodes", "root", "trees"],
+  data() {
+    return {
+      parentNodeModel: null,
+    };
+  },
+  computed: {
+    colSpan() {
+      return this.root === 0 ? "" : 6;
+    },
+    tdClass() {
+      return this.root === 0 ? "td-border" : "not-border";
+    },
+    levelClass() {
+      return this.model ? "leve-" + this.model.level : "";
+    },
+    childNodeClass() {
+      return this.root === 0 ? "" : "child-node";
+    },
+    otherNodeClass() {
+      return this.model ? "other-node-" + this.model.level : "";
+    },
+  },
+  watch: {
+    // 'model': {
+    // 	handler() {
+    // 		console.log('对象变化', this.model.isExpand)
+    // 	},
+    // 	deep: true
+    // }
+  },
+  methods: {
+    getParentNode(m) {
+      // 查找点击的子节点
+      var recurFunc = (data, list) => {
+        data.forEach((l) => {
+          if (l.id === m.id) this.parentNodeModel = list;
+          if (l.childrens) {
+            recurFunc(l.childrens, l);
+          }
+        });
+      };
+      recurFunc(this.trees, this.trees);
+    },
+
+    handlerExpand(m) {
+      // console.log(m)
+      // console.log('-------------------')
+      this.$emit("handlerExpand", m);
+    },
+
+    // 删除
+    deleteFunc(m) {
+      this.$emit("deleteFunc", m);
+    },
+
+    // 编辑
+    actionFunc(m) {
+      this.$emit("actionFunc", m);
+    },
+
+    // 添加下级组织
+    addOrganizationFunc(m) {
+      this.$emit("addOrganization", m);
+    },
+  },
+  filters: {
+    formatDate: function (date) {
+      // 后期自己格式化
+      return date; //Utility.formatDate(date, 'yyyy/MM/dd')
+    },
+  },
+};
+</script>

minggao/src/mock/mock.js

@@ -0,0 +1,76 @@
+const Mock = require("mockjs");
+// let data = Mock.mock({
+//     "data|100": [ //生成100条数据 数组
+//         {
+//             "shopId|+1": 1,//生成商品id，自增1
+//             "shopMsg": "@ctitle(10)", //生成商品信息，长度为10个汉字
+//             "shopName": "@cname",//生成商品名 ， 都是中国人的名字
+//             "shopTel": /^1(5|3|7|8)[0-9]{9}$/,//生成随机电话号
+//             "shopAddress": "@county(true)", //随机生成地址
+//             "shopStar|1-5": "★", //随机生成1-5个星星
+//             "salesVolume|30-1000": 30, //随机生成商品价格 在30-1000之间
+//             "shopLogo": "@Image('100x40','#c33', '#ffffff','小北鼻')", //生成随机图片，大小/背景色/字体颜色/文字信息
+//             "food|7": [ //每个商品中再随机生成七个food
+//                 {
+//                     "foodName": "@cname", //food的名字
+//                     "foodPic": "@Image('100x40','#c33', '#ffffff','小可爱')",//生成随机图片，大小/背景色/字体颜色/文字信息
+//                     "foodPrice|1-100": 20,//生成1-100的随机数
+//                     "aname|14": [
+//                         {
+//                             "aname": "@cname",
+//                             "aprice|30-60": 20
+//                         }
+//                     ]
+//                 }
+//             ]
+//         }
+//     ]
+// })
+
+// -----------------系统设置 // 隶属海关管理 -----------------------
+let pagedata = Mock.mock({
+    "data|10": [
+        {
+            "Id|+1": 1, //ID
+            ObjectName: "@ctitle(6)", // 组织名称
+            CreateTime: "@date @time", // 创建时间
+            Experience: "@date @time", // 最后更新时间
+            children: [
+                {
+                    "Id|+1": 2, //ID
+                    ObjectName: "@ctitle(6)", // 组织名称
+                    CreateTime: "@date @time", // 创建时间
+                    Experience: "@date @time", // 最后更新时间
+                    children: [
+                        {
+                            "Id|+1": 3, //ID
+                            ObjectName: "@ctitle(6)", // 组织名称
+                            CreateTime: "@date @time", // 创建时间
+                            Experience: "@date @time", // 最后更新时间
+                            children: [
+                                {
+                                    "Id|+1": 4, //ID
+                                    ObjectName: "@ctitle(6)", // 组织名称
+                                    CreateTime: "@date @time", // 创建时间
+                                    Experience: "@date @time", // 最后更新时间
+                                    children: [
+                                        {
+                                            "Id|+1": 3, //ID
+                                            ObjectName: "@ctitle(6)", // 组织名称
+                                            CreateTime: "@date @time", // 创建时间
+                                            Experience: "@date @time", // 最后更新时间
+                                        }
+                                    ]
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+})
+Mock.mock(/qxz_page/, 'post', () => { //三个参数。第一个路径，第二个请求方式post/get，第三个回调，返回值
+    return pagedata
+})
+

minggao/src/page/systemmanger/customsManger.vue

@@ -0,0 +1,394 @@
+<!--  -->
+<template>
+  <div class="customsManger_box">
+    <el-card>
+      <!-- 筛选 -->
+      <el-row>
+        <el-col>
+          <!-- 组织搜索 -->
+          <div class="search_box">
+            <el-input
+              size="small"
+              placeholder="请输入组织名称"
+              v-model="input"
+              clearable
+            >
+            </el-input>
+            <div class="btn_box">
+              <el-button type="primary" size="small">搜索</el-button>
+              <el-button type="primary" size="small" @click="addrUser"
+                >添加用户</el-button
+              >
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 列表 -->
+      <tree-table
+        style="height: 680px"
+        ref="recTree"
+        :list.sync="treeDataSource"
+        @actionFunc="actionFunc"
+        @deleteFunc="deleteFunc"
+        @addOrganization="addOrganization"
+        @handlerExpand="handlerExpand"
+        @orderByFunc="orderByFunc"
+      ></tree-table>
+
+      <!-- 分页 -->
+      <el-pagination
+        :page-size="10"
+        @current-change="newPage"
+        :current-page="page"
+        v-if="treeDataSource.length > 0"
+        background
+        layout="prev, pager, next, jumper"
+        :total="tableSum"
+      >
+      </el-pagination>
+    </el-card>
+
+    <!-- 添加用户 -->
+    <el-dialog
+      :title="tltData"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :visible.sync="addrUserVisible"
+      width="25%"
+    >
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item label="上级: ">
+          <el-select
+            size="mini"
+            v-model="form.higher"
+            placeholder="请选择活动区域"
+            :disabled="true"
+          >
+            <el-option
+              v-for="(item, index) in higherList"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="组织名称: ">
+          <el-input
+            style="width: 80%"
+            size="mini"
+            v-model="form.name"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button size="small" type="primary" @click="onSubmit"
+            >确定</el-button
+          >
+          <el-button size="small" @click="addrUserVisible = false"
+            >取消</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import treeTable from "@/components/tree-table/tree_table.vue";
+import "../../mock/mock";
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {
+    treeTable,
+  },
+  data() {
+    //这里存放数据
+    return {
+      input: "", // 组织搜索
+      treeDataSource: [],
+      tableSum: 0, // 表格列表总数
+      page: 1, // 当前页数
+
+      // 添加隶属海关弹框
+      addrUserVisible: false,
+      higherList: [
+        {
+          value: "",
+          label: "",
+        },
+      ],
+      form: {
+        name: "",
+        higher: "",
+      },
+      tltData: "添加隶属海关",
+      userData: {}, // 点击编辑时获取到的当前数据
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    // 添加隶属海关弹框
+    addrUserVisible(val) {
+      if (val == false) {
+        this.form.higher = ""; // 清除上级值
+        this.form.name = ""; // 清除组织名称值
+      }
+    },
+  },
+  //方法集合
+  methods: {
+    // 树形表格
+    orderByFunc(val) {
+      alert("排序");
+      alert(val);
+    },
+    // 编辑
+    actionFunc(m) {
+      console.log(m);
+      this.userData = m
+      this.tltData = "编辑隶属海关"; //改变弹框标题
+      if (m.level == 1) {
+        this.$set(this.higherList, 0, {
+          value: "",
+          label: "根类别",
+        });
+        this.form.higher = "";
+      } else {
+        this.$set(this.higherList, 0, {
+          value: m.parent_id,
+          label: m.parent_name,
+        });
+        this.form.higher = m.parent_name;
+      }
+      this.form.name = m.org_name;
+
+      // console.log(this.higherList);
+      this.addrUserVisible = true; //打开弹框
+    },
+    // 删除
+    deleteFunc(m) {
+      // console.log(m);
+      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$axios({
+            method: "POST",
+            url: "/api/api_gateway?method=sysmenage.usermanager.org_delete",
+            data: this.qs.stringify({
+              org_id: m.id,
+            }),
+          })
+            .then((res) => {
+              if (res.data.data == true) {
+                this.$message({
+                  message: '删除成功了',
+                  type: 'success',
+                  duration: 1500
+                });
+                this.tabListData()
+              } else {
+                this.$message({
+                  message: '删除失败',
+                  type: 'error',
+                  duration: 1500
+                });
+              }
+              // console.log(res);
+            })
+            .catch((err) => {
+              // console.log(err);
+            });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+
+      // this.$axios({
+      //   method: 'POST',
+      //   url: '/api/api_gateway?method=sysmenage.usermanager.org_add',
+      //   data: this.qs.stringify({
+      //     org_id: m.id
+      //   })
+      // }).then((res) => {
+      //   console.log(res)
+      // }).catch((err) => {
+      //   console.log(err)
+      // })
+    },
+    // 添加下级组织
+    addOrganization(m) {
+      console.log(m)
+      this.tltData = "添加隶属海关"; //改变弹框标题
+      this.$set(this.higherList, 0, {
+        value: m.id,
+        label: m.org_name,
+      });
+      this.form.higher = m.org_name;
+      this.addrUserVisible = true; //打开弹框
+    },
+
+    handlerExpand(m) {
+      // console.log("展开/收缩");
+      // console.log(m);
+      m.isExpand = !m.isExpand;
+    },
+
+    // 请求下页数据
+    newPage(page) {
+      // console.log(page);
+      this.page = page;
+      this.tabListData();
+    },
+
+    // 添加用户 -- 一级
+    addrUser() {
+      this.higherList = [
+        {
+          label: "根类别",
+          value: "",
+        },
+      ];
+      this.addrUserVisible = true;
+    },
+
+    // 添加用户 || 编辑用户 -- 确定
+    onSubmit() {
+      var that = this
+      if (this.form.name == "") {
+        this.$message({
+          message: "请填写组织名称!",
+          type: "warning",
+          duration: 1500,
+        });
+      } else if (this.form.name.split(" ").join("").length == 0) {
+        this.$message({
+          message: "不能填写空格！",
+          type: "warning",
+          duration: 1500,
+        });
+      } else {
+        // 请求添加接口
+        if (this.tltData == "编辑隶属海关") {
+          // 编辑
+          var url = "/api/api_gateway?method=sysmenage.usermanager.org_modify";
+          var postData = this.qs.stringify({
+            org_name: this.form.name, //组织名称
+            org_id: this.userData.id, // 组织id
+          });
+        } else if (this.tltData == "添加隶属海关") {
+          // 添加
+          var url = "/api/api_gateway?method=sysmenage.usermanager.org_add";
+          var postData = this.qs.stringify({
+            org_name: that.form.name, //组织名称
+            parent_org_id: that.higherList[0].value, // 上级组织id，没有上级组织表示创建的组织是顶级组织
+          });
+        }
+ 
+        this.$axios({
+          method: "POST",
+          url,
+          data: postData,
+        })
+          .then((res) => {
+            console.log(res);
+            if (res.data.data == true) {
+              this.$message({
+                message: "成功!",
+                type: "success",
+                duration: 1500,
+              });
+              this.addrUserVisible = false
+              this.tabListData()
+            } else {
+              this.$message({
+                message: "失败!",
+                type: "error",
+                duration: 1500,
+              });
+            }
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+      }
+    },
+
+    // 请求表格列表
+    tabListData() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=sysmenage.usermanager.org_list",
+        data: this.qs.stringify({
+          page: this.page,
+          page_item: "9",
+          org_name: this.input,
+        }),
+      })
+        .then((res) => {
+          // console.log(res.data.data);
+          if (res.data.data.total_item !== 0) {
+            this.treeDataSource = res.data.data.page_list;
+            this.tableSum = res.data.data.total_item;
+          }
+        })
+        .catch((err) => {
+          // console.log(err);
+        });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.tabListData(); // 请求表格列表
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.customsManger_box {
+  /deep/.el-card__body {
+    overflow: hidden;
+    overflow-y: auto;
+  }
+
+  // 表单
+  /deep/.el-form {
+    .el-form-item {
+      .el-form-item__content {
+        // 上级
+        .el-select {
+          width: 80%;
+        }
+      }
+    }
+  }
+}
+
+// 组织搜索
+.search_box {
+  display: flex;
+  /deep/.el-input {
+    width: 300px;
+  }
+  .btn_box {
+    margin: 0 0 0 15px;
+  }
+}
+</style>

minggao/src/page/systemmanger/motif.vue

@@ -0,0 +1,38 @@
+<!--  -->
+<template>
+  <div class="">主题管理</div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    //这里存放数据
+    return {};
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+//@import url(); 引入公共css类
+</style>

minggao/src/page/systemmanger/role.vue

@@ -0,0 +1,498 @@
+<!--  -->
+<template>
+  <div class="role_box">
+    <el-card>
+      <!-- 筛选 -->
+      <el-row>
+        <el-col>
+          <!-- 组织搜索 -->
+          <div class="search_box">
+            <el-input
+              size="small"
+              placeholder="请输入角色名称"
+              v-model="input"
+              @change="searchData"
+              clearable
+            >
+            </el-input>
+            <div class="btn_box">
+              <el-button type="primary" size="small" @click="searchData"
+                >搜索</el-button
+              >
+              <el-button type="primary" size="small" @click="addrRole"
+                >添加角色</el-button
+              >
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 列表 -->
+      <el-table :data="tableData" stripe style="width: 100%">
+        <el-table-column prop="ind" label="序号" width="280"></el-table-column>
+        <el-table-column prop="role_name" label="角色名称" width="380">
+        </el-table-column>
+        <el-table-column prop="role_message" label="角色描述" width="580">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <a class="reset" href="javascript:;" @click="actionFunc(scope.row)"
+              >编辑</a
+            >
+            <i class="line"></i>
+            <a class="delete" href="javascript:;" @click="deleteFunc(scope.row)"
+              >删除</a
+            >
+            <i class="line"></i>
+            <a class="addr" href="javascript:;" @click="limitsData(scope.row)"
+              >分配权限</a
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <el-pagination
+        v-if="tableData.length !== 0"
+        @current-change="changeList"
+        background
+        layout="prev, pager, next, jumper"
+        :current-page="page"
+        :total="pagesum"
+      >
+      </el-pagination>
+    </el-card>
+
+    <!-- 添加用户 - 编辑用户 -->
+    <el-dialog
+      :title="tltData"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :visible.sync="addrUserVisible"
+      width="45%"
+    >
+      <el-form ref="form" :rules="rules" :model="form" label-width="90px">
+        <el-form-item label="角色名称: " prop="name">
+          <el-input
+            style="width: 80%"
+            size="mini"
+            v-model="form.name"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item label="角色描述: " prop="describe">
+          <el-input
+            style="width: 80%"
+            size="mini"
+            type="textarea"
+            resize="none"
+            v-model="form.describe"
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button size="small" type="primary" @click="submitForm"
+            >确定</el-button
+          >
+          <el-button size="small" @click="addrUserVisible = false"
+            >取消</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+
+    <!-- 分配权限 -->
+    <el-dialog
+      title="分配权限"
+      :visible.sync="setRightDialogVisible"
+      width="50%"
+      @close="setRightDialogClosed"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <el-tree
+        :data="rightsList"
+        :props="treeProps"
+        ref="treeRef"
+        show-checkbox
+        node-key="pur_id"
+        default-expand-all
+        :default-checked-keys="defKeys"
+      ></el-tree>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="setRightDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="allotRights">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      input: "",
+      tableData: [],
+      page: 1,
+      pagesum: 0,
+
+      //   添加用户 - 编辑用户
+      tltData: "",
+      addrUserVisible: false,
+      form: {
+        name: "",
+        describe: "",
+      },
+      rules: {
+        name: [
+          { required: true, message: "请输入角色名称", trigger: "blur" },
+          //   { min: 3, max: 5, message: "长度在 1 到 15 个字符", trigger: "blur" },
+        ],
+        describe: [
+          { required: true, message: "请输入角色描述", trigger: "blur" },
+          //   { min: 3, max: 5, message: "长度在 1 到 30 个字符", trigger: "blur" },
+        ],
+      },
+
+      // 分配权限
+      setRightDialogVisible: false,
+      rightsList: [],
+      //  默认选中节点ID值
+      defKeys: [],
+      describeData: {}, // 点击表格操作时获取到的当前数据
+      //  树形控件的属性绑定对象
+      treeProps: {
+        label: "purview_name",
+        children: "children",
+      },
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    // 添加、编辑角色弹框
+    addrUserVisible(val) {
+      if (val == false) {
+        this.form.name = "";
+        this.form.describe = "";
+      }
+    },
+  },
+  //方法集合
+  methods: {
+    tabListData() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=sysmenage.usermanager.role_list",
+        data: this.qs.stringify({
+          page: this.page,
+          page_item: "10",
+          role_name: this.input,
+        }),
+      })
+        .then((res) => {
+          if (res.data.data.total_item !== 0) {
+            var data = res.data.data.page_list;
+            this.pagesum = res.data.data.total_item;
+            var list = [];
+            data.forEach((item, index) => {
+              item.ind = index + 1;
+              list.push(item);
+            });
+            this.tableData = list;
+          } else {
+            this.tableData = [];
+            this.pagesum = 0;
+          }
+        })
+        .catch((err) => {
+          // console.log(err)
+        });
+    },
+
+    // 搜索
+    searchData() {
+      this.tabListData();
+    },
+
+    // 下一页
+    changeList(num) {
+      this.page = num;
+      this.tabListData();
+    },
+
+    // 添加角色
+    addrRole() {
+      this.tltData = "添加角色";
+      this.addrUserVisible = true;
+    },
+    // 编辑角色
+    actionFunc(data) {
+      //   console.log(data);
+      this.describeData = data;
+      this.tltData = "编辑角色";
+      this.form.name = data.role_name; // 角色名称
+      this.form.describe = data.role_message; // 角色描述
+      this.addrUserVisible = true;
+    },
+    // 添加、编辑角色确定
+    submitForm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.tltData == "添加角色") {
+            // 添加
+            this.addrRoleAxios(); // 添加
+          } else if (this.tltData == "编辑角色") {
+            // 编辑
+            this.editRoleAxios(); // 编辑
+          }
+        } else {
+          //   console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    // 添加 - 确定
+    addrRoleAxios() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=sysmenage.usermanager.role_add",
+        data: this.qs.stringify({
+          role_name: this.form.name,
+          role_message: this.form.describe,
+        }),
+      })
+        .then((res) => {
+          if (res.data.data == true) {
+            this.$message({
+              message: "成功!",
+              type: "success",
+              duration: 1500,
+            });
+            this.addrUserVisible = false;
+            this.tabListData();
+          } else {
+            this.$message({
+              message: "失败!",
+              type: "error",
+              duration: 1500,
+            });
+          }
+          //   console.log(res);
+          this.addrUserVisible = false;
+        })
+        .catch((err) => {
+          //   console.log(err);
+        });
+    },
+    // 编辑 - 确定
+    editRoleAxios() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=sysmenage.usermanager.role_modify",
+        data: this.qs.stringify({
+          role_id: this.describeData.id,
+          role_name: this.form.name,
+          role_message: this.form.describe,
+        }),
+      })
+        .then((res) => {
+          if (res.data.data == true) {
+            this.$message({
+              message: "成功!",
+              type: "success",
+              duration: 1500,
+            });
+            this.addrUserVisible = false;
+            this.tabListData();
+          } else {
+            this.$message({
+              message: "失败!",
+              type: "error",
+              duration: 1500,
+            });
+          }
+          //   console.log(res);
+          this.addrUserVisible = false;
+        })
+        .catch((err) => {
+          //   console.log(err);
+        });
+    },
+
+    // 分配权限
+    limitsData(val) {
+      this.describeData = val;
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=sysmenage.usermanager.user_info",
+      })
+        .then((res) => {
+          if (res.data.message == "") {
+            var data = res.data.data.children;
+            this.rightsList = data;
+            this.limitsList(); //获取当前角色的权限
+          } else {
+            this.$message.error("获取权限列表失败!");
+          }
+        })
+        .catch((err) => {
+          // console.log(err)
+        });
+    },
+    // 当前角色权限
+    limitsList() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=sysmenage.usermanager.role_info",
+        data: this.qs.stringify({
+          role_id: this.describeData.id, //角色ID
+        }),
+      })
+        .then((res) => {
+          if (res.data.data) {
+            this.setRightDialogVisible = true;
+            var list = this.tableData;
+            for (var i = 0; i < list.length; i++) {
+              if (list[i].id == this.describeData.id) {
+                list[i]["children"] = res.data.data;
+                this.defKeys = [];
+                this.getLeafkeys(list[i], this.defKeys);
+              }
+            }
+          }
+        //   this.tabListData = list;
+          this.tableData = list;
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+
+    getLeafkeys(node, arr) {
+      if (!node.children) {
+        return arr.push(node.pur_id);
+      }
+      node.children.forEach((item) => this.getLeafkeys(item, arr));
+    },
+    setRightDialogClosed() {
+      this.rightsList = [];
+    },
+    // 确定 - 分配权限
+    allotRights() {
+        var that = this
+      // 获得当前选中的Id
+      const keys = [
+        ...this.$refs.treeRef.getCheckedKeys(),
+        ...this.$refs.treeRef.getHalfCheckedKeys(),
+      ];
+      const idStr = keys.join(",");
+      console.log(idStr);
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=sysmenage.usermanager.role_perm",
+        data: this.qs.stringify({
+          pur_id: idStr, // 权限id
+          role_id: this.describeData.id, // 角色id
+        }),
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.data.message == "") {
+            this.$message.success("分配权限成功!");
+            that.setRightDialogVisible = false;
+            that.tabListData();
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+
+    // 删除
+    deleteFunc(data) {
+      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$axios({
+            method: "POST",
+            url: "/api/api_gateway?method=sysmenage.usermanager.role_delete",
+            data: this.qs.stringify({
+              role_id: data.id,
+            }),
+          })
+            .then((res) => {
+              if (res.data.message == "") {
+                this.$message({
+                  type: "success",
+                  message: "删除成功!",
+                  duration: 1500,
+                });
+              }
+              this.tabListData();
+            })
+            .catch((err) => {
+              console.log(err);
+            });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.tabListData(); // 表格数据
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.role_box {
+  .search_box {
+    display: flex;
+    /deep/.el-input {
+      width: 300px;
+    }
+    .btn_box {
+      margin: 0 0 0 15px;
+    }
+  }
+  a {
+    text-decoration: none;
+  }
+  .reset {
+    color: #1890ff;
+  }
+  .delete {
+    color: #f56c6c;
+  }
+  .addr {
+    color: #67c23a;
+  }
+  .line {
+    display: inline-block;
+    width: 1px;
+    background: rgba(0, 0, 0, 0.09);
+    margin: 0 11px;
+    height: 14px;
+  }
+}
+</style>

minggao/src/router/index.js

@@ -7,6 +7,10 @@ import Login from '@/page/login/login'
 
 // *****************首页**********************
 import Index from '@/page/home/index'
+//---------------------------------------系统管理----------------------------------------------------
+const customsManger = () => import('@/Page/systemmanger/customsManger') 
+const role = () => import('@/Page/systemmanger/role')
+const motif = () => import('@/Page/systemmanger/motif')
 
 // *****************测报系统**********************
 import cbd from '@/page/forecasting/cbd/Cbd'//首页
@@ -40,7 +44,30 @@ export default new Router({
       path: '/Index',
       name: 'Index',
       component: Index,
-      children:[
+      children: [
+        //------------------系统管理--------------------------
+        {
+          path: 'customsManger',
+          component: customsManger,
+          meta: {
+            title: '隶属海关管理'
+          }
+        },
+        {
+          path: 'role',
+          component: role,
+          meta: {
+            title: '角色管理'
+          }
+        },
+        {
+          path: 'motif',
+          component: motif,
+          meta: {
+            title: '主题管理'
+          }
+        },
+        //------------------系统管理--------------------------
         {
           path: 'cbd',
           component: cbd