2022/1/19 系统管理隶属海关管理

minggao/config/index.js

@@ -29,7 +29,7 @@ module.exports = {
     },
 
     // Various Dev Server settings
-    host: '192.168.1.29', // can be overwritten by process.env.HOST
+    host: '192.168.1.4', // can be overwritten by process.env.HOST
     port: 8888, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

minggao/package.json

@@ -34,6 +34,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,164 @@
+<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.children.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.ObjectName">{{
+                      model.ObjectName
+                    }}</span>
+                  </a>
+                </div>
+              </td>
+              <td class="td3">{{ model.CreateTime | formatDate }}</td>
+              <td class="td4">
+                <span :title="model.Experience" class="ellipsis">{{
+                  model.Experience
+                }}</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="user" href="javascript:;" @click="deleteFunc(model)"
+                  >组织账号</a
+                >
+                <i class="line"></i>
+                <a class="addr" href="javascript:;" @click="addOrganization(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.children"
+        :key="String('child_node' + i)"
+        :num="i"
+        :root="1"
+        @actionFunc="actionFunc"
+        @deleteFunc="deleteFunc"
+        @handlerExpand="handlerExpand"
+        :nodes.sync="model.children.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.children) {
+            recurFunc(l.children, l);
+          }
+        });
+      };
+      recurFunc(this.trees, this.trees);
+    },
+    
+    handlerExpand(m) {
+      this.$emit("handlerExpand", m);
+    },
+
+    // 删除
+    deleteFunc(m) {
+      this.$emit("deleteFunc", m);
+      // this.getParentNode(m)
+      // console.log(this.parentNodeModel)
+      // if (this.parentNodeModel.hasOwnProperty('children')) {
+      // 	console.log('父级是跟节点', this.parentNodeModel)
+      // 	this.parentNodeModel.children.splice(this.parentNodeModel.children.indexOf(m), 1)
+      // } else if (this.parentNodeModel instanceof Array) {
+      // 	console.log('跟节点', this.parentNodeModel)
+      // 	this.parentNodeModel.splice(this.parentNodeModel.indexOf(m), 1)
+      // }
+    },
+
+    // 编辑
+    actionFunc(m) {
+      this.$emit("actionFunc", m);
+    },
+
+    // 添加下级组织
+    addOrganization(m) {
+      alert('添加下级组织')
+    },
+
+    // 组织账号
+    userOrganization(m) {
+      alert('组织账号')
+    },
+  },
+  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,131 @@
+<!--  -->
+<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">添加用户</el-button>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 列表 -->
+      <tree-table
+        style="height: 680px"
+        ref="recTree"
+        :list.sync="treeDataSource"
+        @actionFunc="actionFunc"
+        @deleteFunc="deleteFunc"
+        @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" :total="tableSum">
+      </el-pagination>
+    </el-card>
+  </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: 100, // 表格列表总数
+      page: 1, // 当前页数
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 树形表格
+    orderByFunc(val) {
+      alert("排序");
+      alert(val);
+    },
+    actionFunc(m) {
+      alert("编辑");
+    },
+    deleteFunc(m) {
+      alert("删除");
+    },
+    handlerExpand(m) {
+      console.log("展开/收缩");
+      m.isExpand = !m.isExpand;
+    },
+
+    // 请求下页数据
+    newPage(page) {
+        console.log(page)
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.$axios({
+      method: "post",
+      url: "/qxz_page",
+      data: "",
+    })
+      .then((res) => {
+        console.log(res);
+        this.treeDataSource = res.data.data;
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  },
+  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;
+  }
+}
+
+// 组织搜索
+.search_box {
+  display: flex;
+  /deep/.el-input {
+    width: 300px;
+  }
+  .btn_box {
+    margin: 0 0 0 15px;
+  }
+}
+</style>

minggao/src/router/index.js

@@ -6,6 +6,8 @@ import HelloWorld from '@/components/HelloWorld'
 import Login from '@/page/login/login'
 // *****************首页**********************
 import Index from '@/page/home/index'
+//---------------------------------------系统管理----------------------------------------------------
+const customsManger = () => import('@/Page/systemmanger/customsManger')
 Vue.use(Router)
 
 export default new Router({
@@ -23,7 +25,17 @@ export default new Router({
     {
       path: '/Index',
       name: 'Index',
-      component: Index
+      component: Index,
+      children: [
+        //------------------系统管理--------------------------
+        {
+          path: 'customsManger',
+          component: customsManger,
+          meta: {
+            title: '隶属海关管理'
+          }
+        },
+      ],
     },
   ]
 })