Browse Source

双入口配置

duwendi 1 year ago
parent
commit
4bf0f4998e

+ 1 - 1
config/index.js

@@ -8,7 +8,7 @@ module.exports = {
8 8
   dev: {
9 9
     // Paths
10 10
     assetsSubDirectory: "static",
11
-    assetsPublicPath: "/luohe_park",
11
+    assetsPublicPath: "/",
12 12
 
13 13
     // Various Dev Server settings
14 14
     host: '0.0.0.0', // can be overwritten by process.env.HOST

+ 164 - 0
src/pages/home/components/demo.vue

@@ -0,0 +1,164 @@
1
+<template>
2
+  <div class="body-wrapper">
3
+    <div class="search-card">
4
+        <el-input class="input-wrapper" v-model="searchWords" placeholder="请输入关键字">
5
+          <el-button slot="append" icon="el-icon-search"  @click="getTableData"></el-button>
6
+        </el-input>
7
+    </div>
8
+    <el-table :data="tableData">
9
+      <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.key">
10
+      </el-table-column>
11
+      <el-table-column
12
+        label="操作"
13
+        width="100">
14
+        <template slot-scope="scope">
15
+            <el-button v-if="scope.row && scope.row.applyType === '1'" @click="handleAudit(scope.row)" type="text" size="small">审核</el-button>
16
+        </template>
17
+      </el-table-column>
18
+    </el-table>
19
+    <div class="table-pagination">
20
+      <el-pagination :background="false" layout="total, prev, pager, next" :total="total" @current-change="handlePageChange"
21
+        :current-page.sync="pageNum" :page-size.sync="pageSize">
22
+      </el-pagination>
23
+    </div>
24
+    <el-dialog
25
+        title="审核"
26
+        :visible.sync="dialogVisible"
27
+        width="60%"
28
+        custom-class="audit-dialog">
29
+        <el-row class="mg-bt">
30
+            <el-col class="label" :span="4">审核:</el-col>
31
+            <el-col :span="18">
32
+                <el-radio v-model="radio" label="2">通过</el-radio>
33
+                <el-radio v-model="radio" label="3">驳回</el-radio>
34
+            </el-col>
35
+        </el-row>
36
+        <span slot="footer" class="dialog-footer">
37
+            <el-button @click="dialogVisible = false">取 消</el-button>
38
+            <el-button type="primary" @click="handleConfirm">确 定</el-button>
39
+        </span>
40
+    </el-dialog>
41
+  </div>
42
+</template>
43
+<script>
44
+import api from "@/api/audit.js";
45
+
46
+export default {
47
+    components: {},
48
+    data() {
49
+      return {
50
+        columns: [
51
+          {
52
+            label: '资源名称',
53
+            key: 'resourceName'
54
+          },
55
+          {
56
+            label: '资源类型',
57
+            key: 'resourceType'
58
+          },
59
+          {
60
+            label: '申请人',
61
+            key: 'userName'
62
+          },
63
+          {
64
+            label: '状态',
65
+            key: 'applyTypeText'
66
+          }
67
+        ],
68
+        tableData: [],
69
+        total: 0,
70
+        pageSize: 10,
71
+        pageNum: 1,
72
+        radio: '2',
73
+        dialogVisible: false,
74
+        selRow: {},
75
+        searchWords: undefined
76
+      }
77
+    },
78
+    mounted() {
79
+      this.getTableData()
80
+    },
81
+    watch: {
82
+    },
83
+    methods: {
84
+      handlePageChange() {
85
+        this.getTableData()
86
+      },
87
+      handleAudit(row) {
88
+        this.selRow = row
89
+        this.dialogVisible = true
90
+      },
91
+      handleCancelApply(row) {
92
+        console.log('enter handle cancel apply')
93
+      },
94
+      handleConfirm() {
95
+        const {id} = this.selRow
96
+        console.log('radio', this.radio)
97
+        api.applyResource({id, applyType: this.radio}).then(res => {
98
+          if(res.success) {
99
+            this.dialogVisible = false
100
+            this.$message({
101
+              message: '审核成功!',
102
+              type: 'success'
103
+            })
104
+            this.getTableData()
105
+          }
106
+        })
107
+      },
108
+      getTableData() {
109
+        const {pageNum, pageSize, searchWords} = this
110
+        api.applyList({pageNum, pageSize, resourceName: searchWords}).then(res => {
111
+          this.tableData = []
112
+          res.data.records.map((item, index) => {
113
+            const newItem = {...item}
114
+            newItem.applyTypeText = this.getApplyTypeText(item.applyType)
115
+            this.tableData.push(newItem)
116
+          })
117
+          this.total = res.data.total
118
+        })
119
+      },
120
+      getApplyTypeText(val) {
121
+        if (!val){
122
+          return '未申请'
123
+        }
124
+        const textMap = {
125
+          1: '待审批',
126
+          2: '审批通过',
127
+          3: '审批驳回'
128
+        }
129
+        return textMap[val]
130
+      },
131
+      handleSearch() {
132
+        this.pageNum = 1
133
+        this.getTableData()
134
+      }
135
+    }
136
+}
137
+</script>
138
+<style  lang="scss" scoped>
139
+.body-wrapper {
140
+  padding: 20px;
141
+  .button-block{
142
+    text-align: right;
143
+    margin-bottom: 20px;
144
+  }
145
+  .table-pagination{
146
+    text-align: right;
147
+  }
148
+  .search-card{
149
+    margin-bottom: 20px;
150
+    text-align: center;
151
+    .input-wrapper{
152
+        width: 36%;
153
+    }
154
+  }
155
+}
156
+.audit-dialog{
157
+    .mg-bt{
158
+        margin-bottom: 24px;
159
+    }
160
+    .label{
161
+        text-align: right;
162
+    }
163
+}
164
+</style>

+ 14 - 0
src/pages/home/home.html

@@ -0,0 +1,14 @@
1
+<!DOCTYPE html>
2
+<html>
3
+  <head>
4
+    <meta charset="utf-8">
5
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
6
+    <title>监管平台管理</title>
7
+    <script src="static/mung-local-config.js"></script>
8
+    <script src="static/jquery-3.1.0.min.js"></script>
9
+  </head>
10
+  <body>
11
+    <div id="home"></div>
12
+    <!-- built files will be auto injected -->
13
+  </body>
14
+</html>

+ 21 - 0
src/pages/home/home.js

@@ -0,0 +1,21 @@
1
+import Vue from 'vue'
2
+import ElementUI from "element-ui"
3
+import "element-ui/lib/theme-chalk/index.css"
4
+import mixins from '../../mixins'
5
+import home from './home.vue'
6
+import router from "../../router/home"
7
+import config from '@/config/index';
8
+
9
+Vue.mixin(mixins)
10
+Vue.use(ElementUI);
11
+Vue.prototype.baseUrl =
12
+  process.env.NODE_ENV !== "development"
13
+    ? config.build.BASE_API
14
+    : config.dev.BASE_API;
15
+
16
+/* eslint-disable no-new */
17
+new Vue({
18
+  router,
19
+  el: '#home',
20
+  render: h => h(home)
21
+})

+ 5 - 0
src/pages/home/home.vue

@@ -0,0 +1,5 @@
1
+<template>
2
+  <div id="home">
3
+    <router-view />
4
+  </div>
5
+</template>

+ 70 - 0
src/pages/home/layouts/homeLayout.vue

@@ -0,0 +1,70 @@
1
+<template>
2
+  <div :class="['home-wrapper']">
3
+<!--    <div class="maintitle">漯河管理系统</div>-->
4
+    <el-container style="height: 100%;">
5
+      <!-- default-active设置进入页面时默认打开的菜单条目路由(这里的/indexpage是首页菜单条目的路由);:router设置为真,打开路由;:collapse这里联合折叠图标实现菜单折叠与展开 -->
6
+      <el-menu v-if="showMenu" default-active="/redirectMaintain" :router="true" background-color="#001529"
7
+               text-color="#fff" style="overflow-y: scroll; width: 200px; border: none;">
8
+<!--        <div class="fold">-->
9
+          <!--折叠菜单的图标 -->
10
+<!--          <i class="icon" :class="foldphoto"></i>-->
11
+<!--        </div>-->
12
+        <div class="luohetitle">漯河管理系统</div>
13
+        <el-submenu index="1" style="">
14
+          <template slot="title">
15
+            <!-- i标签的class值为element-UI官网icon图标值,可直接引用 -->
16
+            <i class="el-icon-s-home icon"></i>
17
+            <span>监管平台</span>
18
+          </template>
19
+          <!-- index为对应菜单条目的路由,在router文件夹的index.js中设置 -->
20
+          <el-menu-item v-for="(item, index) in menu" :key="index" :index="item.url">{{item.name}}</el-menu-item>
21
+        </el-submenu>
22
+      </el-menu>
23
+      <el-main class="main">
24
+        <!--引入跳转路由-->
25
+        <router-view></router-view>
26
+      </el-main>
27
+    </el-container>
28
+  </div>
29
+</template>
30
+
31
+<script>
32
+export default {
33
+  data() {
34
+    return {
35
+      showMenu: process.env.NODE_ENV === 'development',
36
+      isCollapse: false,//默认为不折叠菜单
37
+      foldphoto: "el-icon-s-unfold",//菜单展开图标
38
+      menu: [
39
+        {name: '白色demo', url: '/demo'},
40
+      ]
41
+    }
42
+  },
43
+  mounted() {
44
+
45
+  },
46
+  methods: {
47
+    // isfold() {
48
+    //   //每次点击折叠图标值取反
49
+    //   this.isCollapse = !this.isCollapse
50
+    //   if (this.isCollapse) {
51
+    //     //折叠图标
52
+    //     this.foldphoto = "el-icon-s-fold"
53
+    //   } else {
54
+    //     //展开图标
55
+    //     this.foldphoto = "el-icon-s-unfold"
56
+    //   }
57
+    // }
58
+  }
59
+}
60
+</script>
61
+
62
+<style scoped>
63
+.home-wrapper {
64
+  position: absolute;
65
+  width: 100%;
66
+  height: 100%;
67
+  background-size: cover;
68
+  box-sizing: border-box;
69
+}
70
+</style>

+ 26 - 0
src/router/home.js

@@ -0,0 +1,26 @@
1
+import Vue from "vue";
2
+import Router from "vue-router";
3
+
4
+// 解决重复点菜单报错问题
5
+const originalPush = Router.prototype.push;
6
+Router.prototype.push = function push(location) {
7
+  return originalPush.call(this, location).catch(err => err);
8
+};
9
+Vue.use(Router);
10
+
11
+export default new Router({
12
+  routes: [
13
+    { path: "/", redirect: "/demo" },
14
+    {
15
+      path: "/index",
16
+      component: () => import("../pages/home/layouts/homeLayout.vue"),
17
+      children: [
18
+        {
19
+          name: "demo",
20
+          path: "/demo",
21
+          component: () => import("../pages/home/components/demo.vue")
22
+        },
23
+      ]
24
+    }
25
+  ]
26
+});