搜索组件 + 表单组件

README.md

@@ -4,4 +4,6 @@
 
 > 前端开发：唐连锋
 
-> 架构开始搭建时间：2021-5-12
+> 架构开始搭建时间：2021-5-12
+
+> 组件参考文本 components.md

src/components/component.md

@@ -0,0 +1,155 @@
+# 组件传入数据参考表
+
+# formList
+  :formList="搜索菜单"
+  @search="搜索事件"
+  @init="重置事件"
+# table-list 
+  :tableSet="表头数据"
+  :tableData="表单数据"
+  :navText="头部信息"
+  @emitData="接收多选数组事件"
+# formList: [
+        {
+          label: "菜单名称",
+          prop: "menuName",
+          placeholder: "输入菜单名称",
+        },
+        {
+          label: "状态",
+          prop: "status",
+          scope: "select",
+          placeholder: "选择菜单状态",
+          options: [
+            {
+              label: "开启",
+              value: 1,
+            },
+            {
+              label: "关闭",
+              value: 0,
+            },
+          ],
+        },
+        {
+          label: "所在区域",
+          prop: "address",
+          scope: "cascader",
+          placeholder: "选择所在区域",
+          options: [
+            {
+              label: "广东",
+              value: "GuangDong",
+              children: [
+                {
+                  label: "广州",
+                  value: "GuangZhou",
+                  children: [
+                    {
+                      label: "天河区",
+                      value: "TianHeQu",
+                    },
+                  ],
+                },
+                {
+                  label: "深圳",
+                  value: "ShenZhen",
+                },
+              ],
+            },
+            {
+              label: "广西",
+              value: "GuangXi",
+              children: [
+                {
+                  label: "南宁",
+                  value: "NanNing",
+                },
+              ],
+            },
+            {
+              label: "上海",
+              value: "ShangHai",
+            },
+          ],
+        },
+        {
+          label: "日期时间",
+          prop: "dateTime",
+          scope: "datePicker",
+        },
+],
+# tableSet: [
+        {
+          label: "姓名",
+          prop: "name",
+          width: "100px",
+          hidden: true,
+        },
+        {
+          label: "班级",
+          prop: "class",
+          width: "100px",
+          hidden: false,
+        },
+        {
+          label: "语文",
+          prop: "yuwen",
+          width: "80px",
+          scope: "sortable",
+          hidden: false,
+        },
+        {
+          label: "数学",
+          prop: "shuxue",
+          width: "100px",
+          hidden: false,
+        },
+        {
+          label: "英语",
+          prop: "yingyu",
+          width: "80px",
+          hidden: false,
+        },
+        {
+          label: "物理",
+          prop: "wl",
+          width: "100px",
+          hidden: false,
+        },
+        {
+          label: "化学",
+          prop: "hx",
+          width: "80px",
+          hidden: false,
+        },
+      ],
+#  tableData: [
+        {
+          name: "唐某某",
+          class: "高一16班",
+          yuwen: 95,
+          shuxue: 88,
+          yingyu: 92,
+          wl: 79,
+          hx: 98,
+        },
+        {
+          name: "高某某",
+          class: "高一16班",
+          yuwen: 100,
+          shuxue: 94,
+          yingyu: 83,
+          wl: 82,
+          hx: 79,
+        },
+        {
+          name: "刘某某",
+          class: "高一16班",
+          yuwen: 79,
+          shuxue: 99,
+          yingyu: 100,
+          wl: 74,
+          hx: 69,
+        },
+      ],

src/components/searchBox.vue

@@ -0,0 +1,125 @@
+<template>
+  <div id="searchBox">
+    <div class="inputListBox">
+      <el-form :inline="true" :model="formData" class="demo-form-inline">
+        <el-form-item
+          v-for="(item, index) in formList"
+          :key="index"
+          :label="item.label"
+        >
+          <el-select
+            v-if="item.scope === 'select'"
+            v-model="formData[item.prop]"
+            :placeholder="item.placeholder"
+            :size="size"
+          >
+            <el-option
+              v-for="(items, indexs) in item.options"
+              :key="indexs"
+              :label="items.label"
+              :value="items.value"
+            ></el-option>
+          </el-select>
+          <el-cascader
+            v-else-if="item.scope === 'cascader'"
+            v-model="formData[item.prop]"
+            :options="item.options"
+            @change="handleChange"
+            :size="size"
+          ></el-cascader>
+          <el-date-picker
+            v-else-if="item.scope === 'datePicker'"
+            v-model="formData[item.prop]"
+            type="datetimerange"
+            :picker-options="pickerOptions"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            align="right"
+            :size="size"
+          >
+          </el-date-picker>
+          <el-input
+            v-else
+            v-model="formData[item.prop]"
+            :placeholder="item.placeholder"
+            :size="size"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-form :inline="true" class="btnListBox">
+      <el-form-item>
+        <el-button :size="size" type="primary" @click="search">搜索</el-button>
+        <el-button :size="size" @click="init">重置</el-button>
+      </el-form-item></el-form
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["formList"], //参考文档 component.md
+  data() {
+    return {
+      size: "medium", //输入框尺寸类型
+      formData: {}, //表单数据收集
+      pickerOptions: {
+        //日期选择器近期功能
+        shortcuts: [
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三个月",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    //搜索
+    search() {
+      this.$emit("search", this.formData);
+    },
+    //重置
+    init() {
+      this.formData = {};
+      this.$emit("init");
+    },
+    handleChange(value) {
+      console.log(value);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#searchBox {
+  display: flex;
+  .inputListBox {
+    flex: 1;
+  }
+}
+</style>

src/components/tableList.vue

@@ -0,0 +1,117 @@
+<template>
+  <div id="tableList">
+    <div class="headerNavTool">
+      <div class="leftIndexText">
+        {{navText.title}} <strong>{{navText.index}}</strong> 项
+      </div>
+      <div class="rightBtnBox">
+        <el-button size="medium" type="primary" @click="addClick">新增</el-button>
+        <el-button size="medium" type="warning" @click="backFather"
+          >未定义</el-button
+        >
+        <el-popover placement="bottom" trigger="click" title="勾选隐藏">
+          <div class="popoverDis">
+            <!-- <el-checkbox-group v-model="checkList"> -->
+            <el-checkbox
+              v-for="(item, index) in tableSet"
+              :key="index"
+              :checked="item.hidden"
+              @change="getNewStatus(item, $event)"
+              >{{ item.label }}</el-checkbox
+            >
+            <!-- </el-checkbox-group> -->
+          </div>
+          <el-button style="margin-left: 10px" size="medium" slot="reference"
+            >自定义列</el-button
+          >
+        </el-popover>
+      </div>
+    </div>
+    <el-table
+      :data="tableData"
+      stripe
+      style="width: 100%"
+      @select-all="selectAll"
+      @select="select"
+    >
+      <el-table-column align="center" type="selection" width="55">
+      </el-table-column>
+      <el-table-column type="index" label="序号" align="center">
+      </el-table-column>
+      <template v-for="(item, index) in tableSet">
+        <el-table-column
+          v-if="!item.hidden"
+          :width="item.width"
+          :key="index"
+          :label="item.label"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <span>{{ scope.row[item.prop] }}</span>
+          </template>
+        </el-table-column>
+      </template>
+      <el-table-column label="操作" align="center" fixed="right" width="120px">
+        <template slot-scope="scope">
+          <el-button type="text" @click="edit(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["tableSet", "tableData","navText"],
+  data() {
+    return {
+      allCheckData: [],
+    };
+  },
+  methods: {
+    //新增按钮
+    addClick(){
+      this.$emit('addClick')
+    },
+    //将选中值传回调用组件
+    backFather() {
+      this.$emit("emitData", this.allCheckData);
+    },
+    //自定义列 选中触发
+    getNewStatus(options, e) {
+      options.hidden = e;
+    },
+    edit() {},
+    selectAll(value) {
+      this.allCheckData = value;
+    },
+    select(value) {
+      this.allCheckData = value;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#tableList {
+  padding: 0px 16px 16px;
+  border-radius: 8px;
+  box-shadow: 0px 0px 9px 1px rgba(28, 41, 90, 0.1);
+  background: #ffffff;
+  .headerNavTool {
+    height: 72px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .rightBtnBox {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+.popoverDis {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+</style>

src/router/RoutingPath.js

@@ -63,6 +63,8 @@ const path = {
     accountManagement: () => import("@/view/systemSettings/accountManagement/index.vue"),
     //操作日志
     operationLog: () => import("@/view/systemSettings/operationLog/index.vue"),
+    //菜单管理
+    menu: () => import("@/view/systemSettings/menu/index.vue"),
 
     // -----------------------------《报错》
     //404

src/store/index.js

@@ -135,8 +135,32 @@ const store = new Vuex.Store({
         GenerateRoutes({ commit, state }) {
             return new Promise((resolve, reject) => {
                 // 调用接口 获取菜单列表
+                api.getRouters().then(res => {
+                    
+                }).catch(err => {
+                    console.log('路由获取失败');
+                    console.log(err);
+                })
                 // 模拟数据👇
                 let newRouters = [
+                    {
+                        name: "systemSettings",
+                        path: "/systemSettings",
+                        hidden: false,
+                        redirect: "orderList",
+                        component: path.layout,
+                        alwaysShow: true,
+                        meta: { title: "系统管理", icon: "system", noCache: true },
+                        children: [
+                            {
+                                name: "menu",
+                                path: "/menu",
+                                hidden: false,
+                                component: path.menu,
+                                meta: { title: "菜单管理", icon: "user", noCache: false },
+                            }
+                        ], 
+                    },
                     {
                         name: "orderManagement",
                         path: "/orderManagement",

src/view/systemSettings/menu/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <div id="menu">
+    <search-box :formList="formList" @search="search" @init="init"></search-box>
+    <table-list
+      :tableSet="tableSet"
+      :tableData="tableData"
+      :navText="navText"
+      @addClick="addClick"
+      @emitData="emitData"
+    ></table-list>
+    <div class="tableBox">表单栏</div>
+  </div>
+</template>
+
+<script>
+import searchBox from "@/components/searchBox";
+import tableList from "@/components/tableList";
+export default {
+  components: { searchBox, tableList },
+  data() {
+    return {
+      navText: {
+        title: "二级建造师/市政工程学员考试计划合计",
+        index: 90,
+      },
+      formList: [
+        {
+          label: "菜单名称",
+          prop: "menuName",
+          placeholder: "输入菜单名称",
+        },
+        {
+          label: "状态",
+          prop: "status",
+          scope: "select",
+          placeholder: "选择菜单状态",
+          options: [
+            {
+              label: "开启",
+              value: 1,
+            },
+            {
+              label: "关闭",
+              value: 0,
+            },
+          ],
+        },
+      ],
+      tableSet: [
+        {
+          label: "姓名",
+          prop: "name",
+          width: "100px",
+          hidden: false,
+        },
+        {
+          label: "班级",
+          prop: "class",
+          width: "100px",
+          hidden: false,
+        },
+        {
+          label: "语文",
+          prop: "yuwen",
+          width: "80px",
+          scope: "sortable",
+          hidden: false,
+        },
+        {
+          label: "数学",
+          prop: "shuxue",
+          width: "100px",
+          hidden: false,
+        },
+        {
+          label: "英语",
+          prop: "yingyu",
+          width: "80px",
+          hidden: false,
+        },
+        {
+          label: "物理",
+          prop: "wl",
+          width: "100px",
+          hidden: false,
+        },
+        {
+          label: "化学",
+          prop: "hx",
+          width: "80px",
+          hidden: false,
+        },
+      ],
+      tableData: [
+        {
+          name: "唐某某",
+          class: "高一16班",
+          yuwen: 95,
+          shuxue: 88,
+          yingyu: 92,
+          wl: 79,
+          hx: 98,
+        },
+        {
+          name: "高某某",
+          class: "高一16班",
+          yuwen: 100,
+          shuxue: 94,
+          yingyu: 83,
+          wl: 82,
+          hx: 79,
+        },
+        {
+          name: "刘某某",
+          class: "高一16班",
+          yuwen: 79,
+          shuxue: 99,
+          yingyu: 100,
+          wl: 74,
+          hx: 69,
+        },
+      ],
+    };
+  },
+  methods: {
+    search(data) {
+      this.$message.success("触发搜索" + JSON.stringify(data));
+    },
+    init() {
+      this.$message.success("重置成功");
+    },
+    addClick() {
+      this.$message.success("触发新增");
+    },
+    emitData(v) {
+      this.$message.success(JSON.stringify(v));
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+</style>