质量月报：基本开发页面设置

src/icons/svg/monthly-report.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21.562" height="23.221" viewBox="0 0 21.562 23.221">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g id="icon-4.11月报" transform="translate(-96 -64)">
+    <path id="路径_13761" data-name="路径 13761" class="cls-1" d="M117.563,81.88V65.659A1.664,1.664,0,0,0,115.9,64H97.659A1.664,1.664,0,0,0,96,65.659v19.9a1.663,1.663,0,0,0,1.659,1.659h14.58a.857.857,0,0,0,.589-.24l4.495-4.512A.835.835,0,0,0,117.563,81.88ZM115.9,79.956h-4.147a1.343,1.343,0,0,0-1.46,1.46v4.147H98.488a.832.832,0,0,1-.829-.829V66.488a.832.832,0,0,1,.829-.829h16.587a.832.832,0,0,1,.829.829Zm0,1.46-4.147,4.147V82.245c0-.456-.456,3.317,0,3.317Z" transform="translate(0 0)"/>
+    <path id="路径_13762" data-name="路径 13762" class="cls-1" d="M263.36,261.148a.665.665,0,0,0,.663.663H268a.663.663,0,0,0,0-1.327h-3.981A.665.665,0,0,0,263.36,261.148Zm3.682-3.574-.738-.672a5.393,5.393,0,0,0,.879-3.093V249.28h5.59v7.232a.82.82,0,0,1-.937.912h-1.178l-.257-.937c.406.025.788.05,1.128.05.182,0,.274-.133.274-.373v-1.509h-3.7A6.006,6.006,0,0,1,267.042,257.573Zm4.752-7.373h-3.641v1.294h3.641Zm-3.641,3.558h3.641V252.39h-3.641Z" transform="translate(-163.023 -180.478)"/>
+  </g>
+</svg>

src/router/newRouter.js

@@ -354,6 +354,33 @@ const layout = [
         meta: { title: '配置中心' }
       }
     ]
+  },
+  {
+    path: '/monthlyReport',
+    name: '质量月报',
+    component: Layout,
+    icon: 'monthly-report',
+    redirect: '/monthlyReport/index',
+    children: [
+      {
+        path: 'index',
+        name: '质量月报',
+        component: () => import('@/views/monthlyReport/index.vue'),
+        meta: { title: '质量月报' }
+      },
+      {
+        path: 'edit',
+        name: '质量月报编辑',
+        component: () => import('@/views/monthlyReport/children_page/edit_report/index'),
+        meta: { title: '质量月报编辑' }
+      },
+      {
+        path: 'set',
+        name: '质量月报设置',
+        component: () => import('@/views/monthlyReport/children_page/set_report/index'),
+        meta: { title: '质量月报设置' }
+      }
+    ]
   }
 ]
 

src/store/index.js

@@ -6,6 +6,8 @@ import settings from './modules/settings'
 import data from './modules/data'
 import global from './modules/global'
 import project from './modules/project'
+import monthlyReportEdit from './modules/monthlyReport/edit'
+import monthlyReportSeting from './modules/monthlyReport/setting'
 
 Vue.use(Vuex)
 
@@ -15,7 +17,9 @@ const store = new Vuex.Store({
     settings,
     data,
     global,
-    project
+    project,
+    monthlyReportEdit,
+    monthlyReportSeting
   },
   getters
 })

src/store/modules/monthlyReport/edit.js

@@ -0,0 +1,7 @@
+export default {
+  /* 月报编辑 */
+  namespaced: true,
+  state: {},
+  mutations: {},
+  actions: {}
+}

src/store/modules/monthlyReport/setting.js

@@ -0,0 +1,7 @@
+export default {
+  /* 月报设置 */
+  namespaced: true,
+  state: {},
+  mutations: {},
+  actions: {}
+}

src/views/monthlyReport/README.md

@@ -0,0 +1,7 @@
+# 质量月报
+
+
+## 设置月报
+path： children_page/edit_report
+## 添加月报
+path： children_page/set_report

src/views/monthlyReport/children_page/edit_report/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="page-wrapper">
+    <!--  header  -->
+    <headerCom title="月报" sub-title="新建月报" />
+    <!--  content  -->
+    <div class="content-wrapper">
+      <el-button size="small">默认按钮</el-button>
+      <el-button type="primary" size="small">主要按钮</el-button>
+      <el-button type="success" size="small">成功按钮</el-button>
+      <el-button type="info" size="small">信息按钮</el-button>
+      <el-button type="warning" size="small">警告按钮</el-button>
+      <el-button type="danger" size="small"> 危险按钮</el-button>
+    </div>
+  </div>
+</template>
+
+<script type="text/javascript">
+import headerCom from '../../components/header'
+
+export default {
+  name: '',
+  components: {
+    headerCom
+  },
+  data() {
+    return {}
+  }
+}
+</script>
+<style scoped lang="less">
+@import '../../style';
+</style>

src/views/monthlyReport/children_page/set_report/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="page-wrapper">
+    <!--  header  -->
+    <headerCom title="月报" sub-title="月报设置" />
+    <!--  content  -->
+    <div class="content-wrapper">
+      <el-button size="small">默认按钮</el-button>
+      <el-button type="primary" size="small">主要按钮</el-button>
+      <el-button type="success" size="small">成功按钮</el-button>
+      <el-button type="info" size="small">信息按钮</el-button>
+      <el-button type="warning" size="small">警告按钮</el-button>
+      <el-button type="danger" size="small"> 危险按钮</el-button>
+    </div>
+  </div>
+</template>
+
+<script type="text/javascript">
+import headerCom from '../../components/header'
+
+export default {
+  name: '',
+  components: {
+    headerCom
+  },
+  data() {
+    return {
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+@import '../../style';
+</style>

src/views/monthlyReport/components/header.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-row type="flex" class="header-wrapper-0e7a058e" justify="space-between">
+    <el-col :span="12">
+      <span
+class="title"
+        >{{ title }}{{ subTitle ? '/' : ''
+        }}<span class="subTitle">{{ subTitle }}</span></span
+      >
+      <slot name="input" />
+    </el-col>
+    <el-col :span="12" class="right-wrapper test">
+      <slot name="content" class="important-222" />
+    </el-col>
+  </el-row>
+</template>
+
+<script type="text/javascript">
+export default {
+  name: '',
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: () => ''
+    },
+    subTitle: { type: String, required: false, default: () => '' }
+  },
+  mounted() {
+    this.$store.dispatch('global/setShowNavTag', false) // 不展示二级侧边栏
+    this.$store.dispatch('global/setCollapsed', true) // 二级侧边栏收起
+  }
+}
+</script>
+
+<style lang="less">
+.header-wrapper-0e7a058e {
+  background-color: #ffffff;
+  border-radius: 0 0 6px 6px;
+  box-shadow: 0 0 11px #eef0f5;
+  height: 73px;
+  margin-bottom: 10px;
+
+  .el-col {
+    padding: 20px 30px;
+    font-size: 14px;
+
+    .title {
+      color: rgba(102, 102, 102, 1);
+      line-height: 2;
+
+      .subTitle {
+        color: rgba(51, 51, 51, 1);
+        margin-right: 25px;
+      }
+    }
+  }
+
+  .right-wrapper {
+    text-align: right;
+
+    > * {
+      display: inline-block !important;
+      margin-left: 20px;
+    }
+  }
+}
+</style>

src/views/monthlyReport/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="page-wrapper">
+    <!--  header  -->
+    <headerCom title="请选择">
+      <template slot="input">
+        <el-select v-model="value" size="small" placeholder="请选择">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </template>
+      <template slot="content">
+        <el-button
+          type="primary"
+          size="small"
+          @click="$router.push('/monthlyReport/edit')"
+          >新建月报
+        </el-button>
+        <el-button
+          type="primary"
+          plain
+          size="small"
+          @click="$router.push('/monthlyReport/set')"
+          >月报设置
+        </el-button>
+      </template>
+    </headerCom>
+    <!--  content  -->
+    <div class="content-wrapper">
+      <headTitle title="基础信息" />
+<!--      <div v-for="i in 50" :key="i">-->
+<!--        <el-button size="small">默认按钮</el-button>-->
+<!--        <el-button type="primary" size="small">主要按钮</el-button>-->
+<!--        <el-button type="success" size="small">成功按钮</el-button>-->
+<!--        <el-button type="info" size="small">信息按钮</el-button>-->
+<!--        <el-button type="warning" size="small">警告按钮</el-button>-->
+<!--        <el-button type="danger" size="small"> 危险按钮</el-button>-->
+<!--        {{ i }}-->
+<!--        <br>-->
+<!--        <br v-if="i < 50">-->
+<!--      </div>-->
+    </div>
+  </div>
+</template>
+
+<script type="text/javascript">
+import headTitle from '@/components/headTitle'
+import headerCom from './components/header'
+
+export default {
+  name: '',
+  components: {
+    headerCom,
+    headTitle
+  },
+  data() {
+    return {
+      options: [
+        {
+          value: '选项1',
+          label: '黄金糕'
+        },
+        {
+          value: '选项2',
+          label: '双皮奶'
+        },
+        {
+          value: '选项3',
+          label: '蚵仔煎'
+        },
+        {
+          value: '选项4',
+          label: '龙须面'
+        },
+        {
+          value: '选项5',
+          label: '北京烤鸭'
+        }
+      ],
+      value: ''
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+@import 'style';
+</style>

src/views/monthlyReport/style.less

@@ -0,0 +1,14 @@
+.page-wrapper {
+  background-color: #F2F3F6;
+  min-height: calc(100vh - 80px);
+  padding: 0 10px;
+}
+
+.content-wrapper {
+  background: #ffffff;
+  min-height: calc(100vh - 93px);
+  box-shadow: 0 0 11px #eef0f5;
+  border-radius: 6px;
+  margin-bottom: 10px;
+  padding: 20px 30px;
+}