From fdc595eadd26a5607d080381f20b980506a248ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B2=88=E5=AD=A6=E5=9D=A4?= <1107410514@qq.com> Date: Tue, 1 Oct 2019 20:41:35 +0800 Subject: [PATCH] kun 19/10/1/20:45 --- .env.development | 15 +++ .env.production | 5 + src/http.js | 58 +++++++++ src/main.js | 22 +--- src/views/InformationQuery.vue | 207 ++++++++++++++++++++++++--------- src/views/Registered.vue | 193 +++++++++++++++--------------- src/views/home/HomePage.vue | 96 +++++++-------- static/js/http.js | 38 ------ static/js/tool.js | 16 +++ vue.config.js | 6 +- 10 files changed, 395 insertions(+), 261 deletions(-) create mode 100644 .env.development create mode 100644 .env.production create mode 100644 src/http.js delete mode 100644 static/js/http.js diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..298d4bd --- /dev/null +++ b/.env.development @@ -0,0 +1,15 @@ + +# just a flag +ENV = 'development' + +# base api +VUE_APP_BASE_API = '/url/' + +# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable, +# to control whether the babel-plugin-dynamic-import-node plugin is enabled. +# It only does one thing by converting all import() to require(). +# This configuration can significantly increase the speed of hot updates, +# when you have a large number of pages. +# Detail: https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js + +VUE_CLI_BABEL_TRANSPILE_MODULES = true diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..8150bd8 --- /dev/null +++ b/.env.production @@ -0,0 +1,5 @@ +# just a flag +ENV = 'production' + +# base api +VUE_APP_BASE_API = 'http://chaoyang.yulongcode.com/api/' \ No newline at end of file diff --git a/src/http.js b/src/http.js new file mode 100644 index 0000000..7d65dea --- /dev/null +++ b/src/http.js @@ -0,0 +1,58 @@ +import axios from 'axios' +import router from './router' + +var root = process.env.VUE_APP_BASE_API + +axios.interceptors.request.use(config => { + // --请求之前重新拼装url-- + config.url = root + config.url + if ( + config.url === '/url/v1/login/reg' || + config.url === '/url/v1/login/login' + ) { + // 如果是登录和注册操作,则不需要携带header里面的token + } else { + if (localStorage.token) { + config.headers = { + Authorization: localStorage.token + } + } + } + return config +}) + +axios.interceptors.response.use( + response => { + if (response.data.errno === 999) { + router.replace('/') + console.log('token过期') + } + return response + }, + error => { + return error + } +) + +router.beforeEach((to, from, next) => { + if (to.meta.requireAuth) { + // 判断该路由是否需要登录权限 + if (localStorage.token) { + // 获取当前的token是否存在 + console.log('token存在') + next() + } else { + alert('请先登录!') + console.log('token不存在') + next({ + path: '/login', // 将跳转的路由path作为参数,登录成功后跳转到该路由 + query: { redirect: to.fullPath } + }) + } + } else { + // 如果不需要权限校验,直接进入路由界面 + next() + } +}) + +export default axios diff --git a/src/main.js b/src/main.js index 68fa2a9..9540bfe 100644 --- a/src/main.js +++ b/src/main.js @@ -2,7 +2,7 @@ import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' -import http from '../static/js/http' +import http from './http' import tool from '../static/js/tool' import ElementUI from 'element-ui' import md5 from 'js-md5' @@ -12,26 +12,6 @@ import '../static/css/swiper.css' import '../static/fonts/iconfont.css' import 'element-ui/lib/theme-chalk/index.css' -router.beforeEach((to, from, next) => { - if (to.meta.requireAuth) { - // 判断该路由是否需要登录权限 - if (localStorage.token) { - // 获取当前的token是否存在 - console.log('token存在') - next() - } else { - console.log('token不存在') - next({ - path: '/login', // 将跳转的路由path作为参数,登录成功后跳转到该路由 - query: { redirect: to.fullPath } - }) - } - } else { - // 如果不需要权限校验,直接进入路由界面 - next() - } -}) - Vue.prototype.$md5 = md5 Vue.prototype.$tool = tool Vue.prototype.$http = http diff --git a/src/views/InformationQuery.vue b/src/views/InformationQuery.vue index 057c883..ca342e1 100644 --- a/src/views/InformationQuery.vue +++ b/src/views/InformationQuery.vue @@ -15,31 +15,35 @@
- +
@@ -65,31 +69,31 @@ v-for="(item,index) in sData" :key="index" :class="index % 2 == 0 ? 'bgcbz' : 'bgcz'" + class="tr" > - {{item.id}} {{item.organization}} {{item.credit}} {{item.type}} {{item.representative}} {{item.date_year + '-' + item.date_time}} - 正常 - 异常 + {{item.zt}} + {{item.zt}} @@ -120,11 +124,12 @@ export default { }, searchVal: "", searchValue: [], + record: [], screeOut: { - type: '', - date_time: '', - date_year: '', - zt: '', + type: '类型', + date_time: '登记时间', + date_year: '年检年份', + zt: '年检情况' }, sData: [ { @@ -135,7 +140,7 @@ export default { representative: "王五", date_time: "09-18", date_year: '2019', - zt: 0 + zt: '正常' }, { id: 2, @@ -145,7 +150,7 @@ export default { representative: "李四", date_time: "09-19", date_year: '2017', - zt: 1 + zt: '正常' }, { id: 4, @@ -155,7 +160,7 @@ export default { representative: "李四", date_time: "09-19", date_year: '2019', - zt: 1 + zt: '异常' }, { id: 5, @@ -165,7 +170,7 @@ export default { representative: "李四", date_time: "09-18", date_year: '2017', - zt: 1 + zt: '异常' }, { id: 6, @@ -175,7 +180,7 @@ export default { representative: "李四", date_time: "09-19", date_year: '2019', - zt: 1 + zt: '正常' }, { id: 3, @@ -185,32 +190,94 @@ export default { representative: "张三", date_time: "09-18", date_year: "2017", - zt: 0 + zt: '异常' } ] }; }, computed: {}, - watch: {}, + watch: { + record(newVal, oldVal) { } + }, methods: { + /** 删除单条数据 */ + del(index) { + let delArr = this.record.splice(index, 1) + }, + /** 调用搜索函数 */ + searchRecord(str) { + this.getSearch(str) + }, /** 筛选函数 */ scree() { + if (this.screeOut.type == "类型") { + this.screeOut.type = '' + } else { + this.record.push({ category: '类型', nameOf: this.screeOut.type }) + } + + if (this.screeOut.date_time == "登记时间") { + this.screeOut.date_time = '' + } else { + this.record.push({ category: '登记时间', nameOf: this.screeOut.date_time }) + } + + if (this.screeOut.date_year == "年检年份") { + this.screeOut.date_year = '' + } else { + this.record.push({ category: '年检年份', nameOf: this.screeOut.date_year }) + } + + if (this.screeOut.zt == "年检情况") { + this.screeOut.zt = '' + } else { + this.record.push({ category: '年检情况', nameOf: this.screeOut.zt }) + } + + /** + let hash = {}; + this.record = this.record.reduce((preVal, curVal) => { + hash[curVal.nameOf] ? '' : hash[curVal.nameOf] = true && preVal.push(curVal); + return preVal + }, []) + */ + + this.record = this.$tool.arrayHeavy(this.record, 'nameOf') + let gData = this.$tool.multiFilter(this.sData, this.screeOut) if (gData != undefined && gData != '') { this.searchValue = gData } else { this.$message('您搜索的内容暂无~') } + + if (this.screeOut.type == "") { + this.screeOut.type = '类型' + } + if (this.screeOut.date_time == "") { + this.screeOut.date_time = '登记时间' + } + if (this.screeOut.date_year == "") { + this.screeOut.date_year = '年检年份' + } + if (this.screeOut.zt == "") { + this.screeOut.zt = '年检情况' + } }, /** 搜索函数 */ - getSearch() { + getSearch(str) { this.searchValue = []; - if (this.searchVal === "") { + + if (this.searchVal === "" && str !== "" && str !== undefined && str !== null && str !== 'null') { + this.searchVal = str + } else if (this.searchVal === "") { this.$message.warning("请输入搜索内容"); return; } let searchData = this.$tool.setSearch(this.sData, this.searchVal) + // console.log(searchData); + if (searchData != undefined && searchData != '') { this.searchValue = searchData @@ -218,18 +285,19 @@ export default { } else { this.$message('您搜索的内容暂无~') } - - // this.sData.forEach((item, index) => { - // if ( - // item.organization.indexOf(this.searchVal) > -1 || - // item.credit.indexOf(this.searchVal) > -1 || - // item.type.indexOf(this.searchVal) > -1 || - // item.representative.indexOf(this.searchVal) > -1 || - // item.date.indexOf(this.searchVal) > -1 - // ) { - // this.searchValue.push(item); - // } - // }); + /* + this.sData.forEach((item, index) => { + if ( + item.organization.indexOf(this.searchVal) > -1 || + item.credit.indexOf(this.searchVal) > -1 || + item.type.indexOf(this.searchVal) > -1 || + item.representative.indexOf(this.searchVal) > -1 || + item.date.indexOf(this.searchVal) > -1 + ) { + this.searchValue.push(item); + } + }); + */ }, /** 名单切换 */ btn(index) { @@ -264,9 +332,32 @@ export default { .box-table { width: 100%; + margin-top: -25px; table { - width: 100%; + width: 1130px; + counter-reset: items 0; /* 0 可以省略 */ + counter-increment: counter-name integer; + box-sizing: border-box; + + .tr { + counter-increment: items 1; /* 1 同样可以省略 */ + &:before { + content: counter(items); + font-family: "MicrosoftYaHei"; + font-size: 16px; + font-weight: normal; + font-stretch: normal; + letter-spacing: 0px; + color: #595959; + width: 86px; + height: 40px; + display: inline-block; + text-align: center; + line-height: 40px; + box-sizing: border-box; + } + } th { line-height: 40px; @@ -279,6 +370,7 @@ export default { letter-spacing: 0px; color: #666666; background-color: #f6fafd; + box-sizing: border-box; &:nth-of-type(1) { width: 86px; @@ -286,26 +378,29 @@ export default { &:nth-of-type(2) { width: 160px; border-left: 1px solid #dcebf6; - border-right: 1px solid #dcebf6; } &:nth-of-type(3) { width: 240px; + border-left: 1px solid #dcebf6; + } &:nth-of-type(4) { width: 160px; border-left: 1px solid #dcebf6; - border-right: 1px solid #dcebf6; } &:nth-of-type(5) { width: 160px; + border-left: 1px solid #dcebf6; + } &:nth-of-type(6) { - width: 180px; + width: 160px; border-left: 1px solid #dcebf6; - border-right: 1px solid #dcebf6; } &:nth-of-type(7) { - width: 144px; + width: 140px; + border-left: 1px solid #dcebf6; + } } @@ -325,35 +420,38 @@ export default { font-weight: normal; font-stretch: normal; letter-spacing: 0px; + box-sizing: border-box; color: #595959; &:nth-of-type(1) { - width: 86px; - } - &:nth-of-type(2) { width: 160px; border-left: 1px solid #dcebf6; - border-right: 1px solid #dcebf6; + } + &:nth-of-type(2) { + width: 240px; + border-left: 1px solid #dcebf6; } &:nth-of-type(3) { - width: 240px; + width: 160px; + border-left: 1px solid #dcebf6; } &:nth-of-type(4) { width: 160px; border-left: 1px solid #dcebf6; - border-right: 1px solid #dcebf6; } &:nth-of-type(5) { width: 160px; + border-left: 1px solid #dcebf6; } &:nth-of-type(6) { - width: 180px; + width: 140px; border-left: 1px solid #dcebf6; - border-right: 1px solid #dcebf6; } + /* &:nth-of-type(7) { width: 144px; } + */ } } @@ -424,6 +522,7 @@ export default { font-stretch: normal; letter-spacing: 0px; color: #666666; + margin-bottom: 25px; .iconfont { margin-left: 10px; diff --git a/src/views/Registered.vue b/src/views/Registered.vue index 06f9bfc..bc9172d 100644 --- a/src/views/Registered.vue +++ b/src/views/Registered.vue @@ -1,26 +1,24 @@