Skip to content

M
memberTag-web
Commit 3c1b657c by liuchenxi
Options

update: 会员标签ui

parent 0609623f
Showing with 61 additions and 29 deletions
index.html
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<link rel="shortcut icon" href="./static/img/favicon.ico"/> <link rel="shortcut icon" href="./static/img/favicon.ico"/>
<title>GIC-会员标签</title> <title>GIC-会员标签</title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_688955_99jmfacmlpp.css"> <link rel="stylesheet" href="//at.alicdn.com/t/font_688955_99jmfacmlpp.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_3276801_w3vkjjmzzz.css"> <link rel="stylesheet" href="//at.alicdn.com/t/font_3276801_mkhlaisq2aq.css">
<script src="//at.alicdn.com/t/font_3276801_w3vkjjmzzz.js"></script> <script src="//at.alicdn.com/t/font_3276801_w3vkjjmzzz.js"></script>
</head> </head>
<body style="background-color: #f0f2f5;min-width: 1400px;"> <body style="background-color: #f0f2f5;min-width: 1400px;">
......
src/utils/clipboard.js
import Vue from 'vue' import Vue from 'vue'
import Clipboard from 'clipboard' import Clipboard from 'clipboard'
function clipboardSuccess() { // function clipboardSuccess() {
Vue.prototype.$message({ // Vue.prototype.$message({
message: 'Copy successfully', // message: 'Copy successfully',
type: 'success', // type: 'success',
duration: 1500 // duration: 1500
}) // })
} // }
function clipboardError() { function clipboardError() {
Vue.prototype.$message({ Vue.prototype.$message({
...@@ -21,7 +21,7 @@ export default function handleClipboard(text, event) { ...@@ -21,7 +21,7 @@ export default function handleClipboard(text, event) {
text: () => text text: () => text
}) })
clipboard.on('success', () => { clipboard.on('success', () => {
clipboardSuccess() // clipboardSuccess()
clipboard.off('error') clipboard.off('error')
clipboard.off('success') clipboard.off('success')
clipboard.destroy() clipboard.destroy()
......
src/view/index/index.vue
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<!-- 缓存已经填好内容的页面 --> <!-- 缓存已经填好内容的页面 -->
<!-- <keep-alive include="editGroupGrade"> --> <!-- <keep-alive include="editGroupGrade"> -->
<router-view></router-view> <router-view></router-view>
<!-- </keep-alive > --> <!-- </keep-alive > -->
</transition> </transition>
</div> </div>
......
src/view/layout/layout.vue
<template> <template>
<dm-layout project-name="report"> <dm-layout project-name="report">
<router-view :key="$route.fullPath"></router-view> <keep-alive>
<router-view :key="$route.fullPath"></router-view>
</keep-alive>
</dm-layout> </dm-layout>
</template> </template>
......
src/view/manualTag/manual-tag-value-edit.vue
...@@ -22,12 +22,19 @@ ...@@ -22,12 +22,19 @@
<el-table :data="tagValTableData" ref="sortTable" row-class-name="table-row" row-key="tagItemId"> <el-table :data="tagValTableData" ref="sortTable" row-class-name="table-row" row-key="tagItemId">
<el-table-column width="40" class-name="tag-cell sort-cell" label-class-name="tag-head"> <el-table-column width="40" class-name="tag-cell sort-cell" label-class-name="tag-head">
<template> <template>
<el-popover placement="top" content="拖动排序" trigger="hover"> <el-tooltip placement="top" content="拖动排序" trigger="hover" effect="dark" popper-class="drag-tooltip">
<i slot="reference" class="iconfont icon-tuozhuaipaixu deactive" /> <i class="iconfont icon-tuozhuaipaixu deactive" />
</el-popover> </el-tooltip>
</template>
</el-table-column>
<el-table-column label="标签值" prop="tagItemName" min-width="100" class-name="tag-cell" label-class-name="tag-head">
<template slot-scope="{ row }">
<span>{{ row.tagItemName }}</span>
<el-tooltip content="复制标签值" trigger="hover" placement="top">
<i class="iconfont copy-icon icon-fuzhi" @click="copy(row.tagItemName, $event)" />
</el-tooltip>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="标签值" prop="tagItemName" min-width="100" class-name="tag-cell" label-class-name="tag-head"></el-table-column>
<el-table-column label="覆盖人数" prop="memberCount" min-width="200" class-name="tag-cell" label-class-name="tag-head"></el-table-column> <el-table-column label="覆盖人数" prop="memberCount" min-width="200" class-name="tag-cell" label-class-name="tag-head"></el-table-column>
<el-table-column label="操作" min-width="220" class-name="tag-cell" label-class-name="tag-head"> <el-table-column label="操作" min-width="220" class-name="tag-cell" label-class-name="tag-head">
<template slot-scope="scope"> <template slot-scope="scope">
...@@ -75,6 +82,7 @@ ...@@ -75,6 +82,7 @@
</template> </template>
<script> <script>
import './manualTagEdit.css'; import './manualTagEdit.css';
import copy from '@/utils/clipboard';
import navCrumb from '@/components/nav/nav.vue'; import navCrumb from '@/components/nav/nav.vue';
import showMsg from '@/common/js/showmsg'; import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error'; import errMsg from '@/common/js/error';
...@@ -530,6 +538,10 @@ export default { ...@@ -530,6 +538,10 @@ export default {
}, },
remoteDragData(params) { remoteDragData(params) {
getRequest('/member-tag-value/tag-item-sort', params); getRequest('/member-tag-value/tag-item-sort', params);
},
// 复制文字
copy(text, e) {
copy(text, e);
} }
}, },
mounted() { mounted() {
...@@ -600,6 +612,7 @@ export default { ...@@ -600,6 +612,7 @@ export default {
} }
.table-row:hover { .table-row:hover {
.deactive { .deactive {
color: #606266;
display: block; display: block;
cursor: grabbing; cursor: grabbing;
} }
...@@ -607,4 +620,18 @@ export default { ...@@ -607,4 +620,18 @@ export default {
.deactive { .deactive {
display: none; display: none;
} }
.copy-icon {
display: inline-block;
margin-left: 3px;
width: 24px;
height: 24px;
font-size: 14px;
text-align: center;
color: #606266;
border-radius: 2px;
cursor: pointer;
&:hover {
background-color: #E5E6EB;
}
}
</style> </style>
src/view/manualTag/manualTagEdit.vue
...@@ -316,6 +316,9 @@ export default { ...@@ -316,6 +316,9 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/deep/ .el-dialog {
margin-top: 10vh !important;
}
/deep/ .el-dialog-title { /deep/ .el-dialog-title {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
...@@ -368,7 +371,7 @@ footer { ...@@ -368,7 +371,7 @@ footer {
margin-bottom: 4px; margin-bottom: 4px;
} }
.tag-list { .tag-list {
max-height: 100px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
} }
</style> </style>
src/view/platformTag/member-tag.vue
...@@ -954,7 +954,6 @@ export default { ...@@ -954,7 +954,6 @@ export default {
.member-box { .member-box {
overflow: hidden; overflow: hidden;
margin: 4px 0 20px; margin: 4px 0 20px;
min-width: 1400px;
height: 100%; height: 100%;
background-color: #fff; background-color: #fff;
} }
......
src/view/platformTag/second-tag.vue
...@@ -322,7 +322,7 @@ export default { ...@@ -322,7 +322,7 @@ export default {
overflow: hidden; overflow: hidden;
.name { .name {
position: relative; position: relative;
top: 1px; top: 0;
float: left; float: left;
.second-title { .second-title {
font-weight: bold; font-weight: bold;
...@@ -346,10 +346,11 @@ export default { ...@@ -346,10 +346,11 @@ export default {
.tag-item { .tag-item {
display: inline-block; display: inline-block;
line-height: 22px; line-height: 22px;
height: 22px;
margin-right: 8px; margin-right: 8px;
margin-bottom: 12px; margin-bottom: 12px;
font-size: 12px; font-size: 12px;
padding: 3px 8px; padding: 0 8px;
background: #F2F3F5; background: #F2F3F5;
border-radius: 2px; border-radius: 2px;
color: #303133; color: #303133;
...@@ -374,7 +375,7 @@ export default { ...@@ -374,7 +375,7 @@ export default {
.arrow-line { .arrow-line {
float: left; float: left;
position: relative; position: relative;
top: 2px; top: 1px;
font-size: 30px; font-size: 30px;
} }
.icon-tag { .icon-tag {
...@@ -388,6 +389,7 @@ export default { ...@@ -388,6 +389,7 @@ export default {
padding: 5px 11px; padding: 5px 11px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
border-radius: 2px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&:hover { &:hover {
......
src/view/platformTag/tag-container-active.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<!-- 具体标签 --> <!-- 具体标签 -->
<div class="tag-some-list"> <div class="tag-some-list">
<el-table :data="tableData" style="width: 100%"> <el-table :data="tableData" style="width: 100%">
<el-table-column label="标签名称" prop="tagName" min-width="100"> <el-table-column label="标签名称" prop="tagName" min-width="100" fixed="left">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="tag-name">{{ scope.row.tagName }}</span> <span class="tag-name">{{ scope.row.tagName }}</span>
<el-tooltip class="item" effect="dark" content="添加标签" placement="bottom"> <el-tooltip class="item" effect="dark" content="添加标签" placement="bottom">
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
<span v-else>--</span> <span v-else>--</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作"> <el-table-column label="操作" fixed="right">
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<el-button type="text" @click="editActiveTag(row)">编辑</el-button> <el-button type="text" @click="editActiveTag(row)">编辑</el-button>
<el-button type="text" @click="editActiveTagValue(row)">详情</el-button> <el-button type="text" @click="editActiveTagValue(row)">详情</el-button>
......
static/css/index.less
...@@ -115,13 +115,13 @@ ...@@ -115,13 +115,13 @@
// 幽灵按钮放在全局方便全局改样式 // 幽灵按钮放在全局方便全局改样式
.ghost-btn { .ghost-btn {
background: #fff !important; background: #fff !important;
color: #1890ff !important; color: #2f54eb !important;
&:hover { &:hover {
border-color: #40a9ff; border-color: #597EF7;
color: #40a9ff !important; color: #597EF7 !important;
} }
&:active { &:active {
border-color: #096dd9; border-color: #1D39C4;
color: #096dd9 !important; color: #1D39C4 !important;
} }
} }
theme/index.css
...@@ -81804,4 +81804,4 @@ ...@@ -81804,4 +81804,4 @@
.damo-popover { .damo-popover {
max-height: 400px; max-height: 400px;
overflow: auto; overflow: auto;
} }
\ No newline at end of file
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