huoran
/
FE_huoran_data
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

ui修改-颜色等

Browse Source
ui1
Joel 3 years ago
parent 316561116f
commit a73994a885
5 changed files with 576 additions and 584 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 311
      src/layouts/header/index.vue
  2. 197
      src/layouts/navbar/index.vue
  3. 643
      src/pages/data/list/index.vue
  4. 7
      src/styles/common.scss
  5. 2
      src/styles/default/index.scss

311
src/layouts/header/index.vue
Unescape View File

@ -1,13 +1,8 @@
<template> <template>
<div class="header"> <div class="header">
<a class="logo" @click="toIndex"> <a class="logo" @click="toIndex">
<!-- <img width="180" v-if="isLogin || (isManager && showSetting) || !isUser" src="@/assets/img/logo.png" alt=""> -->
<span v-if="token && isManager && !showSetting">{{schoolName}}</span> <span v-if="token && isManager && !showSetting">{{schoolName}}</span>
</a> </a>
<!-- <div class="search" v-if="isData">
<input v-model="keyword" type="text" placeholder="请输入数据表名称">
<img src="../../assets/img/search.png" alt="" class="search-icon">
</div> -->
<div class="inner"> <div class="inner">
<div style="height: 70px;"></div> <div style="height: 70px;"></div>
<navbar ref="nav"></navbar> <navbar ref="nav"></navbar>
@ -57,169 +52,169 @@
</template> </template>
<script> <script>
import navbar from '../navbar' import navbar from '../navbar'
import { mapState,mapActions } from 'vuex' import { mapState, mapActions } from 'vuex'
import Setting from '@/setting' import Setting from '@/setting'
import util from '@/libs/util' import util from '@/libs/util'
import bus from '@/libs/bus' import bus from '@/libs/bus'
export default { export default {
data() { data() {
return { return {
token: util.local.get(Setting.tokenKey), token: util.local.get(Setting.tokenKey),
isLogin: this.$route.path == '/login', isLogin: this.$route.path == '/login',
isData: this.$route.path == '/data/list', isData: this.$route.path == '/data/list',
customer: this.$route.query.customer, customer: this.$route.query.customer,
rendered: false, rendered: false,
keyword: '', keyword: '',
searchTimer: null, searchTimer: null,
userName: '', userName: '',
isUser: false, isUser: false,
showSetting: true, showSetting: true,
id: '', id: '',
schoolName: '', schoolName: '',
passwordVisible: false, passwordVisible: false,
passwordForm: { passwordForm: {
password: '', password: '',
newPassword: '', newPassword: '',
reNewPassword: '' reNewPassword: ''
}, },
}; };
},
components: { navbar },
computed: {
...mapState('user', [
'avatar', 'isManager', 'schoolId', 'isCustomer'
]),
...mapState('auth', [
'routes'
])
},
watch: {
keyword: function(val) {
clearTimeout(this.searchTimer)
if (!this.rendered) {
this.searchTimer = setTimeout(() => {
bus.$emit('initData', this.keyword)
}, 500)
}
this.rendered = false
}, },
components: { navbar }, '$route'(to, from) {
computed: { let isData = this.$route.path == '/data/list'
...mapState('user', [ if (isData) {
'avatar','isManager','schoolId','isCustomer' this.rendered = true
]), this.keyword = ''
...mapState('auth', [ }
'routes' this.isData = isData
]) }
}, },
watch: { mounted() {
keyword: function(val) { // 如果是客户,则存到store里去,因为客户是没有用户信息的,上面要根据这个值来判断显示与否
clearTimeout(this.searchTimer) if (this.customer) {
if(!this.rendered){ let customer = atob(decodeURI(this.customer)) == 'false' ? false : true
this.searchTimer = setTimeout(() => { this.setCustomer(customer)
bus.$emit('initData',this.keyword) }
},500)
} // 如果登录了,才调用用户信息的接口
this.rendered = false this.token && this.getUserInfo()
}, },
'$route'(to,from) { methods: {
let isData = this.$route.path == '/data/list' ...mapActions('user', [
if(isData){ 'setInfo', 'logout', 'setManager', 'setCustomer'
this.rendered = true ]),
this.keyword = '' getUserInfo() {
} this.$get(this.api.userInfo).then(res => {
this.isData = isData let userInfo = res.userInfo ? res.userInfo : {}
let userAccount = res.userAccount
let isManager = userAccount.roleId != '0'
this.isUser = isManager
let mg = this.$route.query.mg
// 如果是管理员
if (mg && atob(decodeURI(mg)) === 'true') {
this.showSetting = false
} }
this.userName = userAccount.account
this.id = userAccount.id
this.schoolName = res.schoolName
this.setInfo({
avatar: userInfo.userAvatars,
schoolId: userAccount.schoolId,
})
this.setManager(isManager)
}).catch(err => { })
}, },
mounted(){ toIndex() {
// 如果是客户,则存到store里去,因为客户是没有用户信息的,上面要根据这个值来判断显示与否 this.$refs.nav.jump({
if(this.customer){ index: '/index/list',
let customer = atob(decodeURI(this.customer)) == 'false' ? false : true title: '首页'
this.setCustomer(customer) })
}
// 如果登录了,才调用用户信息的接口
this.token && this.getUserInfo()
}, },
methods: { toSearch() {
...mapActions('user', [ this.$refs.nav.jump({
'setInfo','logout','setManager','setCustomer' index: '/index/list',
]), title: '首页'
getUserInfo(){ })
this.$get(this.api.userInfo).then(res => { },
let userInfo = res.userInfo ? res.userInfo : {} toLogin() {
let userAccount = res.userAccount this.$refs.nav.jump({
let isManager = userAccount.roleId != '0' index: '/login',
this.isUser = isManager title: '登录'
let mg = this.$route.query.mg })
// 如果是管理员 },
if(mg && atob(decodeURI(mg)) === 'true'){ // 跳转到管理员后台
this.showSetting = false toManager() {
} let routes = this.routes
this.userName = userAccount.account if (routes.length) {
this.id = userAccount.id let route = this.$router.resolve({
this.schoolName = res.schoolName path: this.routes[0].name,
this.setInfo({ query: {
avatar: userInfo.userAvatars, mg: btoa(true),
schoolId: userAccount.schoolId, schoolId: btoa(this.schoolId),
}) customer: btoa(this.isCustomer)
this.setManager(isManager) }
}).catch(err => {}) })
}, window.open(route.href)
toIndex(){ } else {
this.$refs.nav.jump({ // 如果接口返回的角色权限为空,则表示没有给该角色开放任何模块权限,直接提示用户未开放
index: '/index/list', util.warningMsg('该角色未开放模块，请联系管理员')
title: '首页' }
}) },
}, userCommand(command) {
toSearch(){ if (command == 'person') {
this.$refs.nav.jump({ this.$router.push('/setting/person').catch(err => { })
index: '/index/list', } else if (command == 'resetPw') {
title: '首页' this.showPassword()
}) } else if (command == 'myDownload') {
}, this.$router.push('/setting/download').catch(err => { })
toLogin(){ } else {
this.$refs.nav.jump({ this.logout()
index: '/login', }
title: '登录' },
}) showPassword() {
}, this.passwordVisible = true
// 跳转到管理员后台 },
toManager(){ editPassword() {
let routes = this.routes if (!this.passwordForm.password) return util.warningMsg('请输入原密码')
if(routes.length){ if (!this.passwordForm.newPassword) return util.warningMsg('请输入新密码')
let route = this.$router.resolve({ if (!this.passwordForm.reNewPassword) return util.warningMsg('请确认新密码')
path: this.routes[0].name, if (this.passwordForm.newPassword.length < 6 || this.passwordForm.reNewPassword.length < 6) return util.warningMsg('请输入6位数以上的密码')
query: { if (this.passwordForm.newPassword !== this.passwordForm.reNewPassword) return util.warningMsg('输入的新密码不一致，请重新确认')
mg: btoa(true), if (this.passwordForm.password === this.passwordForm.newPassword) return util.warningMsg('原密码跟新密码不能一致')
schoolId: btoa(this.schoolId),
customer: btoa(this.isCustomer)
}
})
window.open(route.href)
}else{
// 如果接口返回的角色权限为空,则表示没有给该角色开放任何模块权限,直接提示用户未开放
util.warningMsg('该角色未开放模块，请联系管理员')
}
},
userCommand(command){
if(command == 'person'){
this.$router.push('/setting/person').catch(err => {})
}else if(command == 'resetPw'){
this.showPassword()
}else if(command == 'myDownload'){
this.$router.push('/setting/download').catch(err => {})
}else{
this.logout()
}
},
showPassword() {
this.passwordVisible = true
},
editPassword() {
if(!this.passwordForm.password) return util.warningMsg('请输入原密码')
if(!this.passwordForm.newPassword) return util.warningMsg('请输入新密码')
if(!this.passwordForm.reNewPassword) return util.warningMsg('请确认新密码')
if(this.passwordForm.newPassword.length < 6 || this.passwordForm.reNewPassword.length < 6) return util.warningMsg('请输入6位数以上的密码')
if(this.passwordForm.newPassword !== this.passwordForm.reNewPassword) return util.warningMsg('输入的新密码不一致，请重新确认')
if(this.passwordForm.password === this.passwordForm.newPassword) return util.warningMsg('原密码跟新密码不能一致')
let data = this.passwordForm let data = this.passwordForm
data.accountId = this.id data.accountId = this.id
this.$post(this.api.examinePassword,data).then(res => { this.$post(this.api.examinePassword, data).then(res => {
util.successMsg('修改成功') util.successMsg('修改成功')
this.passwordVisible = false this.passwordVisible = false
}).catch(err => {}) }).catch(err => { })
}, },
closePassword() { closePassword() {
this.passwordForm = { this.passwordForm = {
password: '', password: '',
newPassword: '', newPassword: '',
reNewPassword: '' reNewPassword: ''
} }
},
}, },
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

197
src/layouts/navbar/index.vue
Unescape View File

@ -7,104 +7,104 @@
</template> </template>
<script> <script>
import { mapState,mapActions } from 'vuex' import { mapState, mapActions } from 'vuex'
import addRoutes from '@/libs/route/addRoutes' import addRoutes from '@/libs/route/addRoutes'
import Setting from '@/setting' import Setting from '@/setting'
import util from '@/libs/util' import util from '@/libs/util'
export default { export default {
data() { data() {
return { return {
managerStr: this.$route.query.mg, managerStr: this.$route.query.mg,
isManager: false, isManager: false,
active: this.$route.path, active: this.$route.path,
defaultMenus: [], defaultMenus: [],
// 前台菜单 // 前台菜单
dataMenu: [{ dataMenu: [{
index: '/index/list', index: '/index/list',
title: '首页' title: '首页'
},{ }, {
index: '/data/list', index: '/data/list',
title: '数据' title: '数据'
}], }],
// 后台菜单（下面要根据获取到的该角色拥有的权限来显示哪些菜单） // 后台菜单（下面要根据获取到的该角色拥有的权限来显示哪些菜单）
managerMenus: [ managerMenus: [
{ {
index: '/stat/list', index: '/stat/list',
title: '数据统计' title: '数据统计'
},{ }, {
index: '/user/list', index: '/user/list',
title: '用户管理' title: '用户管理'
},{ }, {
index: '/role/list', index: '/role/list',
title: '角色权限' title: '角色权限'
}
],
menus: [],
actives: {}
};
},
computed: {
...mapState('auth', [
'routes'
])
},
watch: {
'$route'(to,from) {
let actives = this.actives
for(let i in this.actives){
if(actives[i].includes(this.$route.name)) this.active = `/${i}/list`
}
this.active = this.$route.path
} }
}, ],
mounted() { menus: [],
if(util.local.get(Setting.tokenKey)){// 如果是登录状态 actives: {}
this.getPer() };
if(this.managerStr && atob(decodeURI(this.managerStr)) === 'true'){ },
this.isManager = true computed: {
this.setManager(false) ...mapState('auth', [
} 'routes'
}else{ ])
this.menus = this.defaultMenus },
watch: {
'$route'(to, from) {
let actives = this.actives
for (let i in this.actives) {
if (actives[i].includes(this.$route.name)) this.active = `/${i}/list`
}
this.active = this.$route.path
}
},
mounted() {
if (util.local.get(Setting.tokenKey)) {// 如果是登录状态
this.getPer()
if (this.managerStr && atob(decodeURI(this.managerStr)) === 'true') {
this.isManager = true
this.setManager(false)
}
} else {
this.menus = this.defaultMenus
}
},
methods: {
...mapActions('user', [
'setManager'
]),
initMenu() {
if (this.isManager) {// 该值为true，则表示当前是在后台（是否是后台是通过url上面的managerStr来判断的）
this.defaultMenus = this.managerMenus
if (Setting.dynamicRoute) {
let routes = this.routes
let menus = []
this.defaultMenus.map(e => {
routes.find(n => n.name == e.index) && menus.push(e)
})
this.menus = menus
} else {
this.menus = this.defaultMenus
} }
} else {
// 如果不是在后台,则显示默认的菜单和数据两个菜单
this.menus = [...this.defaultMenus, ...this.dataMenu]
}
}, },
methods: { jump(item) {
...mapActions('user', [ this.active = item.index
'setManager' this.$router.push(item.index).catch(err => { })
]), },
initMenu(){ // 获取权限列表
if(this.isManager){// 该值为true，则表示当前是在后台（是否是后台是通过url上面的managerStr来判断的） getPer() {
this.defaultMenus = this.managerMenus this.$get(`${this.api.getPermissions}?platformId=${Setting.platformId}`).then(res => {
if(Setting.dynamicRoute){ let routes = res.permissionMenu[0].children
let routes = this.routes Setting.dynamicRoute && addRoutes(routes)
let menus = [] this.initMenu()
this.defaultMenus.map(e => { }).catch(err => {
routes.find(n => n.name == e.index) && menus.push(e) this.menus = this.defaultMenus
}) })
this.menus = menus },
}else{ }
this.menus = this.defaultMenus
}
}else{
// 如果不是在后台,则显示默认的菜单和数据两个菜单
this.menus = [...this.defaultMenus,...this.dataMenu]
}
},
jump(item){
this.active = item.index
this.$router.push(item.index).catch(err => {})
},
// 获取权限列表
getPer(){
this.$get(`${this.api.getPermissions}?platformId=${Setting.platformId}`).then(res => {
let routes = res.permissionMenu[0].children
Setting.dynamicRoute && addRoutes(routes)
this.initMenu()
}).catch(err => {
this.menus = this.defaultMenus
})
},
}
}; };
</script> </script>
@ -112,18 +112,19 @@ export default {
.nav{ .nav{
position: absolute; position: absolute;
top: 0; top: 0;
left: 50%; left: 250px;
transform: translateX(-50%);
display: flex; display: flex;
li{ li{
padding: 0 25px; padding: 0 15px;
margin: 0 20px;
font-size: 16px; font-size: 16px;
line-height: 70px; line-height: 66px;
color: #0d0d0d; color: #3F3F3F;
cursor: pointer; cursor: pointer;
border-bottom: 4px solid transparent;
&.active{ &.active{
color: #fff; color: #0076FF;
background-color: #568df2; border-bottom-color: #0070FF;
} }
} }
} }

643
src/pages/data/list/index.vue
Unescape View File

@ -181,340 +181,340 @@ import Setting from '@/setting'
let startTimeLimit = '' let startTimeLimit = ''
let endTimeLimit = '' let endTimeLimit = ''
export default { export default {
data() { data() {
return { return {
that: this, that: this,
token: util.local.get(Setting.tokenKey), token: util.local.get(Setting.tokenKey),
typeId: this.$route.query.typeId, // 从首页跳转过来传的分类id typeId: this.$route.query.typeId, // 从首页跳转过来传的分类id
typeList: [], typeList: [],
defaultType: '', defaultType: '',
defaultOpenType: [], defaultOpenType: [],
introduce: '', introduce: '',
dataSource: '', dataSource: '',
keyword: '', keyword: '',
search:'', search: '',
listData: [], listData: [],
listDataAll: [], listDataAll: [],
searchListData: [], searchListData: [],
page: 1, page: 1,
pageSize: 10, pageSize: 10,
total: 0, total: 0,
previewHead: [], previewHead: [],
previewData: [], previewData: [],
downloadVisible: false, downloadVisible: false,
curRow: {}, curRow: {},
checkAllFields: false, checkAllFields: false,
fields: [], fields: [],
fieldsList: [], fieldsList: [],
startTime: '', startTime: '',
endTime: '', endTime: '',
startTimeLimit: '', startTimeLimit: '',
startTimeDisabled: false, startTimeDisabled: false,
endTimeLimit: '', endTimeLimit: '',
endTimeDisabled: false, endTimeDisabled: false,
timeDefault: '', timeDefault: '',
timeOptions: { timeOptions: {
disabledDate(time) { disabledDate(time) {
return time.getTime() < startTimeLimit || time.getTime() > endTimeLimit return time.getTime() < startTimeLimit || time.getTime() > endTimeLimit
}, },
}, },
frequency: '', frequency: '',
frequencyList: [ frequencyList: [
{ {
id: 1, id: 1,
name: '日频' name: '日频'
},{ }, {
id: 2, id: 2,
name: '周频' name: '周频'
},{ }, {
id: 3, id: 3,
name: '月频' name: '月频'
},{ }, {
id: 4, id: 4,
name: '季频' name: '季频'
},{ }, {
id: 5, id: 5,
name: '年频' name: '年频'
}, },
], ],
currentRow: null, currentRow: null,
searchTimer:null searchTimer: null
}
},
computed: {
...mapState('user', [
'schoolId'
]),
},
watch: {
keyword: function(val) {
clearTimeout(this.searchTimer)
if (!this.rendered) {
this.searchTimer = setTimeout(() => {
this.initData()
}, 500)
}
this.rendered = false
},
},
mounted() {
this.getType()
// 如果是从首页点下载按钮跳转过来的,就直接显示下载弹框
if (this.$route.query.download) {
this.download({
id: this.$route.query.id,
name: this.$route.query.name,
showName: this.$route.query.showName,
})
}
},
methods: {
getType() {
// 获取分类
this.$post(this.api.getTableByClassification).then(res => {
let typeId = this.typeId // 取得传值的id
let introduce = ''// 对应股票的介绍，规则为无children则取上级
let dataSource = '' // 数据来源，同上
let action
// 取得选中的那一栏
function actionId(arr) {//传入res
arr && arr.map((e, i) => {
e.id = String(e.id)
if (!i) {
// 获取介绍和来源
if (e.introduce) introduce = e.introduce
if (e.dataSource) dataSource = e.dataSource
if (!action) action = e.children[0].children.length ? String(e.children[0].children[0].id) : String(e.children[0].id)
}
if (typeId && e.id == typeId) {// 若id匹配
action = String(e.id)
if (e.children.length) {// 若有下级
if (!e.children[0].children.length) {// 找到下级的下级若无子级，则赋值勾选
action = String(e.children[0].id)
} else {// 直接赋值
action = String(e.children[0].children[0].id)
}
}
} else if (e.children.length) {// id不匹配，递归找
actionId(e.children)
}
})
} }
this.typeList = res
actionId(res)
this.defaultType = action
this.introduce = introduce
this.dataSource = dataSource
this.getData()
}).catch(res => { })
}, },
computed: { getData() {
...mapState('user', [ this.$post(`${this.api.getIdQueryTable}?categoryId=${this.defaultType}&showName=${this.keyword}&pageNum=${this.page}&pageSize=${this.pageSize}&updateTime=`).then(res => {
'schoolId' this.listData = res.pageList.records
]), this.total = res.pageList.total
// 默认显示第一条数据的字段
this.listData.length && this.preview(this.listData[0], 1)
}).catch(res => { })
}, },
watch:{ initData() {
keyword: function(val) { this.page = 1
clearTimeout(this.searchTimer) this.getData()
if(!this.rendered){
this.searchTimer = setTimeout(() => {
this.initData()
},500)
}
this.rendered = false
},
}, },
mounted() { handleCurrentChange(val) {
this.getType() this.page = val
// 如果是从首页点下载按钮跳转过来的,就直接显示下载弹框 this.$refs.table.clearSelection()
if(this.$route.query.download){ this.getData()
this.download({
id: this.$route.query.id,
name: this.$route.query.name,
showName: this.$route.query.showName,
})
}
}, },
methods: { // 分类展开及点击回调
getType(){ selectType(index, indexPath) {
// 获取分类 let introduce = ''
this.$post(this.api.getTableByClassification).then(res => { let dataSource = ''
let typeId = this.typeId // 取得传值的id this.keyword = ''
let introduce = ''// 对应股票的介绍，规则为无children则取上级 let list = this.typeList
let dataSource = '' // 数据来源，同上 let select = ''
let action function handleData(data) {
// 取得选中的那一栏 data.map((n, i) => {
function actionId(arr){//传入res // 匹配到点击的分类，默认展开子级第一个分类
arr && arr.map((e, i) => { if (n.id == index) {
e.id = String(e.id) if (n.introduce) introduce = n.introduce
if (!i) { if (n.dataSource) dataSource = n.dataSource
// 获取介绍和来源 if (!select) select = n.children.length ? (n.children[0].children.length ? n.children[0].children[0].id : n.children[0].id) : n.id
if (e.introduce) introduce = e.introduce } else {
if (e.dataSource) dataSource = e.dataSource handleData(n.children)
if (!action) action = e.children[0].children.length ? String(e.children[0].children[0].id) : String(e.children[0].id) }
} })
if(typeId && e.id == typeId) {// 若id匹配 }
action = String(e.id) handleData(list)
if(e.children.length){// 若有下级 if (!introduce) introduce = list.find(n => n.id == indexPath[0]).introduce
if(!e.children[0].children.length){// 找到下级的下级若无子级，则赋值勾选 if (!dataSource) dataSource = list.find(n => n.id == indexPath[0]).dataSource
action = String(e.children[0].id) this.defaultType = select
}else{// 直接赋值 this.introduce = introduce
action = String(e.children[0].children[0].id) this.dataSource = dataSource
} this.previewHead = []
} this.previewData = []
}else if(e.children.length){// id不匹配，递归找 this.initData()
actionId(e.children) },
} previewCurrentChange(val) {
}) this.currentRow = val
} },
this.typeList = res preview(row, isDefault) {
actionId(res) this.$get(`${this.api.previewData}?tableName=${row.name}&tableId=${row.id}`).then(res => {
this.defaultType = action // 查询次数+1
this.introduce = introduce this.$post(this.api.saveRecord, {
this.dataSource = dataSource tableId: row.id,
this.getData() type: 2,
}).catch(res => {}) }).then(res => { }).catch(res => { })
},
getData(){
this.$post(`${this.api.getIdQueryTable}?categoryId=${this.defaultType}&showName=${this.keyword}&pageNum=${this.page}&pageSize=${this.pageSize}&updateTime=`).then(res => {
this.listData = res.pageList.records
this.total = res.pageList.total
// 默认显示第一条数据的字段
this.listData.length && this.preview(this.listData[0],1)
}).catch(res => {})
},
initData(){
this.page = 1
this.getData()
},
handleCurrentChange(val) {
this.page = val
this.$refs.table.clearSelection()
this.getData()
},
// 分类展开及点击回调
selectType(index,indexPath){
let introduce = ''
let dataSource = ''
this.keyword = ''
let list = this.typeList
let select = ''
function handleData(data) {
data.map((n, i) => {
// 匹配到点击的分类，默认展开子级第一个分类
if(n.id == index){
if (n.introduce) introduce = n.introduce
if (n.dataSource) dataSource = n.dataSource
if (!select) select = n.children.length ? (n.children[0].children.length ? n.children[0].children[0].id : n.children[0].id) : n.id
}else{
handleData(n.children)
}
})
}
handleData(list)
if(!introduce) introduce = list.find(n => n.id == indexPath[0]).introduce
if(!dataSource) dataSource = list.find(n => n.id == indexPath[0]).dataSource
this.defaultType = select
this.introduce = introduce
this.dataSource = dataSource
this.previewHead = []
this.previewData = []
this.initData()
},
previewCurrentChange(val){
this.currentRow = val
},
preview(row,isDefault){
this.$get(`${this.api.previewData}?tableName=${row.name}&tableId=${row.id}`).then(res => {
// 查询次数+1
this.$post(this.api.saveRecord,{
tableId: row.id,
type: 2,
}).then(res => {}).catch(res => {})
let comment = res.comment
let previewHead = []
comment.map(n => {
// id和操作时间不用显示
n.field != 'id' && n.field != 'operation_time' && previewHead.push(n)
})
this.previewHead = previewHead
let data = res.data let comment = res.comment
data.map(n => { let previewHead = []
for(let i in n){ comment.map(n => {
// 如果是以+0000结尾的,就表明这个是时间,则转化为正常的时间格式 // id和操作时间不用显示
if(typeof n[i] == 'string' && n[i].endsWith('+0000')) n[i] = util.formatDate('yyyy-MM-dd hh:mm:ss',new Date(n[i])) n.field != 'id' && n.field != 'operation_time' && previewHead.push(n)
} })
}) this.previewHead = previewHead
this.previewData = data
// 如果不是加载完数据默认显示的情况,就滚动到页面可视位置
isDefault || this.$nextTick(() => {
document.querySelector('#previewTable').scrollIntoView()
})
}).catch(res => {})
},
checkAllFieldsChange(val) {
this.fields = val ? this.fieldsList.map(n => n.comment) : []
},
download(row){
// 查询是否购买了该数据,只有购买了才能下载
this.$get(`${this.api.isDownload}`,{
tableId: row.id,
schoolId: this.schoolId,
}).then(res => {
this.curRow = row
this.downloadVisible = true
// 查询有数据的时间段,接口会返回开始时间和结束时间,但也有写数据是没有这两个时间的 let data = res.data
this.$get(`${this.api.getTableTime}`,{ data.map(n => {
tableId: row.id for (let i in n) {
}).then(res => { // 如果是以+0000结尾的,就表明这个是时间,则转化为正常的时间格式
let list = res.message if (typeof n[i] == 'string' && n[i].endsWith('+0000')) n[i] = util.formatDate('yyyy-MM-dd hh:mm:ss', new Date(n[i]))
if(list.startTime){ }
startTimeLimit = new Date(list.startTime).getTime() })
}else{ this.previewData = data
// 如果没有开始时间,则禁止选择开始时间 // 如果不是加载完数据默认显示的情况,就滚动到页面可视位置
this.startTimeDisabled = true isDefault || this.$nextTick(() => {
} document.querySelector('#previewTable').scrollIntoView()
if(list.endTime){ })
endTimeLimit = new Date(list.endTime).getTime()
this.timeDefault = list.endTime
}else{
// 如果没有结束时间,则禁止选择结束时间
this.endTimeDisabled = true
}
}).catch(res => {})
this.$get(`${this.api.previewData}?tableName=${row.name}&tableId=${row.id}`).then(res => { }).catch(res => { })
let comment = res.comment },
let fieldsList = [] checkAllFieldsChange(val) {
comment.map(n => { this.fields = val ? this.fieldsList.map(n => n.comment) : []
n.field != 'id' && n.field != 'operation_time' && fieldsList.push(n) },
}) download(row) {
this.fieldsList = fieldsList // 查询是否购买了该数据,只有购买了才能下载
}).catch(res => {}) this.$get(`${this.api.isDownload}`, {
}).catch(res => {}) tableId: row.id,
}, schoolId: this.schoolId,
closeDownload(){ }).then(res => {
this.checkAllFields = false this.curRow = row
this.fields = [] this.downloadVisible = true
this.startTime = ''
this.endTime = ''
this.frequency = ''
this.$router.push('/data').catch(err => {})
},
confirmDown(){
let fields = this.fields
if(!fields.length) return util.warningMsg('请选择字段')
if(!this.startTime) return util.warningMsg('请选择开始时间')
if(!this.endTime) return util.warningMsg('请选择结束时间')
if(!this.frequency) return util.warningMsg('请选择数据频率')
let invalid = false
if(this.startTime && this.endTime){ // 查询有数据的时间段,接口会返回开始时间和结束时间,但也有写数据是没有这两个时间的
let startTime = new Date(this.startTime) this.$get(`${this.api.getTableTime}`, {
let endTime = new Date(this.endTime) tableId: row.id
let frequency = this.frequency }).then(res => {
let list = res.message
// 只要选择的不是日频,则要判断选择的日期区间有没有包含这段频率对应的完整交易日段 if (list.startTime) {
// 比如选的是周频,则判断选择的时间区间有没有包含一段完整的星期交易日,即星期1~5, startTimeLimit = new Date(list.startTime).getTime()
// 选的是月频的话,则判断选择的时间区间有没有包含一个完整的月份,即30天;年份同理 } else {
if(frequency == 2){ // 如果没有开始时间,则禁止选择开始时间
let week = [] this.startTimeDisabled = true
while(startTime <= endTime){ }
let weekNum = startTime.getDay() if (list.endTime) {
if(weekNum == 0) weekNum = 7 endTimeLimit = new Date(list.endTime).getTime()
week.push(weekNum) this.timeDefault = list.endTime
startTime.setTime(startTime.getTime() + 86400000) } else {
} // 如果没有结束时间,则禁止选择结束时间
// 如果没有包含1~5,则提示请选择完整区间,下面同理 this.endTimeDisabled = true
for(let i = 1;i <= 5;i++){ }
if(!week.includes(i)){ }).catch(res => { })
invalid = true
break this.$get(`${this.api.previewData}?tableName=${row.name}&tableId=${row.id}`).then(res => {
} let comment = res.comment
} let fieldsList = []
}else if(frequency == 3){ comment.map(n => {
if((endTime.getTime() - startTime.getTime()) / 86400000 < 30) invalid = true n.field != 'id' && n.field != 'operation_time' && fieldsList.push(n)
}else if(frequency == 4){ })
if((endTime.getTime() - startTime.getTime()) / 86400000 < 90) invalid = true this.fieldsList = fieldsList
}else if(frequency == 5){ }).catch(res => { })
if((endTime.getTime() - startTime.getTime()) / 86400000 < 365) invalid = true }).catch(res => { })
} },
closeDownload() {
this.checkAllFields = false
this.fields = []
this.startTime = ''
this.endTime = ''
this.frequency = ''
this.$router.push('/data').catch(err => { })
},
confirmDown() {
let fields = this.fields
if (!fields.length) return util.warningMsg('请选择字段')
if (!this.startTime) return util.warningMsg('请选择开始时间')
if (!this.endTime) return util.warningMsg('请选择结束时间')
if (!this.frequency) return util.warningMsg('请选择数据频率')
let invalid = false
if (this.startTime && this.endTime) {
let startTime = new Date(this.startTime)
let endTime = new Date(this.endTime)
let frequency = this.frequency
// 只要选择的不是日频,则要判断选择的日期区间有没有包含这段频率对应的完整交易日段
// 比如选的是周频,则判断选择的时间区间有没有包含一段完整的星期交易日,即星期1~5,
// 选的是月频的话,则判断选择的时间区间有没有包含一个完整的月份,即30天;年份同理
if (frequency == 2) {
let week = []
while (startTime <= endTime) {
let weekNum = startTime.getDay()
if (weekNum == 0) weekNum = 7
week.push(weekNum)
startTime.setTime(startTime.getTime() + 86400000)
}
// 如果没有包含1~5,则提示请选择完整区间,下面同理
for (let i = 1; i <= 5; i++) {
if (!week.includes(i)) {
invalid = true
break
} }
}
if(invalid) return util.warningMsg('请选择完整区间') } else if (frequency == 3) {
if ((endTime.getTime() - startTime.getTime()) / 86400000 < 30) invalid = true
} else if (frequency == 4) {
if ((endTime.getTime() - startTime.getTime()) / 86400000 < 90) invalid = true
} else if (frequency == 5) {
if ((endTime.getTime() - startTime.getTime()) / 86400000 < 365) invalid = true
}
}
let newFields = [] if (invalid) return util.warningMsg('请选择完整区间')
let fieldsList = this.fieldsList
fields.map(n => {
newFields.push(fieldsList.find(e => e.comment == n).field)
})
let msgObj = util.successMsg('数据正在生成中，请稍等片刻，生成后会自动下载，您可以先访问其他页面。',5000)
this.downloadVisible = false
let startTime = this.startTime ? this.startTime : '' let newFields = []
let endTime = this.endTime ? this.endTime : '' let fieldsList = this.fieldsList
let frequency = this.frequency fields.map(n => {
axios.get(`${this.api.downloadData}?tableName=${this.curRow.name}&table_id=${this.curRow.id}&fields=${newFields.join()}&startTime=${startTime}&endTime=${endTime}&frequency=${frequency}`,{ newFields.push(fieldsList.find(e => e.comment == n).field)
headers: { })
token: this.token let msgObj = util.successMsg('数据正在生成中，请稍等片刻，生成后会自动下载，您可以先访问其他页面。', 5000)
}, this.downloadVisible = false
responseType: 'blob'
}).then((res) => {
msgObj.close()
if(res.data.type != 'multipart/form-data') return util.warningMsg('数据总数为零！')
// 统一调用该方法去下载excel
util.downloadFileDirect(`${this.curRow.showName}.xls`,new Blob([res.data]))
// 下载记录 let startTime = this.startTime ? this.startTime : ''
this.$get(`${this.api.downloadRecord}?tableId=${this.curRow.id}&fields=${newFields.join()}` + (startTime ? `&startTime=${startTime}` : '') + (endTime ? `&endTime=${endTime}` : '') + `&frequency=${frequency}`).then(res => {}).catch(res => {}) let endTime = this.endTime ? this.endTime : ''
let frequency = this.frequency
axios.get(`${this.api.downloadData}?tableName=${this.curRow.name}&table_id=${this.curRow.id}&fields=${newFields.join()}&startTime=${startTime}&endTime=${endTime}&frequency=${frequency}`, {
headers: {
token: this.token
},
responseType: 'blob'
}).then((res) => {
msgObj.close()
if (res.data.type != 'multipart/form-data') return util.warningMsg('数据总数为零！')
// 统一调用该方法去下载excel
util.downloadFileDirect(`${this.curRow.showName}.xls`, new Blob([res.data]))
// 下载次数+1 // 下载记录
this.$post(this.api.saveRecord,{ this.$get(`${this.api.downloadRecord}?tableId=${this.curRow.id}&fields=${newFields.join()}` + (startTime ? `&startTime=${startTime}` : '') + (endTime ? `&endTime=${endTime}` : '') + `&frequency=${frequency}`).then(res => { }).catch(res => { })
tableId: this.curRow.id,
type: 1, // 下载次数+1
}).then(res => {}).catch(res => {}) this.$post(this.api.saveRecord, {
}).catch(res => { tableId: this.curRow.id,
msgObj.close() type: 1,
}) }).then(res => { }).catch(res => { })
} }).catch(res => {
msgObj.close()
})
} }
}
}; };
</script> </script>
@ -526,10 +526,8 @@ export default {
.menu{ .menu{
width: 200px; width: 200px;
border-radius: 8px;
overflow: hidden; overflow: hidden;
&>.el-menu-item,.el-submenu__title{ &>.el-menu-item,.el-submenu__title{
background-color: rgba(228,237,255,.4);
span{ span{
font-size: 15px; font-size: 15px;
color: #3381d2; color: #3381d2;
@ -540,14 +538,13 @@ export default {
} }
.el-submenu.is-active{ .el-submenu.is-active{
.el-submenu__title{ .el-submenu__title{
background-color: rgba(147,184,255,.3);
&+.el-menu .el-submenu__title{ &+.el-menu .el-submenu__title{
background-color: rgba(147,184,255,.15); background-color: rgba(147,184,255,.15);
} }
} }
} }
.el-menu-item.is-active{ .el-menu-item.is-active{
color: $main-color; background-color: #0070FF;
} }
.level-6 { .level-6 {
padding-right: 0; padding-right: 0;

7
src/styles/common.scss
Unescape View File

@ -16,7 +16,7 @@
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
width: 5px; width: 5px;
border-radius: 6px; border-radius: 6px;
background: rgba(86,141,242,.7); background: rgba(173,173,173,.7);
} }
.required{ .required{
@ -72,7 +72,6 @@
position: relative; position: relative;
padding: 24px 10px; padding: 24px 10px;
background-color: #fff; background-color: #fff;
border-radius: 8px;
.page-content{ .page-content{
padding: 26px 36px 0; padding: 26px 36px 0;
.tool{ .tool{
@ -163,7 +162,7 @@
} }
.el-table{ .el-table{
border-radius: 8px; border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.06);
border-bottom: 0; border-bottom: 0;
.cell{ .cell{
@ -181,7 +180,7 @@
th{ th{
background: $--color-primary !important; background: $--color-primary !important;
.cell{ .cell{
color: #fff; color: #222326;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
.el-checkbox{ .el-checkbox{

2
src/styles/default/index.scss
Unescape View File

@ -1,6 +1,6 @@
/* 改变主题色变量 */ /* 改变主题色变量 */
$--color-primary: #568DF2; $--color-primary: #E6F0FF;
/* 改变 icon 字体路径变量，必需 */ /* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts'; $--font-path: '~element-ui/lib/theme-chalk/fonts';

Write Preview
Loading…
Cancel
Save