Skip to content

D
document-management
Commit af2a94a2 by lxyang
Options

feat：提交

parent ea6c5f86
Showing with 917 additions and 1040 deletions
src/assets/icons/svg/search-new.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M6.24412,1.25 L11.707297,1.25 C12.0429629,1.25 12.364524,1.38500024 12.5995946,1.62461143 L17.1424186,6.25518441 C17.3714709,6.48866117 17.4998891,6.80261493 17.5001204,7.12968767 L17.5057602,15.0971675 C17.5057602,15.8279705 16.8556941,16.25 16.26158,16.25 L6.2499404,16.25 C5.65590262,16.25 5.00593036,15.8285213 5.00576079,15.0978959 L4.9999404,2.4023889 C4.9999404,1.67158462 5.65000713,1.25 6.24412,1.25 Z M6.25571609,15 L16.2556911,15 L16.2503946,7.51594365 L11.2500447,7.51594365 L11.2500447,2.5 L6.2499851,2.5 L6.25571609,15 Z M15.4018772,6.26594365 L12.5000453,6.26594365 L12.5000453,3.30806032 L15.4018772,6.26594365 Z M2.5,17.5159454 C2.5,18.2063031 3.05964559,18.7659442 3.75,18.7659442 L13.75,18.7659442 L13.75,17.5159442 L3.75,17.5159454 L3.75,6.25001669 L2.5,6.25001669 L2.5,17.5159454 Z" id="file-copy"></path>
</svg>
\ No newline at end of file
src/assets/icons/svg/search.svg
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M124.884 109.812L94.256 79.166c-.357-.357-.757-.629-1.129-.914a50.366 50.366 0 0 0 8.186-27.59C101.327 22.689 78.656 0 50.67 0 22.685 0 0 22.688 0 50.663c0 27.989 22.685 50.663 50.656 50.663 10.186 0 19.643-3.03 27.6-8.201.286.385.557.771.9 1.114l30.628 30.632a10.633 10.633 0 0 0 7.543 3.129c2.728 0 5.457-1.043 7.543-3.115 4.171-4.157 4.171-10.915.014-15.073M50.671 85.338C31.557 85.338 16 69.78 16 50.663c0-19.102 15.557-34.661 34.67-34.661 19.115 0 34.657 15.559 34.657 34.675 0 19.102-15.557 34.661-34.656 34.661"/></svg> <?xml version="1.0" encoding="UTF-8"?>
\ No newline at end of file <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M6.24412,1.25 L11.707297,1.25 C12.0429629,1.25 12.364524,1.38500024 12.5995946,1.62461143 L17.1424186,6.25518441 C17.3714709,6.48866117 17.4998891,6.80261493 17.5001204,7.12968767 L17.5057602,15.0971675 C17.5057602,15.8279705 16.8556941,16.25 16.26158,16.25 L6.2499404,16.25 C5.65590262,16.25 5.00593036,15.8285213 5.00576079,15.0978959 L4.9999404,2.4023889 C4.9999404,1.67158462 5.65000713,1.25 6.24412,1.25 Z M6.25571609,15 L16.2556911,15 L16.2503946,7.51594365 L11.2500447,7.51594365 L11.2500447,2.5 L6.2499851,2.5 L6.25571609,15 Z M15.4018772,6.26594365 L12.5000453,6.26594365 L12.5000453,3.30806032 L15.4018772,6.26594365 Z M2.5,17.5159454 C2.5,18.2063031 3.05964559,18.7659442 3.75,18.7659442 L13.75,18.7659442 L13.75,17.5159442 L3.75,17.5159454 L3.75,6.25001669 L2.5,6.25001669 L2.5,17.5159454 Z" id="file-copy"></path>
</svg>
\ No newline at end of file
src/assets/icons/svg/server-new.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Bace基础/3.Icon图标/其他/server/white</title>
<path d="M5,6.5625 L5,5.3125 L8.75,5.3125 L8.75,6.5625 L5,6.5625 Z M2.50030518,2.5 L17.5003052,2.5 C17.8454173,2.5 18.1252122,2.77971875 18.1253052,3.1248305 L18.1264925,8.74985218 C18.1266618,9.09509659 17.8467369,9.37502205 17.5014925,9.37502205 L2.50149243,9.37502205 C2.15638068,9.37502205 1.87658564,9.09530342 1.87649202,8.75019133 L1.87530518,3.1251698 C1.87530518,2.77992561 2.15506099,2.5 2.50030518,2.5 Z M3.12547475,3.75 L16.8754745,3.75 L16.8763232,8.12502205 L3.12632248,8.12502205 L3.12547475,3.75 Z M8.7501353,14.6875 L8.7501353,13.4375 L5.0001356,13.4375 L5.0001356,14.6875 L8.7501353,14.6875 Z M2.50166148,10.6250173 L17.5016618,10.6250173 C17.8468394,10.6250173 18.1266618,10.9048396 18.1266618,11.2500173 L18.1266618,16.875 C18.1266618,17.2201777 17.8468394,17.5 17.5016618,17.5 L2.50166193,17.5 C2.15648398,17.5 1.87666151,17.2201777 1.87666151,16.875 L1.87666151,11.2500173 C1.87666151,10.904839 2.15648357,10.6250173 2.50166148,10.6250173 Z M3.12666148,11.8750173 L16.8766618,11.8750173 L16.8766618,16.25 L3.12666148,16.25 L3.12666148,11.8750173 Z" id="server"></path>
</svg>
\ No newline at end of file
src/assets/icons/svg/server.svg
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1547360688278" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M890 120H134a70 70 0 0 0-70 70v500a70 70 0 0 0 70 70h756a70 70 0 0 0 70-70V190a70 70 0 0 0-70-70z m-10 520a40 40 0 0 1-40 40H712V448a40 40 0 0 0-80 0v232h-80V368a40 40 0 0 0-80 0v312h-80V512a40 40 0 0 0-80 0v168H184a40 40 0 0 1-40-40V240a40 40 0 0 1 40-40h656a40 40 0 0 1 40 40zM696 824H328a40 40 0 0 0 0 80h368a40 40 0 0 0 0-80z" fill="#bfbfbf" p-id="6718"></path></svg> <?xml version="1.0" encoding="UTF-8"?>
\ No newline at end of file <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Bace基础/3.Icon图标/其他/server/white</title>
<g id="全局" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="icon" transform="translate(-422.000000, -172.000000)">
<g id="1.Bace基础/3.Icon图标/其他/server/white" transform="translate(422.000000, 172.000000)">
<path d="M0,0 L20,0 L20,20 L0,20 Z" id="server-(Background)"></path>
<path d="M5,6.5625 L5,5.3125 L8.75,5.3125 L8.75,6.5625 L5,6.5625 Z M2.50030518,2.5 L17.5003052,2.5 C17.8454173,2.5 18.1252122,2.77971875 18.1253052,3.1248305 L18.1264925,8.74985218 C18.1266618,9.09509659 17.8467369,9.37502205 17.5014925,9.37502205 L2.50149243,9.37502205 C2.15638068,9.37502205 1.87658564,9.09530342 1.87649202,8.75019133 L1.87530518,3.1251698 C1.87530518,2.77992561 2.15506099,2.5 2.50030518,2.5 Z M3.12547475,3.75 L16.8754745,3.75 L16.8763232,8.12502205 L3.12632248,8.12502205 L3.12547475,3.75 Z M8.7501353,14.6875 L8.7501353,13.4375 L5.0001356,13.4375 L5.0001356,14.6875 L8.7501353,14.6875 Z M2.50166148,10.6250173 L17.5016618,10.6250173 C17.8468394,10.6250173 18.1266618,10.9048396 18.1266618,11.2500173 L18.1266618,16.875 C18.1266618,17.2201777 17.8468394,17.5 17.5016618,17.5 L2.50166193,17.5 C2.15648398,17.5 1.87666151,17.2201777 1.87666151,16.875 L1.87666151,11.2500173 C1.87666151,10.904839 2.15648357,10.6250173 2.50166148,10.6250173 Z M3.12666148,11.8750173 L16.8766618,11.8750173 L16.8766618,16.25 L3.12666148,16.25 L3.12666148,11.8750173 Z" id="server" fill="#FFFFFF"></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/styles/index.scss
...@@ -122,7 +122,7 @@ aside { ...@@ -122,7 +122,7 @@ aside {
//main-container全局样式 //main-container全局样式
.app-container { .app-container {
padding: 20px; padding: 0;
} }
.components-container { .components-container {
......
src/assets/styles/sidebar.scss
...@@ -27,6 +27,9 @@ ...@@ -27,6 +27,9 @@
.scrollbar-wrapper { .scrollbar-wrapper {
overflow-x: hidden !important; overflow-x: hidden !important;
background: #fff;
padding-top: 16px;
border-right: 2px solid rgba(231, 231, 231, 1);
} }
.el-scrollbar__bar.is-vertical { .el-scrollbar__bar.is-vertical {
...@@ -39,7 +42,7 @@ ...@@ -39,7 +42,7 @@
&.has-logo { &.has-logo {
.el-scrollbar { .el-scrollbar {
height: calc(100% - 50px); height: calc(100% - 64px);
} }
} }
...@@ -54,7 +57,9 @@ ...@@ -54,7 +57,9 @@
} }
.svg-icon { .svg-icon {
margin-right: 16px; margin-right: 4px;
font-size: 18px;
vertical-align: middle;
} }
.el-menu { .el-menu {
...@@ -70,10 +75,33 @@ ...@@ -70,10 +75,33 @@
background-color: $menuHover !important; background-color: $menuHover !important;
} }
} }
.el-submenu__title {
padding: 0 !important;
height: 36px;
background: #0052D9 !important;
}
.is-active>.el-submenu__title { .is-active>.el-submenu__title {
padding: 0;
color: $subMenuActiveText !important; color: $subMenuActiveText !important;
} }
.menu-wrapper {
background: #fff;
.el-menu-item {
margin: 0 8px 4px 8px;
height: 36px;
line-height: 36px;
width: 192px;
border-radius: 3px;
padding: 0 16px;
color: rgba(0, 0, 0, 0.6000) !important;
background: #fff !important;
&:hover, &.is-active {
color: #fff !important;
background: #0052D9 !important;
}
}
}
& .nest-menu .el-submenu>.el-submenu__title, & .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item { & .el-submenu .el-menu-item {
......
src/assets/styles/variables.scss
...@@ -19,7 +19,7 @@ $menuHover:#263445; ...@@ -19,7 +19,7 @@ $menuHover:#263445;
$subMenuBg:#1f2d3d; $subMenuBg:#1f2d3d;
$subMenuHover:#001528; $subMenuHover:#001528;
$sideBarWidth: 200px; $sideBarWidth: 208px;
// the :export directive is the magic sauce for webpack // the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
......
src/layout/components/AppMain.vue
...@@ -38,7 +38,7 @@ export default { ...@@ -38,7 +38,7 @@ export default {
.hasTagsView { .hasTagsView {
.app-main { .app-main {
/* 84 = navbar + tags-view = 50 + 34 */ /* 84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 104px); min-height: calc(100vh - 64px);
} }
.fixed-header+.app-main { .fixed-header+.app-main {
......
src/layout/components/Navbar.vue
<template> <template>
<div class="navbar"> <div class="navbar">
<div class="menu-item active">智能文档监测</div>
<div class="menu-item" @click="hint('探真')">探真</div>
<div class="menu-item" @click="hint('微舆情')">微舆情</div>
<div class="icon"><img class="icon-img" src="../../assets/image/user-circle.png" alt=""></div>
<div class="icon"><img class="icon-img" src="../../assets/image/phone.png" alt=""></div>
<div class="icon"><img class="icon-img" src="../../assets/image/message.png" alt=""></div>
<!-- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> --> <!-- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> --> <!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> -->
...@@ -81,6 +87,12 @@ export default { ...@@ -81,6 +87,12 @@ export default {
toggleSideBar() { toggleSideBar() {
this.$store.dispatch('app/toggleSideBar') this.$store.dispatch('app/toggleSideBar')
}, },
hint(item) {
this.$message({
message: `${item}尽请期待！`,
type: 'warning'
});
},
async logout() { async logout() {
this.$confirm('确定注销并退出系统吗？', '提示', { this.$confirm('确定注销并退出系统吗？', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
...@@ -98,17 +110,40 @@ export default { ...@@ -98,17 +110,40 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.navbar { .navbar {
height: 50px; height: 64px;
padding: 0 32px 0 16px;
background: #2C2C2C;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0,21,41,.08); box-shadow: 0 1px 4px rgba(0,21,41,.08);
.icon {
float: right;
height: 22px;
margin: 21px 0 21px 24px;
cursor: pointer;
.icon-img {
height: 22px;
}
}
.menu-item {
margin: 12px 2px;
float: left;
font-size: 14px;
padding: 12px 24px;
color: rgba(255,255,255,0.55);
border-radius: 3px;
cursor: pointer;
&:hover, &.active {
background: #5E5E5E;
color: rgba(255,255,255,0.9);
}
}
.hamburger-container { .hamburger-container {
line-height: 46px; line-height: 64px;
height: 100%; height: 100%;
float: left; float: left;
cursor: pointer; cursor: pointer;
color: #fff;
transition: background .3s; transition: background .3s;
-webkit-tap-highlight-color:transparent; -webkit-tap-highlight-color:transparent;
......
src/layout/components/Sidebar/Logo.vue
...@@ -46,9 +46,9 @@ export default { ...@@ -46,9 +46,9 @@ export default {
.sidebar-logo-container { .sidebar-logo-container {
position: relative; position: relative;
width: 100%; width: 100%;
height: 50px; height: 64px;
line-height: 50px; line-height: 64px;
background: #2b2f3a; background: #2C2C2C;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
......
src/layout/components/TagsView/index.vue
<template> <template>
<div id="tags-view-container" class="tags-view-container"> <div id="tags-view-container" class="tags-view-container">
<scroll-pane ref="scrollPane" class="tags-view-wrapper"> <!-- <scroll-pane ref="scrollPane" class="tags-view-wrapper"> -->
<router-link <!-- <router-link
v-for="tag in visitedViews" v-for="tag in visitedViews"
ref="tag" ref="tag"
:key="tag.path" :key="tag.path"
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
{{ tag.title }} {{ tag.title }}
<span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" /> <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
</router-link> </router-link>
</scroll-pane> </scroll-pane> -->
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu"> <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
<li @click="refreshSelectedTag(selectedTag)">刷新页面</li> <li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
<li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前</li> <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前</li>
...@@ -26,11 +26,11 @@ ...@@ -26,11 +26,11 @@
</template> </template>
<script> <script>
import ScrollPane from './ScrollPane' // import ScrollPane from './ScrollPane'
import path from 'path' import path from 'path'
export default { export default {
components: { ScrollPane }, // components: { ScrollPane },
data() { data() {
return { return {
visible: false, visible: false,
......
src/layout/index.vue
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<div :class="{hasTagsView:needTagsView}" class="main-container"> <div :class="{hasTagsView:needTagsView}" class="main-container">
<div :class="{'fixed-header':fixedHeader}"> <div :class="{'fixed-header':fixedHeader}">
<navbar /> <navbar />
<tags-view v-if="needTagsView" /> <!-- <tags-view v-if="needTagsView" /> -->
</div> </div>
<app-main /> <app-main />
<right-panel v-if="showSettings"> <right-panel v-if="showSettings">
......
src/router/index.js
...@@ -69,14 +69,14 @@ export const constantRoutes = [ ...@@ -69,14 +69,14 @@ export const constantRoutes = [
{ {
path: '', path: '',
component: Layout, component: Layout,
name: '搜索', name: '搜索文档',
redirect: 'index', redirect: 'index',
children: [ children: [
{ {
path: 'index', path: 'index',
component: () => import('@/views/index'), component: () => import('@/views/index'),
name: '搜索', name: '搜索文档',
meta: { title: '搜索', icon: 'log', noCache: true, affix: true } meta: { title: '搜索文档', icon: 'search-new', noCache: true, affix: true }
} }
] ]
}, },
...@@ -113,7 +113,7 @@ export const constantRoutes = [ ...@@ -113,7 +113,7 @@ export const constantRoutes = [
component: Layout, component: Layout,
name: '文档管理', name: '文档管理',
meta: { meta: {
icon: 'system', icon: 'server-new',
title: '文档管理' title: '文档管理'
}, },
path: '/documentManagement', path: '/documentManagement',
...@@ -122,29 +122,34 @@ export const constantRoutes = [ ...@@ -122,29 +122,34 @@ export const constantRoutes = [
component: () => import('@/views/dataList/dashboard/index'), component: () => import('@/views/dataList/dashboard/index'),
meta: { meta: {
icon: '', icon: '',
title: '跟踪文档' title: '搜索文档详情'
}, },
name: 'tailAfter', name: 'tailAfter',
path: 'tailAfter' path: 'tailAfter',
hidden: true
}, },
{ {
component: () => import('@/views/system/customer/index'), component: () => import('@/views/system/customer/index'),
meta: { meta: {
icon: '', icon: '',
title: '任务列表' title: '跟踪文档'
}, },
name: 'taskList', name: 'taskList',
path: 'taskList' path: 'taskList',
} props: {
// { default: false
// component: () => import('@/views/dataList/product/index'), }
// meta: { },
// icon: '', {
// title: '客户投放数据' component: () => import('@/views/dataList/product/index'),
// }, meta: {
// name: 'Product', icon: '',
// path: 'Product' title: '跟踪文档详情'
// }, },
name: 'taskListDetails',
path: 'taskListDetails',
hidden: true
},
// { // {
// component: () => import('@/views/dataList/putIn/index'), // component: () => import('@/views/dataList/putIn/index'),
// meta: { // meta: {
......
src/views/dataList/dashboard/index.vue
<template> <template>
<div class="app-container"> <div class="app-container">
<el-input placeholder="例如：腾讯" @keyup.enter.native="searchDocument" v-model="search" class="input-with-select"> <div class="app-header">
<el-button slot="append" @click="searchDocument">搜索</el-button> <div class="search-logo"></div>
<el-input prefix-icon="el-icon-search" placeholder="例如：腾讯" @keyup.enter.native="searchDocument" v-model="search" class="input-with-select">
<el-button slot="append" @click="searchDocument">搜索文档</el-button>
</el-input> </el-input>
</div>
<div class="content"> <div class="content">
<div class="solid content-left scroll"> <div class="content-left scroll">
<div v-if="loadingLeft" class="content-right-content loading loading-left"> <div v-if="loadingLeft" class="content-right-content loading loading-left">
<div class="loading-div"> <div class="loading-div">
<i class="el-icon-loading loading-center"></i> <i class="el-icon-loading loading-center"></i>
...@@ -14,31 +17,24 @@ ...@@ -14,31 +17,24 @@
<div class="content-left-center scroll"> <div class="content-left-center scroll">
<div v-if="!listLeft.length && !loadingLeft" class="not-data">暂无数据</div> <div v-if="!listLeft.length && !loadingLeft" class="not-data">暂无数据</div>
<div class="left-content" v-for="(item, index) in listLeft" :key="index"> <div class="left-content" v-for="(item, index) in listLeft" :key="index">
<div class="left-content-title">{{item.media}}</div> <div class="left-content-title">
<div class="logo"><img src="../../../assets/image/juliang.png" alt="" class="logo-img"></div>
<span class="media text">{{item.media}}</span>
<span class="text">更新日期：{{item.data}}</span>
</div>
<div class="content-text-header"> <div class="content-text-header">
<a class="link" v-if="item.link" :href="item.link" target="_Blank">{{item.title}}</a> <a class="link" v-if="item.link" :href="item.link" target="_blank">{{item.title}}</a>
<span v-else>{{item.title}}</span> <span v-else>{{item.title}}</span>
</div> </div>
<div v-for="(items, index) in item.content" :key="index" class="content-text">{{items}}</div> <p v-for="(items, index) in item.content" :key="index" class="content-text" v-html="items.contentText"></p>
</div>
<div class="add-more" v-if="loadMoreLeft && listLeft.length" @click="seatchInitLeft"><span v-if="loadingLeft">加载中</span><span v-else>加载更多</span></div>
</div>
</div>
<div class="solid content-right">
<div class="change">近期变化</div>
<div v-if="loadingRight" class="content-right-content loading">
<div class="loading-div">
<i class="el-icon-loading loading-center"></i>
<div>加载中...</div>
</div> </div>
</div> <pagination v-show="queryParamsLeft.pageContent>0 && loadMoreLeft && listLeft.length"
<div class="content-right-content scroll"> :total="queryParamsLeft.pageContent"
<div v-if="!listRight.length && !loadingRight" class="not-data">暂无数据</div> :page.sync="queryParamsLeft.pageNo"
<div class="right-content" v-for="(item, index) in listRight" :key="index"> :limit.sync="queryParamsLeft.pageSize"
<div class="content-text-header">{{item.media}}</div> layout="total, prev, pager, next"
<div class="content-text" v-for="(items, index) in item.content" :key="index">{{index + 1}}. {{items}}</div> @pagination="seatchInitLeft" />
</div> <!-- <div class="add-more" v-if="loadMoreLeft && listLeft.length" @click="seatchInitLeft"><span v-if="loadingLeft">加载中</span><span v-else>加载更多</span></div> -->
<div class="add-more" v-if="loadMoreRight && listRight.length" @click="seatchInitRight"><span v-if="loadingRight">加载中</span><span v-else>加载更多</span></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -52,27 +48,20 @@ export default { ...@@ -52,27 +48,20 @@ export default {
return { return {
search: '', search: '',
loadingLeft: false, loadingLeft: false,
loadingRight: false,
loadMoreLeft: true, loadMoreLeft: true,
loadMoreRight: true,
queryParamsLeft: { queryParamsLeft: {
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
pageContent: 0 pageContent: 0
}, },
queryParamsRight: { listLeft: []
pageNo: 1,
pageSize: 10,
pageContent: 0
},
listLeft: [],
listRight: []
} }
}, },
watch: {}, watch: {},
created() { created() {
if (this.$route.query.search) { console.log(this.$route.params.search)
this.search = this.$route.query.search if (this.$route.params.search) {
this.search = this.$route.params.search
this.searchDocument() this.searchDocument()
} else { } else {
this.clearData() this.clearData()
...@@ -92,20 +81,60 @@ export default { ...@@ -92,20 +81,60 @@ export default {
return return
} }
this.seatchInitLeft() this.seatchInitLeft()
this.seatchInitRight()
}, },
// 搜索左侧 // 搜索左侧
seatchInitLeft() { seatchInitLeft() {
this.loadingLeft = true this.loadingLeft = true
// listCustomer(this.queryParams)
// .then(response => {
if (this.queryParamsLeft.pageContent === 0) { if (this.queryParamsLeft.pageContent === 0) {
this.queryParamsLeft.pageContent = 100 this.queryParamsLeft.pageContent = 0
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
this.listLeft.push({ let data = {
media: '巨量' + (i + 1), media: '巨量引擎',
title: '巨量引擎开放平台' + (i + 1), title: '巨量引擎开放平台' + (i + 1),
data: '2022-10-18',
link: 'https://ad.oceanengine.com/pages/login/index.html?source=oceanengine', link: 'https://ad.oceanengine.com/pages/login/index.html?source=oceanengine',
content: ['视频或直播加热的功能，提升视频或直播间热度。','视频或直播加热的功能，提升视频或直播间热度。'] content: [
}) {
contentText: '通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。1234', // 这是完整的一段话
contentChange:[ // 这段话里有多少变化以及链接出处
{
text: '或使用v-model',
url: 'https://www.baidu.com/'
},
{
text: '输入框内显示的值',
url: 'https://www.cnblogs.com/1234wu/p/11055005.html'
},
]
},
{
contentText: '视频或直播加热的功能，提升视频或直播间热度。121212', // 这是完整的一段话
contentChange: [
{
text: '提升视频或直播间热度',
url: 'https://element.eleme.io/#/zh-CN/component/pagination#events'
},
]
}
]
}
let content = data.content
for (let a = 0; a < content.length; a++) {
let contentChange = content[a].contentChange
for (let b = 0; b < contentChange.length; b++) {
let text = contentChange[b].text
let url = contentChange[b].url
if (content[a].contentText.indexOf(text) >= 0) {
let values = content[a].contentText.split(text);
content[a].contentText = values.join(
`<a style="color: rgba(250, 0, 0, 1);" href="${url}" target="_blank">${text}</a>`
)
}
}
}
this.listLeft.push(data)
} }
} else { } else {
let page = this.queryParamsLeft.pageNo + 1 let page = this.queryParamsLeft.pageNo + 1
...@@ -117,71 +146,36 @@ export default { ...@@ -117,71 +146,36 @@ export default {
} else { } else {
this.loadMoreLeft = true this.loadMoreLeft = true
} }
this.listLeft = []
for (let i = orderSize; i < number; i++) { for (let i = orderSize; i < number; i++) {
this.listLeft.push({ this.listLeft.push({
media: '巨量' + (i + 1), media: '巨量' + (i + 1),
title: '巨量引擎开放平台' + (i + 1), title: '巨量引擎开放平台' + (i + 1),
data: '2022-10-18',
link: 'https://ad.oceanengine.com/pages/login/index.html?source=oceanengine', link: 'https://ad.oceanengine.com/pages/login/index.html?source=oceanengine',
content: ['视频或直播加热的功能，提升视频或直播间热度。','视频或直播加热的功能，提升视频或直播间热度。'] content: ['视频或直播加热的功能，提升视频或直播间热度。','视频或直播加热的功能，提升视频或直播间热度。']
}) })
} }
this.queryParamsLeft.pageNo = page this.queryParamsLeft.pageNo = page
// })
// .catch(error => {
// this.loading = false;
// });
} }
setTimeout(() => { setTimeout(() => {
this.loadingLeft = false this.loadingLeft = false
}, 1000); }, 1000);
}, },
// 搜索右侧
seatchInitRight() {
this.loadingRight = true
if (this.queryParamsRight.pageContent === 0) {
this.queryParamsRight.pageContent = 100
for (let i = 0; i < 10; i++) {
this.listRight.push({
media: '巨量' + (i + 1),
content: ['企业抖音长效经营阵地，沉淀企业内容，展示品牌形象','企业抖音长效经营阵地，沉淀企业内容，展示品牌形象']
})
}
} else {
let page = this.queryParamsRight.pageNo + 1
let orderSize = this.queryParamsRight.pageNo * this.queryParamsRight.pageSize
let number = page * this.queryParamsRight.pageSize
let content = this.queryParamsRight.pageContent
if (number >= content) {
this.loadMoreRight = false
} else {
this.loadMoreRight = true
}
for (let i = orderSize; i < number; i++) {
this.listRight.push({
media: '巨量' + (i + 1),
content: ['企业抖音长效经营阵地，沉淀企业内容，展示品牌形象','企业抖音长效经营阵地，沉淀企业内容，展示品牌形象']
})
}
this.queryParamsRight.pageNo = page
}
setTimeout(() => {
this.loadingRight = false
}, 1000);
},
// 数据初始化 // 数据初始化
clearData() { clearData() {
this.loadMoreLeft = true this.loadMoreLeft = true
this.loadMoreRight = true
this.loadingLeft = false this.loadingLeft = false
this.loadingRight = false
this.queryParamsLeft = { this.queryParamsLeft = {
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
pageContent: 0 pageContent: 0
} }
this.queryParamsRight = {
pageNo: 1,
pageSize: 10,
pageContent: 0
}
this.listLeft = [] this.listLeft = []
this.listRight = []
} }
} }
} }
......
src/views/dataList/product/index.vue
<template> <template>
<div class="app-container"> <div class="app-container">
<!-- 筛选项 --> <!-- 头部 -->
<div class="seachData" ref="seachDatas"> <div class="seachData" ref="seachDatas">
<el-form :inline="true"> <div class="seachData-left">
<div class="seachData-left"> <i class="el-icon-arrow-left left-span" @click="blackTaskList"></i>
<el-form-item label="日期"> <span>{{title ? title + '文档跟踪报告' : '文档跟踪报告'}}</span>
<el-date-picker v-model="searchDateRange" </div>
size="small" </div>
style="width: 220px" <div class="content">
value-format="yyyy-MM-dd" <div class="content-left scroll">
type="daterange" <div v-if="loading" class="content-right-content loading loading-left">
range-separator="-" <div class="loading-div">
start-placeholder="开始日期" <i class="el-icon-loading loading-center"></i>
end-placeholder="结束日期" <div>加载中...</div>
:picker-options="pickerOptions"></el-date-picker> </div>
</el-form-item>
<el-form-item label="媒体">
<el-select v-model="queryParams.filtering.mediaCode"
:placeholder="mediaCode.placeholder"
clearable
size="small"
style="width: 220px">
<el-option v-for="dict in mediaCode.data"
:key="dict.value"
:label="dict.name"
:value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="客户区域">
<el-select v-model="queryParams.filtering.customerArea"
clearable
placeholder="请选择客户区域">
<el-option v-for="item in customerAreaOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="客户类型">
<el-select v-model="queryParams.filtering.customerType"
clearable
placeholder="请选择客户类型">
<el-option v-for="item in customerTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="数据来源">
<el-select v-model="queryParams.filtering.source"
clearable
:placeholder="sourceOptions.placeholder">
<el-option v-for="item in sourceOptions.data"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="应用包名">
<el-input v-model="queryParams.filtering.appPackageName"
placeholder="请输入应用包名"
clearable
size="small"
style="width: 220px"
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="应用名称">
<el-input v-model="queryParams.filtering.appName"
placeholder="请输入应用名称"
clearable
size="small"
style="width: 220px"
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="客户编号">
<el-input v-model="customerId"
placeholder="输入多个客户编号时用，隔开"
clearable
size="small"
style="width: 220px"
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="客户名称">
<el-input v-model="queryParams.filtering.customerName"
placeholder="请输入客户名称"
clearable
size="small"
style="width: 220px"
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="细分项">
<el-select v-model="groupBy"
multiple
collapse-tags
:placeholder="groupByOptions.placeholder">
<el-option v-for="item in groupByOptions.data"
:key="item.value"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</div>
<div class="seachData-right">
<el-form-item class="active">
<el-button type="primary"
size="mini"
@click="handleQuery">筛选</el-button>
<el-button type="text"
size="mini"
@click="resetHandleQuery">重置筛选</el-button>
</el-form-item>
</div> </div>
<div class="seachData-next-line"> <div class="content-left-center scroll">
<div class="seachData-next-div left-div"> <div v-if="deleteCenter.length && !loading">
<div class="delete-center" v-for="(item, index) in deleteCenter" :key="index">
<div class="title">
<span>更新日期:</span>
<span class="time">{{item.data}}</span>
<span>共{{item.change}}处更新</span>
</div>
<div class="center">
<div class="center-delete">
<div class="center-delete-tab green">新版</div>
<div class="center-delete-text" v-for="(items, indexs) in item.content" :key="indexs" v-html="items.contentText"></div>
</div>
<div class="center-delete">
<div class="center-delete-tab gray">旧版</div>
<div class="center-delete-text" v-for="(items, indexs) in item.contentOld" :key="indexs" v-html="items.contentText"></div>
</div>
</div>
</div>
</div> </div>
<div class="seachData-next-div right-div"> <div class="none" v-else-if="!deleteCenter.length && !loading">
<el-button type="primary" 暂无数据
size="mini"
:disabled="downloadLoading"
:loading="downloadLoading"
@click="handleDownload">下载报表</el-button>
</div> </div>
</div> </div>
</el-form> </div>
</div> </div>
<el-table class="seachTable" v-loading="loading"
:data="customerList"
:height="tableHeightCount"
:default-sort="{prop: 'asc', order: 'desc'}"
ref="customerListHeight"
border>
<el-table-column fixed="left"
label="日期"
align="left"
prop="dateInt"
:key="'dateInt'"
sortable
width="200">
<template slot-scope="scope">
<span>{{ scope.row.dateInt ? scope.row.dateInt : '-' }}</span>
</template>
</el-table-column>
<el-table-column fixed="left"
label="媒体"
align="left"
prop="mediaCode"
:key="Math.random()"
v-if="queryParams.groupBy.mediaCode"
min-width="90">
<template slot-scope="scope">
<span>{{ scope.row.mediaCode }}</span>
</template>
</el-table-column>
<el-table-column fixed="left"
label="客户名称"
align="left"
prop="customerName"
:key="Math.random()"
v-if="queryParams.groupBy.customerName"
:show-overflow-tooltip="true"
min-width="200">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.customerName ? scope.row.customerName : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="客户编号"
align="left"
prop="customerId"
:key="Math.random()"
v-if="queryParams.groupBy.customerId"
:show-overflow-tooltip="true"
min-width="200">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.customerId ? scope.row.customerId : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="客户区域"
align="left"
prop="customerArea"
:key="Math.random()"
v-if="queryParams.groupBy.customerArea"
:show-overflow-tooltip="true"
min-width="90">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.customerArea ? scope.row.customerArea : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="客户类型"
align="left"
prop="customerType"
:key="Math.random()"
v-if="queryParams.groupBy.customerType"
:show-overflow-tooltip="true"
min-width="90">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ typeText(scope.row.customerType) ? typeText(scope.row.customerType) : '-'}}</div>
</template>
</el-table-column>
<el-table-column label="资质主体名称"
align="left"
prop="corporationName"
:key="Math.random()"
v-if="queryParams.groupBy.corporationName"
:show-overflow-tooltip="true"
min-width="90">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.corporationName ? scope.row.corporationName : '-'}}</div>
</template>
</el-table-column>
<el-table-column label="一级行业"
align="left"
prop="firstIndustryName"
:key="Math.random()"
v-if="queryParams.groupBy.firstIndustryName"
:show-overflow-tooltip="true"
min-width="90">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.firstIndustryName ? scope.row.firstIndustryName : '-'}}</div>
</template>
</el-table-column>
<el-table-column label="二级行业"
align="left"
prop="secondIndustryName"
:key="Math.random()"
v-if="queryParams.groupBy.secondIndustryName"
:show-overflow-tooltip="true"
min-width="90">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.secondIndustryName ? scope.row.secondIndustryName : '-'}}</div>
</template>
</el-table-column>
<el-table-column label="应用包名"
align="left"
prop="appPackageName"
:key="Math.random()"
v-if="queryParams.groupBy.appPackageName"
:show-overflow-tooltip="true"
min-width="90">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.appPackageName ? scope.row.appPackageName : '-'}}</div>
</template>
</el-table-column>
<el-table-column label="应用名称"
align="left"
prop="appName"
:key="Math.random()"
v-if="queryParams.groupBy.appName"
:show-overflow-tooltip="true"
min-width="90">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.appName ? scope.row.appName : '-'}}</div>
</template>
</el-table-column>
<el-table-column label="数据来源"
align="left"
prop="source"
:key="Math.random()"
v-if="queryParams.groupBy.source"
:show-overflow-tooltip="true"
min-width="90">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ typeTextSource(scope.row.source)}}</div>
</template>
</el-table-column>
<el-table-column label="有消耗计划总数"
align="right"
prop="costAboveZeroPlanNum"
:key="'costAboveZeroPlanNum'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.costAboveZeroPlanNum ? scope.row.costAboveZeroPlanNum : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="新增计划数"
align="right"
prop="newPlanNum"
:key="'newPlanNum'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.newPlanNum ? scope.row.newPlanNum : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="新增且有消耗的计划数"
align="right"
prop="costAboveZeroNewPlanNum"
:key="'costAboveZeroNewPlanNum'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.costAboveZeroNewPlanNum ? scope.row.costAboveZeroNewPlanNum : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="消耗"
align="right"
prop="cost"
:key="'cost'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.cost ? scope.row.cost : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="展示"
align="right"
prop="show"
:key="'show'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.show ? scope.row.show : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="点击"
align="right"
prop="click"
:key="'click'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.click ? scope.row.click : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="点击率"
align="right"
prop="clickRate"
:key="'clickRate'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.clickRate ? scope.row.clickRate : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="点击成本"
align="right"
prop="cpc"
:key="'cpc'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.cpc ? scope.row.cpc : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="平均千次展示成本"
align="right"
prop="cpm"
:key="'cpm'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.cpm ? scope.row.cpm : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="转化数"
align="right"
prop="convert"
:key="'convert'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.convert ? scope.row.convert : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="平均转化成本"
align="right"
prop="convertCost"
:key="'convertCost'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.convertCost ? scope.row.convertCost : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="转化率"
align="right"
prop="convertRate"
:key="'convertRate'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.convertRate ? scope.row.convertRate : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="深度转化数"
align="right"
prop="deepConvert"
:key="'deepConvert'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.deepConvert ? scope.row.deepConvert : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="深度转化成本"
align="right"
prop="deepConvertCost"
:key="'deepConvertCost'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.deepConvertCost ? scope.row.deepConvertCost : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="深度转化率"
align="right"
prop="deepConvertRate"
:key="'deepConvertRate'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.deepConvertRate ? scope.row.deepConvertRate : '-' }}</div>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<pagination v-show="total>0"
:total="total"
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
@pagination="searchCustomer" />
</div> </div>
</template> </template>
<script> <script>
// 接口调用方法 // // 接口调用方法
import { // import {
planPage, // planPage,
planExport // planExport
} from "@/api/system/product"; // } from "@/api/system/product";
// 克隆方法 // // 克隆方法
import { // import {
deepClone // deepClone
} from "@/utils/index"; // } from "@/utils/index";
// 下载方法 // // 下载方法
import { hackDownloadFileNew } from "@/utils/ruoyi"; // import { hackDownloadFileNew } from "@/utils/ruoyi";
export default { export default {
data() { data() {
return { return {
// 搜索日期范围 title: '', // 跟踪文档标题抬头
searchDateRange: [], deleteId: '', // 详情id
// 表格数据
customerList: [],
// 搜索数据
queryParams: {
pageNo: 1,
pageSize: 10,
sortBy: ['dateInt;desc', 'adsCost;desc'],
filtering: {
startDate: '',
endDate: '',
mediaCode: '',
customerArea: '',
customerType: '',
source: '',
customerId: [],
customerName: '',
appPackageName: '',
appName: ''
},
groupBy: {
"dateInt": true,
"mediaCode": true,
"customerArea": false,
"customerType": false,
"customerId": false,
"customerName": false,
"source": false,
"appPackageName": false,
"appName": false,
"corporationName": false,
"firstIndustryName": false,
"secondIndustryName": false
}
},
// 用户ID
customerId: '',
// 细分项记录
groupBy: ["dateInt", "mediaCode"],
// 细分项枚举值
groupByOptions: {
placeholder: '请选择细分项',
data: [
{ name: "日期", value: "dateInt" },
{ name: "媒体", value: "mediaCode" },
{ name: "客户区域", value: "customerArea" },
{ name: "客户类型", value: "customerType" },
{ name: "客户编号", value: "customerId" },
{ name: "数据来源", value: "source" },
{ name: "应用包名", value: "appPackageName" },
{ name: "应用名称", value: "appName" },
{ name: "资质主体名称", value: "corporationName" },
{ name: "一级行业", value: "firstIndustryName" },
{ name: "二级行业", value: "secondIndustryName" },
{ name: "客户名称", value: "customerName" }
]
},
// 数据来源
sourceOptions: {
placeholder: '请选择数据来源',
data: [
{ name: "ADS计划", value: "ADS" },
{ name: "非ADS计划", value: "SYNC" }
]
},
// 选择日期范围
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
end.setTime(end.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', [start, end]);
}
}],
disabledDate: time => {
let a = new Date().toLocaleDateString() + " " + "23:59:59";
let c = new Date(new Date() - 24 * 60 * 60 * 1000 * 7).getTime();
let b = new Date(a).getTime() - 3600 * 1000 * 24;
return c > time.getTime() || time.getTime() > b;
}
},
// 媒体
mediaCode: {
placeholder: '请选择媒体',
data: [
{ name: "头条", value: "toutiao" },
{ name: "快手", value: "kuaishou" },
{ name: "广点通", value: "gdt" },
{ name: '百度', value: 'baidu' }
]
},
// 客户区域
customerAreaOptions: [
{
label: "华北",
value: "华北"
},
{
label: "华南",
value: "华南"
},
{
label: "华东",
value: "华东"
}
],
// 客户类型
customerTypeOptions: [
{
label: "试用",
value: "TRIAL"
},
{
label: "签约",
value: "SIGNED"
},
{
label: "其他",
value: "OTHER"
}
],
// 列表加载等待
loading: false,
// 总条数
total: 0,
// 下载loading
downloadLoading: false,
tableHeights: 0, // table高度 tableHeights: 0, // table高度
customerListHeights: 0 // table真实高度 loading: false,
deleteCenter: []
} }
}, },
watch: { watch: {
customerId(newVal, oldVal) {
if (newVal !== oldVal) {
this.customerId = newVal.replace(/[^0-9\，]/,'')
}
}
}, },
created() { created() {
this.init() this.init()
console.log(this.$route.query)
this.$nextTick(() => { this.$nextTick(() => {
this.tableHeight(); this.tableHeight();
}) })
...@@ -609,192 +78,107 @@ export default { ...@@ -609,192 +78,107 @@ export default {
computed: { computed: {
// 计算过的height // 计算过的height
tableHeightCount() { tableHeightCount() {
return this.tableHeights > this.customerListHeights ? this.customerListHeights : this.tableHeights return this.tableHeights
} }
}, },
methods: { methods: {
// 初始化 // 初始化
init() { init() {
const end = this.formatDate(1); this.title = this.$route.query.name
const start = this.formatDate(1); this.deleteId = this.$route.query.id
this.$set(this, 'searchDateRange', [start, end])
this.searchCustomer() this.searchCustomer()
}, },
// 初始化日期格式化 // 返回跟踪文档
formatDate(date) { blackTaskList() {
let d = new Date(), this.$router.push({
month = '' + (d.getMonth() + 1), path: '/documentManagement/taskList'
day = '' + d.getDate() - date, })
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('-');
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNo = 1;
this.disposeData()
this.searchCustomer()
},
// 搜索数据处理
disposeData() {
let customerId = this.customerId ? this.customerId.split('，').filter(val => {if (val) return val}) : []
let groupBy = this.groupBy
let groupByData = {
"dateInt": false,
"mediaCode": false,
"customerArea": false,
"customerType": false,
"customerId": false,
"customerName": false,
"source": false,
"appPackageName": false,
"appName": false,
"corporationName": false,
"firstIndustryName": false,
"secondIndustryName": false
}
if (groupBy.length) {
groupBy.forEach(item => {
if (item) {
groupByData[item] = true
}
})
}
this.$refs.customerListHeight.clearSort()
this.$set(this.queryParams, 'sortBy', ['dateInt;desc', 'cost;desc'])
this.queryParams.groupBy = groupByData
this.queryParams.filtering.customerId = customerId
}, },
searchCustomer() { searchCustomer() {
this.loading = true; this.loading = true;
if (!this.searchDateRange) { // listCustomer(this.queryParams)
this.$message({ // .then(response => {
message: '请选择日期在进行查询', for (let i = 0; i < 10; i++) {
type: 'warning' let data = {
}); data: '2022-10-18',
return false change: '4',
} content: [ // 新数据及变化
if (this.searchDateRange) { {
this.queryParams.filtering.startDate = this.searchDateRange[0]; contentText: '通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。', // 这是完整的一段话
this.queryParams.filtering.endDate = this.searchDateRange[1]; contentTextOld: '',
} contentChange:[ // 这段话里有多少变化以及链接出处
planPage(this.queryParams) {
.then(response => { text: '或使用v-model',
this.total = response.data.total; url: 'https://www.baidu.com/'
this.loading = false; },
this.$nextTick(() => { {
this.$set(this, 'customerList', response.data.records); text: '输入框内显示的值',
url: 'https://www.cnblogs.com/1234wu/p/11055005.html'
},
]
},
{
contentText: '视频或直播加热的功能，提升视频或直播间热度。121212', // 这是完整的一段话
contentChange: [
{
text: '提升视频或直播间热度',
url: 'https://element.eleme.io/#/zh-CN/component/pagination#events'
},
]
},
{
contentText: '视频或直播加热的功能，提升视频或直播间热度。121212', // 这是完整的一段话
contentChange: [
{
text: '视频或直播加热的功能',
url: 'https://element.eleme.io/#/zh-CN/component/pagination#events'
},
]
}
],
contentOld: [ // 旧数据
{
contentText: '通常情况下，应当处理 input 事件，并更新组件的绑定值。否则，输入框内显示的值将不会改变。'
},
{
contentText: '视频或直播加热的功能，提升视频或直播间热度。'
},
{
contentText: '视频或直播加热的功能，提升视频或直播间热度。'
}
]
}
let content = data.content
for (let a = 0; a < content.length; a++) {
let contentChange = content[a].contentChange
for (let b = 0; b < contentChange.length; b++) {
let text = contentChange[b].text
let url = contentChange[b].url
if (content[a].contentText.indexOf(text) >= 0) {
let values = content[a].contentText.split(text);
content[a].contentText = values.join(
`<a style="color: rgba(250, 0, 0, 1);" href="${url}" target="_blank">${text}</a>`
)
}
}
}
this.deleteCenter.push(data)
}
setTimeout(() => {
this.loading = false
}, 1000);
this.$nextTick(() => {
this.customerListHeights = this.$refs.customerListHeight.offsetHeight this.customerListHeights = this.$refs.customerListHeight.offsetHeight
})
}) })
.catch(error => { // })
this.loading = false; // .catch(error => {
this.customerList = []; // this.loading = false;
}); // });
}, },
// 计算高度 // 计算高度
tableHeight() { tableHeight() {
let height = document.documentElement.clientHeight - 222 - this.$refs.seachDatas.offsetHeight let height = document.documentElement.clientHeight - 128
this.tableHeights = height < 580 ? 580 : height this.tableHeights = height < 580 ? 580 : height
},
/** 重置筛选 */
resetHandleQuery() {
this.queryParams = {
pageNo: 1,
pageSize: 10,
sortBy: ['dateInt;desc', 'adsCost;desc'],
filtering: {
startDate: '',
endDate: '',
mediaCode: '',
customerArea: '',
customerType: '',
customerId: [],
customerName: '',
source: '',
appPackageName: '',
appName: ''
},
groupBy: {
"dateInt": true,
"mediaCode": true,
"customerArea": false,
"customerType": false,
"customerId": false,
"customerName": false,
"source": false,
"appPackageName": false,
"appName": false,
"corporationName": false,
"firstIndustryName": false,
"secondIndustryName": false
}
};
const end = this.formatDate(1);
const start = this.formatDate(1);
this.$set(this, 'searchDateRange', [start, end])
this.$set(this, 'customerId', '')
this.$set(this, 'groupBy', ["dateInt", "mediaCode"])
this.disposeData();
this.searchCustomer();
},
// 下载报表
handleDownload() {
this.downloadLoading = true;
if (!this.searchDateRange) {
this.$message({
message: '请选择日期在进行下载',
type: 'warning'
});
return false
}
if (this.searchDateRange) {
this.queryParams.filtering.startDate = this.searchDateRange[0];
this.queryParams.filtering.endDate = this.searchDateRange[1];
}
let queryParams = deepClone(this.queryParams)
delete queryParams.pageNo
delete queryParams.pageSize
planExport(queryParams)
.then(res => {
hackDownloadFileNew(res, '客户投放数据_' + new Date().getTime());
this.msgSuccess("下载成功");
this.downloadLoading = false;
})
.catch(() => {
this.downloadLoading = false;
});
},
// 排序
sortChange(column, prop, order) {
if (!column.order) {
this.$set(this.queryParams, 'sortBy', ['dateInt;desc', 'adsCost;desc'])
} else {
let text = column.prop + ';'
if (column.order === 'descending') {
text = text + 'desc'
} else if (column.order === 'ascending') {
text = text + 'asc'
}
this.$set(this.queryParams, 'sortBy', [text])
}
this.searchCustomer();
},
// 客户类型
typeText(type) {
const opt = this.customerTypeOptions.find(item => item.value === type);
return opt && opt.label;
},
// 数据来源
typeTextSource(type) {
let types = {
'SYNC': '非ADS计划',
'ADS': 'ADS计划'
}
return types[type] ? types[type] : '-';
} }
} }
} }
...@@ -802,4 +186,80 @@ export default { ...@@ -802,4 +186,80 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
@import '@/views/main.scss'; @import '@/views/main.scss';
.app-container {
.content {
top: 64px;
background: #fafafa;
}
}
.seachData {
.seachData-left {
padding-left: 46px;
}
}
.left-span {
margin-right: 18px;
color: #0052D9;
font-size: 26px;
text-align: center;
width: 18px;
cursor: pointer;
}
.delete-center {
width: 100%;
margin-bottom: 16px;
padding: 32px 36px;
background: #fff;
&:first-child {
margin-top: 16px;
}
.title {
font-size: 18px;
color: rgba(0, 0, 0, 0.9000);
.time {
margin-right: 24px;
}
}
.center {
width: 100%;
display: flex;
.center-delete {
width: 50%;
margin-top: 24px;
}
.center-delete-tab {
width: 44px;
height: 24px;
line-height: 24px;
text-align: center;
border-radius: 4px;
&.green {
background: #c8ffe8;
color: #4ec192;
}
&.gray {
background: rgba(0, 0, 0, 0.2000);
color: #8a8888;
}
}
.center-delete-text {
margin-top: 24px;
text-align: left;
font-size: 14px;
line-height: 20px;
color: rgba(0, 0, 0, 0.6);
word-break: break-all;
}
}
}
.content-left-center {
.none {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #8a8888;
font-size: 16px;
}
}
</style> </style>
\ No newline at end of file
src/views/index.scss
.dashboard-editor-container { .dashboard-editor-container {
padding: 32px; padding: 32px;
background-color: #fff; background-color: #fafafa;
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
...@@ -15,33 +15,64 @@ ...@@ -15,33 +15,64 @@
} }
.seach-center { .seach-center {
position: absolute; position: absolute;
top: 25%; top: 200px;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, 0);
z-index: 1; z-index: 1;
.seach-logo { .seach-logo {
width: 80px; width: 190px;
height: 35px; height: 45px;
line-height: 35px; line-height: 45px;
background: #fff; background: #fff;
color: #222; color: #222;
font-size: 26px; font-size: 40px;
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
margin: 0 auto 40px auto; margin: 0 auto 20px auto;
}
.common-url {
margin-top: 80px;
.common-url-title {
color: rgba(0,0,0,0.9);
font-size: 16px;
margin-bottom: 16px;
}
.common-url-center {
display: flex;
.link {
color: rgba(0, 82, 217, 1);
margin-right: 8px;
&:hover {
color: rgba(0, 82, 217, .9);
}
}
}
} }
/deep/.el-input-group { /deep/.el-input-group {
width: 700px; width: 800px;
height: 40px; height: 48px;
}
/deep/.el-input__prefix {
font-size: 16px;
left: 8px;
} }
/deep/.el-input-group--append { /deep/.el-input-group--append {
.el-input__inner { .el-input__inner {
height: 40px; height: 48px;
width: 600px; width: 680px;
padding-left: 40px;
border-color: rgba(220, 220, 220, 1);
border-radius: 4px 0 0 4px;
} }
.el-input-group__append { .el-input-group__append {
width: 100px; width: 120px;
text-align: center; text-align: center;
background: rgba(0, 82, 217, 1);
color: rgba(255,255,255,0.9);
border-radius: 0 4px 4px 0;
&:hover {
background: rgba(0, 82, 217, .8);
}
} }
} }
} }
src/views/index.vue
...@@ -2,9 +2,16 @@ ...@@ -2,9 +2,16 @@
<div class="dashboard-editor-container"> <div class="dashboard-editor-container">
<div class="seach-center"> <div class="seach-center">
<div class="seach-logo">logo</div> <div class="seach-logo">logo</div>
<el-input placeholder="例如：腾讯" @keyup.enter.native="searchDocument" v-model="search" class="input-with-select"> <el-input prefix-icon="el-icon-search" placeholder="请输入你需要搜索的内容" @keyup.enter.native="searchDocument" v-model="search" class="input-with-select">
<el-button slot="append" @click="searchDocument">搜索</el-button> <el-button slot="append" @click="searchDocument">搜索文档</el-button>
</el-input> </el-input>
<div class="common-url">
<div class="common-url-title">常用链接</div>
<div class="common-url-center">
<a href="https://www.oceanengine.com/" target="_blank" class="link">巨量引擎</a>
<a href="http://baidu.guojidxqf.com/?gclid=Cj0KCQiAmaibBhCAARIsAKUlaKQaOd7vK47N2G7vH6lSS4QeRNY_0gIbaJ13hSL4Og7A50CiNFRRL3waAjMAEALw_wcB" target="_blank" class="link">百度联盟</a>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -31,8 +38,8 @@ export default { ...@@ -31,8 +38,8 @@ export default {
return return
} }
this.$router.push({ this.$router.push({
path: '/documentManagement/tailAfter', name: 'tailAfter',
query: { params: {
search: this.search search: this.search
} }
}) })
......
src/views/main.scss
// 上方搜索 // 上方搜索
/deep/.seachData { /deep/.seachData {
height: 64px;
display: flex;
background: #fff;
box-shadow: inset 0px -1px 0px 0px #DCDCDC;
.el-form { .el-form {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.el-button--primary { .el-button--primary {
min-width: 80px; min-width: 112px;
height: 34px; height: 32px;
background: rgba(0, 82, 217, 1);
border-color: rgba(0, 82, 217, 1);
font-size: 14px; font-size: 14px;
margin-left: 20px; margin: 16px 0 16px 16px;
margin-bottom: 16px;
} }
.el-button--text { .el-button--text {
margin-left: 36px; margin-left: 36px;
} }
.el-form--inline {
.el-form-item { .el-form-item {
margin: 0 20px 20px 0; margin: 0 20px 20px 0;
&.active { &.active {
...@@ -32,11 +36,6 @@ ...@@ -32,11 +36,6 @@
width: 220px; width: 220px;
} }
} }
.el-input__inner {
height: 34px;
font-size: 14px;
padding: 8px 10px;
}
.el-range-editor--small { .el-range-editor--small {
.el-range__close-icon { .el-range__close-icon {
vertical-align: middle; vertical-align: middle;
...@@ -49,12 +48,29 @@ ...@@ -49,12 +48,29 @@
width: 220px; width: 220px;
} }
.seachData-left { .seachData-left {
width: calc(100% - 118px); width: 50%;
color: rgba(0, 0, 0, 0.9000);
line-height: 64px;
padding-left: 32px;
font-size: 20px;
font-weight: 500;
} }
.seachData-right { .seachData-right {
width: 116px; width: 50%;
border-left: 1px solid #E4E4E4; padding-right: 40px;
min-height: 90px; display: flex;
justify-content: flex-end;
.el-input {
width: 320px;
height: 32px;
margin: 16px 0;
}
.el-input__inner {
height: 32px;
width: 320px;
font-size: 14px;
padding: 8px 10px;
}
} }
.seachData-next-line { .seachData-next-line {
width: 100%; width: 100%;
...@@ -100,7 +116,6 @@ ...@@ -100,7 +116,6 @@
} }
} }
} }
}
} }
// 表格弹框 // 表格弹框
/deep/.from-pop-up { /deep/.from-pop-up {
...@@ -221,8 +236,8 @@ ...@@ -221,8 +236,8 @@
} }
.app-container { .app-container {
padding: 32px; padding: 0;
background-color: #fff; background-color: #fafafa;
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
...@@ -230,13 +245,10 @@ ...@@ -230,13 +245,10 @@
bottom: 0; bottom: 0;
.content { .content {
position: absolute; position: absolute;
left: 32px; left: 0;
bottom: 32px; bottom: 0;
right: 32px; right: 0;
top: 68px; top: 96px;
.solid {
border: 1px solid #999;
}
.scroll { .scroll {
overflow-y: auto; overflow-y: auto;
&::-webkit-scrollbar-track-piece { &::-webkit-scrollbar-track-piece {
...@@ -286,49 +298,103 @@ ...@@ -286,49 +298,103 @@
position: absolute; position: absolute;
left: 0; left: 0;
right: 432px; right: 432px;
top: 32px; top: 0;
bottom: 0; bottom: 0;
right: 0;
.content-left-center { .content-left-center {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 16px 16px 0 16px; padding: 0 16px 0 16px;
position: relative; position: relative;
/deep/.pagination-container {
background: #fafafa;
}
/deep/.el-pagination {
text-align: center;
width: 100%;
}
/deep/.el-pagination.is-background {
.el-pager li {
background-color: #fafafa;
border-radius: 3px;
color: rgba(0, 0, 0, 0.6000);
border: 1px solid rgba(220, 220, 220, 1);
border-radius: 3px;
&:not(.disabled).active {
color: #fff;
background: rgba(0, 82, 217, 1);
}
}
.btn-prev, .btn-next {
border: 0;
background: #fafafa;
color: rgba(0, 0, 0, 0.6000);
}
}
} }
.left-content { .left-content {
position: relative; position: relative;
padding: 40px 56px; padding-left: 80px;
width: 100%; width: 752px;
border: 1px solid #ccc; margin-bottom: 40px;
margin-bottom: 20px; &:first-child {
margin-top: 40px;
}
.left-content-title { .left-content-title {
position: absolute; width: 100%;
left: 0; margin-bottom: 12px;
top: 0; height: 20px;
background: pink; .logo {
color: #222; width: 20px;
font-size: 18px; height: 20px;
padding: 4px 8px; border-radius: 50%;
background: #fff;
border: 1px solid #ccc;
margin-right: 8px;
float: left;
.logo-img {
width: 18px;
height: 18px;
border-radius: 50%;
}
}
.media {
margin-right: 32px;
}
.text {
float: left;
font-size: 14px;
line-height: 20px;
color: rgba(0,0,0,0.4);
}
} }
.content-text-header { .content-text-header {
height: 32px; height: 28px;
line-height: 28px;
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 500;
color: #222; color: rgba(0, 0, 0, 0.9000);
text-align: left; text-align: left;
margin-bottom: 8px;
.link { .link {
cursor: pointer; cursor: pointer;
color: #222; color: #222;
&:hover { &:hover {
color: rgb(64, 158, 255); color: #0052d9;
} }
} }
} }
.content-text { .content-text {
margin-top: 8px; margin-bottom: 4px;
margin-top: 0;
text-align: left; text-align: left;
font-size: 14px; font-size: 14px;
color: #222; line-height: 20px;
color: rgba(0,0,0,0.6);
word-break: break-all; word-break: break-all;
&:last-child {
margin-bottom: 0;
}
} }
} }
} }
...@@ -391,5 +457,48 @@ ...@@ -391,5 +457,48 @@
} }
} }
.blue { .blue {
color: #1890ff; color: #0052d9;
cursor: pointer;
&:hover {
color: #025cf1;
}
}
.app-header {
height: 96px;
background: #fff;
padding: 24px 36px;
display: flex;
.search-logo {
height: 32px;
width: 32px;
background: #fafafa;
margin: 8px 12px 8px 0;
float: left;
}
/deep/.el-input-group {
width: 800px;
}
/deep/.el-input-group--append {
float: left;
.el-input__inner {
height: 48px;
width: 680px;
padding-left: 40px;
border-color: rgba(220, 220, 220, 1);
border-radius: 4px 0 0 4px;
}
.el-input-group__append {
width: 120px;
text-align: center;
background: rgba(0, 82, 217, 1);
color: rgba(255,255,255,0.9);
border-radius: 0 4px 4px 0;
&:hover {
background: rgba(0, 82, 217, .8);
}
}
.el-input__prefix {
font-size: 16px;
}
}
} }
src/views/system/customer/index.vue
...@@ -2,119 +2,118 @@ ...@@ -2,119 +2,118 @@
<div class="app-container"> <div class="app-container">
<!-- 功能项--> <!-- 功能项-->
<div class="seachData" ref="seachDatas"> <div class="seachData" ref="seachDatas">
<el-form :inline="true">
<div class="seachData-left"> <div class="seachData-left">
<el-form-item label="任务名称"> 跟踪文档列表
<el-input v-model="queryParams.taskName" </div>
<div class="seachData-right">
<el-input v-model="queryParams.taskName"
placeholder="请输入任务名称" placeholder="请输入任务名称"
suffix-icon="el-icon-search"
clearable clearable
size="small" size="small"
style="width: 220px"
@keyup.enter.native="handleQuery" /> @keyup.enter.native="handleQuery" />
</el-form-item>
</div>
<div class="seachData-right">
<el-form-item class="active">
<el-button type="primary"
size="mini"
@click="handleQuery">筛选</el-button>
<el-button type="text"
size="mini"
@click="resetHandleQuery">重置筛选</el-button>
</el-form-item>
</div>
<div class="seachData-next-line">
<div class="seachData-next-div left-div"> <div class="seachData-next-div left-div">
<el-button type="primary" <el-button type="primary"
icon="el-icon-plus" icon="el-icon-plus"
size="mini" size="mini"
@click="handleAdd">添加任务 @click="handleAdd">创建任务
</el-button> </el-button>
</div> </div>
</div> </div>
</el-form>
</div> </div>
<el-table class="seachTable" v-loading="loading" <div class="table-center">
:data="customerList" <el-table class="seachTable" v-loading="loading"
:height="tableHeightCount" :data="customerList"
ref="customerListHeight" :height="tableHeightCount"
border> ref="customerListHeight"
<el-table-column min-width="90" border>
fixed="left" <el-table-column label="订阅状态"
label="任务id" fixed="left"
prop="id" width="90"
> align="subscriptionStatus">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="blue">{{ isEmpty(scope.row, 'id') }}</span> <el-switch v-model="scope.row.subscriptionStatus"
</template> active-value="0"
</el-table-column> inactive-value="1"
<el-table-column fixed="left" @change="handleStatusChange(scope.row)"></el-switch>
min-width="200" </template>
label="任务名称" </el-table-column>
prop="taskName" <el-table-column fixed="left"
:show-overflow-tooltip="true" min-width="240"
> label="任务名称"
<template slot-scope="scope"> prop="taskName"
<div class="ellipsis-hidden">{{ isEmpty(scope.row, 'taskName') }}</div> :show-overflow-tooltip="true"
</template> >
</el-table-column> <template slot-scope="scope">
<el-table-column label="任务说明" <div class="ellipsis-hidden"><span class="blue" @click="routerTaskListDetails(scope.row)">{{ isEmpty(scope.row, 'taskName') }}</span></div>
min-width="300" </template>
prop="explain" </el-table-column>
:show-overflow-tooltip="true" <el-table-column min-width="160"
> fixed="left"
<template slot-scope="scope"> label="任务ID"
<div class="ellipsis-hidden">{{ isEmpty(scope.row, 'explain') }}</div> prop="id"
</template> >
</el-table-column> <template slot-scope="scope">
<span>{{ isEmpty(scope.row, 'id') }}</span>
<el-table-column label="创建时间" </template>
align="center" </el-table-column>
prop="createTime" <el-table-column label="任务说明"
width="120"> min-width="280"
<template slot-scope="scope"> prop="explain"
<span>{{ isEmpty(scope.row, 'createTime') }}</span> :show-overflow-tooltip="true"
</template> >
</el-table-column> <template slot-scope="scope">
<div class="ellipsis-hidden">{{ isEmpty(scope.row, 'explain') }}</div>
</template>
</el-table-column>
<el-table-column label="状态" <el-table-column label="最后修改时间"
align="center" prop="createTime"
prop="status" width="200">
width="120"> <template slot-scope="scope">
<template slot-scope="scope"> <span>{{ isEmpty(scope.row, 'createTime') }}</span>
<span>{{ statusTable(scope.row) }}</span> </template>
</template> </el-table-column>
</el-table-column>
<el-table-column fixed="right" <el-table-column label="状态"
label="操作" prop="status"
width="240"> width="120">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button @click="handleUpdate(scope.row)" <span :class="statusTable(scope.row).class">{{ statusTable(scope.row).text }}</span>
type="text" </template>
size="small">修改订阅</el-button> </el-table-column>
<el-button @click="handleDelete(scope.row)"
type="text"
size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total>0" <el-table-column fixed="right"
:total="total" label="操作"
:page.sync="queryParams.current" width="160">
:limit.sync="queryParams.size" <template slot-scope="scope">
@pagination="searchCustomer" /> <el-button @click="handleUpdate(scope.row)"
type="text"
size="small">修改订阅</el-button>
<el-button @click="handleDelete(scope.row)"
type="text"
size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 添加或修改角色配置对话框 --> <pagination v-show="total>0"
<el-dialog class="from-pop-up" :total="total"
:title="title" :page.sync="queryParams.current"
:visible.sync="open" :limit.sync="queryParams.size"
width="640px"> layout="total, prev, pager, next"
@pagination="searchCustomer" />
</div>
<el-drawer
class="from-pop-up"
:title="title"
:visible.sync="open"
:direction="'rtl'"
:wrapperClosable="false"
:before-close="cancel">
<el-form ref="form" <el-form ref="form"
:model="form" :model="form"
:rules="rules" :rules="rules">
label-width="110px">
<el-form-item label="任务名称" <el-form-item label="任务名称"
prop="taskName"> prop="taskName">
<el-input v-model.trim="form.taskName" <el-input v-model.trim="form.taskName"
...@@ -150,6 +149,18 @@ ...@@ -150,6 +149,18 @@
placeholder="请输入任务说明" /> placeholder="请输入任务说明" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="dialog-footer">
<el-button type="primary"
@click="submitForm"
:loading="submitLoading">确 定</el-button>
<el-button class="cancel" @click="cancel">取 消</el-button>
</div>
</el-drawer>
<!-- 添加或修改角色配置对话框 -->
<!-- <el-dialog class="from-pop-up"
:title="title"
:visible.sync="open"
width="640px">
<div slot="footer" <div slot="footer"
class="dialog-footer"> class="dialog-footer">
<el-button @click="cancel">取 消</el-button> <el-button @click="cancel">取 消</el-button>
...@@ -157,7 +168,7 @@ ...@@ -157,7 +168,7 @@
@click="submitForm" @click="submitForm"
:loading="submitLoading">确 定</el-button> :loading="submitLoading">确 定</el-button>
</div> </div>
</el-dialog> </el-dialog> -->
</div> </div>
</template> </template>
...@@ -275,14 +286,24 @@ export default { ...@@ -275,14 +286,24 @@ export default {
computed: { computed: {
// 计算过的height // 计算过的height
tableHeightCount() { tableHeightCount() {
return this.tableHeights > this.customerListHeights ? this.customerListHeights : this.tableHeights return this.tableHeights - 112
} }
}, },
methods: { methods: {
tableHeight() { tableHeight() {
let height = document.documentElement.clientHeight - 222 - this.$refs.seachDatas.offsetHeight let height = document.documentElement.clientHeight - 128
this.tableHeights = height < 580 ? 580 : height this.tableHeights = height < 580 ? 580 : height
}, },
// 跳转跟踪文档详情界面
routerTaskListDetails(row) {
this.$router.push({
path: '/documentManagement/taskListDetails',
query: {
id: row.id,
name: row.taskName
}
})
},
// table显示内容 // table显示内容
isEmpty(row, name) { isEmpty(row, name) {
return !row[name] ? '-' : row[name] return !row[name] ? '-' : row[name]
...@@ -290,10 +311,31 @@ export default { ...@@ -290,10 +311,31 @@ export default {
// table显示状态 // table显示状态
statusTable(row) { statusTable(row) {
let status = { let status = {
0: "已失效", 0: {
1: "运行中" text: "已失效",
class: "span-table span-red"
},
1: {
text: "运行中",
class: "span-table span-blue"
},
2: {
text: "已完成",
class: "span-table span-green"
}
} }
return status[row.status] ? status[row.status] : "-" return status[row.status] ? status[row.status] : {
text: "",
class: ""
}
},
handleStatusChange(row) {
// editStatus(row.id, row.subscriptionStatus)
// .then(() => {
this.searchCustomer();
this.msgSuccess("修改状态成功");
// })
// .catch(() => this.msgError("修改状态失败"));
}, },
searchCustomer() { searchCustomer() {
this.loading = true; this.loading = true;
...@@ -304,6 +346,7 @@ export default { ...@@ -304,6 +346,7 @@ export default {
id: 1, id: 1,
taskName: '任务1', taskName: '任务1',
explain: '这是一个任务1', explain: '这是一个任务1',
subscriptionStatus: '1',
createTime: '2020-10-22 20:16:01', createTime: '2020-10-22 20:16:01',
status: 0, status: 0,
document: '1', document: '1',
...@@ -313,6 +356,7 @@ export default { ...@@ -313,6 +356,7 @@ export default {
{ {
id: 2, id: 2,
taskName: '任务2', taskName: '任务2',
subscriptionStatus: '1',
explain: '这是一个任务2', explain: '这是一个任务2',
createTime: '2020-10-22 20:16:01', createTime: '2020-10-22 20:16:01',
status: 1, status: 1,
...@@ -324,8 +368,9 @@ export default { ...@@ -324,8 +368,9 @@ export default {
id: 3, id: 3,
taskName: '任务3', taskName: '任务3',
explain: '', explain: '',
subscriptionStatus: '0',
createTime: '2020-10-22 20:16:01', createTime: '2020-10-22 20:16:01',
status: 1, status: 2,
document: '0', document: '0',
link: '', link: '',
email: '111111111@.qq.com' email: '111111111@.qq.com'
...@@ -335,14 +380,14 @@ export default { ...@@ -335,14 +380,14 @@ export default {
this.customerList = data this.customerList = data
// data // data
// this.total = response.data.total; // this.total = response.data.total;
this.total = 10; this.total = 0;
// 10; // 10;
setTimeout(() => { setTimeout(() => {
this.loading = false; this.loading = false;
}, 2000) }, 2000)
// this.$nextTick(() => { this.$nextTick(() => {
// this.customerListHeights = this.$refs.customerListHeight.offsetHeight this.customerListHeights = this.$refs.customerListHeight.offsetHeight
// }) })
// }) // })
// .catch(error => { // .catch(error => {
// this.loading = false; // this.loading = false;
...@@ -481,4 +526,141 @@ export default { ...@@ -481,4 +526,141 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '@/views/main.scss'; @import '@/views/main.scss';
.table-center {
width: calc(100% - 32px);
height: calc(100% - 96px);
display: inline-block;
margin: 16px;
background: #fff;
}
/deep/.seachTable {
margin: 16px;
width: calc(100% - 32px);
&.el-table {
th {
background: #fff;
color: #a8a8a8;
}
.el-table__header-wrapper th {
color: #a8a8a8;
}
.el-button--small {
font-size: 14px;
color: #0052d9;
}
.el-button + .el-button {
margin-left: 16px;
}
.span-table {
padding-left: 16px;
position: relative;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
width: 8px;
height: 8px;
border-radius: 50%;
}
}
.span-red {
&::before {
background: rgba(227, 77, 89, 1);
}
}
.span-blue {
&::before {
background: rgba(0, 82, 217, 1);
}
}
.span-green {
&::before {
background: rgba(5, 168, 112, 1);
}
}
}
}
/deep/.pagination-container {
height: 32px;
margin: 0 16px 16px 16px;
padding: 0 !important;
width: calc(100% - 32px);
}
/deep/.el-pagination.is-background {
.el-pager li {
background-color: #fff;
border-radius: 3px;
color: rgba(0, 0, 0, 0.6000);
border: 1px solid rgba(220, 220, 220, 1);
border-radius: 3px;
&:not(.disabled).active {
color: #fff;
background: rgba(0, 82, 217, 1);
}
}
.btn-prev, .btn-next {
border: 0;
background: #fff;
color: rgba(0, 0, 0, 0.6000);
}
}
/deep/.el-drawer__header {
height: 64px;
font-size: 16px;
padding: 0;
line-height: 64px;
color: rgba(0, 0, 0, 0.9000);
font-weight: 500;
margin-bottom: 26px;
padding: 0 24px;
box-shadow: inset 0px -1px 0px 0px #dcdcdc;
}
.el-form {
padding: 0 24px;
/deep/.el-form-item__label {
width: 100% !important;
text-align: left;
}
/deep/.el-form-item__content {
margin-left: 0 !important;
}
/deep/.el-select, /deep/.el-select > .el-input {
width: 100%;
}
}
.dialog-footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
line-height: 64px;
height: 64px;
padding: 0 24px;
border-top: 1px solid rgba(231, 231, 231, 1);
/deep/.el-button--medium {
width: 60px;
height: 32px;
border-radius: 3px;
padding: 0;
text-align: center;
line-height: 32px;
font-size: 14px;
}
/deep/.el-button--primary {
background: #0052D9;
border-color: #0052D9;
}
.el-button--medium {
&.cancel {
background: #E7E7E7;
border-color: #E7E7E7;
color: rgba(0, 0, 0, 0.9000);
}
}
.el-button + .el-button {
margin-left: 8px;
}
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment