init

package.json

@@ -9,15 +9,23 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "element-ui": "^2.4.5",
+    "vue": "^2.6.11",
+    "vue-router": "^3.2.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "^4.5.13",
     "@vue/cli-service": "~4.5.0",
+    "axios": "^0.18.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "node-sass": "^4.9.2",
+    "sass-loader": "^7.0.3",
+    "vue-cli-plugin-axios": "0.0.4",
+    "vue-cli-plugin-element": "~1.0.1",
     "vue-template-compiler": "^2.6.11"
   },
   "eslintConfig": {

src/App.vue

@@ -1,28 +1,12 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <router-view/>
   </div>
 </template>
 
-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
-</script>
-
-<style>
+<style lang="scss">
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  width: 100%;
+  height: 100%;
 }
 </style>

src/assets/common.scss

@@ -0,0 +1,34 @@
+body,
+div,
+p,
+ul,
+ol,
+li,
+dl,
+dt,
+dd,
+table,
+tr,
+td,
+form,
+hr,
+fieldset,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+img,
+input {
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+}

src/element-variables.scss

@@ -0,0 +1,11 @@
+/*
+Write your variables here. All available variables can be
+found in element-ui/packages/theme-chalk/src/common/var.scss.
+For example, to overwrite the theme color:
+*/
+$--color-primary: teal;
+
+/* icon font path, required */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";

src/main.js

@@ -1,8 +1,14 @@
 import Vue from 'vue'
+import './plugins/axios'
 import App from './App.vue'
+import './plugins/element.js'
+import router from './router'
+import './assets/common.scss'
+import querystring from 'querystring';
 
 Vue.config.productionTip = false
-
+Vue.prototype.$qs = querystring
 new Vue({
-  render: h => h(App),
-}).$mount('#app')
+    router,
+    render: h => h(App)
+}).$mount('#app')

src/plugins/axios.js

@@ -0,0 +1,63 @@
+"use strict";
+
+import Vue from 'vue';
+import axios from "axios";
+
+// Full config:  https://github.com/axios/axios#request-config
+axios.defaults.baseURL = 'http://120.55.70.156:80/api';
+// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || 'http://120.55.70.156:80/api';
+// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
+// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
+
+let config = {
+    // baseURL: process.env.baseURL || process.env.apiUrl || "",
+    // timeout: 60 * 1000, // Timeout
+    // withCredentials: true, // Check cross-site Access-Control
+};
+
+const _axios = axios.create(config);
+
+_axios.interceptors.request.use(
+    function(config) {
+        // Do something before request is sent
+        return config;
+    },
+    function(error) {
+        // Do something with request error
+        return Promise.reject(error);
+    }
+);
+
+// Add a response interceptor
+_axios.interceptors.response.use(
+    function(response) {
+        // Do something with response data
+        return response;
+    },
+    function(error) {
+        // Do something with response error
+        return Promise.reject(error);
+    }
+);
+
+Plugin.install = function(Vue, options) {
+    console.log(options)
+    Vue.axios = _axios;
+    window.axios = _axios;
+    Object.defineProperties(Vue.prototype, {
+        axios: {
+            get() {
+                return _axios;
+            }
+        },
+        $axios: {
+            get() {
+                return _axios;
+            }
+        },
+    });
+};
+
+Vue.use(Plugin)
+
+export default Plugin;

src/plugins/element.js

@@ -0,0 +1,5 @@
+import Vue from 'vue'
+import Element from 'element-ui'
+import '../element-variables.scss'
+
+Vue.use(Element)

src/router/index.js

@@ -0,0 +1,19 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+const routes = [{
+    path: '/',
+    name: 'Home',
+    component: () =>
+        import ( /* webpackChunkName: "about" */ '../views/Home.vue')
+}, ]
+
+const router = new VueRouter({
+    mode: 'history',
+    base: '/bulehelp/',
+    routes
+})
+
+export default router

src/views/Home.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="home">
+    <el-row class="title">{{ typeList[typeFree].name }}</el-row>
+    <el-row class="search" v-if="typeList[typeFree].inputList.length > 0">
+      <el-input
+        v-model="inputObj[item.prop]"
+        placeholder="请输入内容"
+        v-for="item in typeList[typeFree].inputList"
+        :key="item.symbol"
+      ></el-input>
+      <el-button type="primary" @click="getData()">查询</el-button>
+    </el-row>
+    <el-row class="tableBox">
+      <el-table :data="tableData" border style="width: 100%" height="100%">
+        <el-table-column type="index" align="center" width="50" label="">
+        </el-table-column>
+        <el-table-column
+          align="center"
+          v-for="(item, ind) in typeList[typeFree].tableDataHeader"
+          :key="ind"
+          :prop="item.prop"
+          :label="item.name"
+        >
+        </el-table-column>
+      </el-table>
+    </el-row>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="currentPage"
+      :page-sizes="[30, 50, 100, 150]"
+      :page-size="pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Home",
+  data() {
+    return {
+      typeList: [
+        {
+          name: "项目申报记录",
+          tableDataHeader: [
+            { prop: "unit", name: "办理单位" },
+            { prop: "no", name: "办理单号" },
+            { prop: "classify", name: "业务类型" },
+            { prop: "date", name: "办理日期" },
+            { prop: "certificate", name: "电子凭证" },
+            { prop: "certificateImage", name: "图片链接" },
+            { prop: "maskedPhoneNo", name: "办理人手机号" },
+            { prop: "phoneNo", name: "手机编码" },
+            { prop: "s", name: "状态" },
+            { prop: "createTime", name: "创建时间" },
+            { prop: "lastUpdTime", name: "末次修改时间" },
+            { prop: "projectName", name: "申报项目名称" },
+            { prop: "privateName", name: "内容系统名称" },
+            { prop: "address", name: "项目地址" },
+            { prop: "username", name: "联系人" },
+            { prop: "newDate", name: "出文日期" },
+            { prop: "sendClassify", name: "电子凭证状态" },
+            { prop: "certificateS", name: "状态" },
+            { prop: "legalPersonName", name: "法人姓名" },
+            { prop: "legalPersonPhone", name: "法人手机号" },
+            { prop: "pdfUrl", name: "PDF链接" },
+            { prop: "downloadCode", name: "下载码" },
+            { prop: "downloadNum", name: "下载次数 " },
+          ],
+          url: "/bule/bmfwEvent/page",
+          inputList: [{ prop: "unit", name: "单位信息", symbol: Symbol() }],
+        },
+        {
+          name: "用户反馈记录",
+          tableDataHeader: [
+            { prop: "content", name: "反馈内容" },
+            { prop: "images", name: "附件图片" },
+            { prop: "createTime", name: "创建时间" },
+          ],
+          url: "/bule/bmfwFeedback/page",
+          inputList: [],
+        },
+        {
+          name: "法规目录表",
+          tableDataHeader: [
+            { prop: "lawsId", name: "法规名称" },
+            { prop: "chapter", name: "章节" },
+            { prop: "name", name: "章节名称" },
+            { prop: "createTime", name: "创建时间" },
+          ],
+          url: "/bule/bmfwLawsCatalog/page",
+          inputList: [
+            { prop: "name", name: "名称", symbol: Symbol() },
+            // { prop: "lawsId", name: "法律名称", symbol: Symbol() },
+          ],
+        },
+        {
+          name: "法规目录详情表",
+          tableDataHeader: [
+            { prop: "catalogName", name: "法规目录名称" },
+            { prop: "value", name: "条目名称" },
+            { prop: "intro", name: "详情" },
+            { prop: "createTime", name: "创建时间" },
+            { prop: "lastUpdTime", name: "末次修改时间" },
+          ],
+          url: "/bule/bmfwLawsCatalogInfo/page",
+          inputList: [
+            { prop: "param", name: "名称", symbol: Symbol() },
+            // { prop: "lawsId", name: "法律名称", symbol: Symbol() },
+          ],
+        },
+        {
+          name: "普法宣传记录表",
+          tableDataHeader: [
+            { prop: "classify", name: "原创图文/转载/视频" },
+            { prop: "name", name: "标题" },
+            { prop: "cover", name: "封面" },
+            { prop: "url", name: "链接" },
+            { prop: "intro", name: "详情" },
+            { prop: "createTime", name: "创建时间" },
+            { prop: "lastUpdTime", name: "末次修改时间" },
+          ],
+          url: "/bule/bmfwLawsNew/page",
+          inputList: [
+            { prop: "name", name: "名称", symbol: Symbol() },
+            // { prop: "lawsId", name: "法律名称", symbol: Symbol() },
+          ],
+        },
+        {
+          name: "用户信息表",
+          tableDataHeader: [
+            { prop: "name", name: "用户名称" },
+            { prop: "maskedPhoneNo", name: "联系电话" },
+            { prop: "phoneNo", name: "详情" },
+            { prop: "s", name: "绑定状态" },
+            { prop: "createTime", name: "创建时间" },
+          ],
+          url: "/bule/bmfwUser/page",
+          inputList: [],
+        },
+        {
+          name: "题目表",
+          tableDataHeader: [
+            { prop: "title", name: "题目" },
+            { prop: "answer", name: "答案" },
+            { prop: "questionKey", name: "关键字" },
+            { prop: "size", name: "搜索次数" },
+            { prop: "createTime", name: "创建时间" },
+            { prop: "lastUpdTime", name: "末次修改时间" },
+            { prop: "s", name: "状态" },
+          ],
+          url: "/bule/robotQuestion/page",
+          inputList: [],
+        },
+        {
+          name: "关键字表",
+          tableDataHeader: [
+            { prop: "id", name: "关键字名称" },
+            { prop: "s", name: "关键字状态" },
+            { prop: "size", name: "搜索次数" },
+            { prop: "createTime", name: "创建时间" },
+            { prop: "lastUpdTime", name: "末次修改时间" },
+          ],
+          url: "/bule/robotQuestionKey/page",
+          inputList: [{ prop: "name", name: "名称", symbol: Symbol() }],
+        },
+        {
+          name: "搜索问题记录表",
+          tableDataHeader: [
+            { prop: "message", name: "问题描述" },
+            { prop: "reply", name: "回复" },
+            { prop: "s", name: "未知已解决" },
+            { prop: "classify", name: "分类" },
+            { prop: "createTime", name: "创建时间" },
+            { prop: "lastUpdTime", name: "末次修改时间" },
+          ],
+          url: "/bule/robotQuestionMessage/page",
+          inputList: [{ prop: "classIf", name: "名称", symbol: Symbol() }],
+        },
+        {
+          name: "留言记录信息",
+          tableDataHeader: [
+            { prop: "content", name: "留言内容" },
+            { prop: "username", name: "用户名称" },
+            { prop: "maskedPhoneNo", name: "手机号" },
+            { prop: "createTime", name: "创建时间" },
+            { prop: "lastUpdTime", name: "末次修改时间" },
+          ],
+          url: "/bule/robotQuestionMessageRecord/page",
+          inputList: [],
+        },
+      ],
+      inputObj: {},
+      typeFree: 0,
+      tableData: [],
+      currentPage: 1,
+      pageSize: 50,
+      total: 0,
+    };
+  },
+  created() {
+    this.inputObj = {};
+    if (
+      this.$route.query.type &&
+      this.$route.query.type < this.typeList.length
+    ) {
+      this.typeFree = this.$route.query.type;
+    } else {
+      this.typeFree = 0;
+    }
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    async getData() {
+      let data = {
+        current: this.currentPage,
+        size: this.pageSize,
+      };
+      Object.assign(data,this.inputObj)
+      let res = await this.$axios.get(
+        this.typeList[this.typeFree].url + "?" + this.$qs.stringify(data)
+      );
+      this.tableData = res.data.data.records;
+      this.total = res.data.data.total;
+    },
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.getData();
+      console.log(`每页 ${this.pageSize} 条`);
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.getData();
+      console.log(`当前页: ${this.currentPage}`);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.home {
+  width: 100%;
+  height: 100%;
+  padding: 30px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  .title {
+    font-size: 50px;
+    line-height: 100px;
+    text-align: center;
+  }
+  .search {
+    height: 50px;
+  }
+  .el-input {
+    width: 500px;
+  }
+  .el-button {
+    margin-left: 10px;
+  }
+  .tableBox {
+    flex: 1;
+    width: 100%;
+  }
+  .el-pagination {
+    display: flex;
+    justify-content: flex-end;
+    padding: 20px 20px 0;
+  }
+}
+</style>

vue.config.js

@@ -0,0 +1,33 @@
+module.exports = {
+    publicPath: '/bulehelp/', //部署路径后缀
+    assetsDir: 'static', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
+    indexPath: 'index.html', // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
+    filenameHashing: true, // 文件名hash，默认
+    lintOnSave: false, // 开发环境下通过 eslint-loader 在每次保存时 lint 代码
+    productionSourceMap: false, // 关闭生产环境的 source map
+    devServer: {
+        overlay: {
+            // 让浏览器 overlay 同时显示警告和错误
+            warnings: true,
+            errors: true
+        },
+        host: 'localhost',
+        port: 8080, // 端口号
+        // https: false, // https:{type:Boolean}
+        open: true, // 配置自动启动浏览器
+        hotOnly: true, // 热更新
+        proxy: {
+            // 配置多个跨域
+            '/': {
+                target: 'http://172.16.120.155:8083/', //跨域接口的地址
+                changeOrigin: false,
+                pathRewrite: {
+                    '': '/'
+                }
+            }
+        },
+        headers: {
+            'Access-Control-Allow-Origin': '*',
+        }
+    }
+};