Skip to content

M
memberTag-web
Commit c0762852 by Kyle_Li
Options

撕标签

parent 1c7ad9d0
Showing with 399 additions and 23 deletions
src/components/CycleWrap.vue 0 → 100644
<template>
<div id="cycleWrap">
<div class="leftWrap">
<div class="left" :style="{ transform: `rotate(${num1}deg)` }"></div>
</div>
<div class="rightWrap">
<div class="right" :style="{ transform: `rotate(${num2}deg)` }"></div>
</div>
<div class="cover"></div>
</div>
</template>
<script>
export default {
name: 'cycleWrap',
data() {
return {
// num1: 0,
// num2: 0,
}
},
props: {
progress: [Number, String]
},
computed: {
degree() {
return this.progress * 3.6
},
num2() {
return this.degree < 180 ? this.degree : 180;
},
num1() {
return this.degree < 180 ? 0 : this.degree - 180;
},
},
// watch: {
// progress() {
// let degree = this.progress * 3.6;
// if(degree < 180) {
// this.num1 = degree;
// this.num2 = 0;
// } else {
// this.num1 = 180;
// this.num2 = degree - 180;
// }
// }
// }
}
</script>
<style lang="scss" scoped>
#cycleWrap {
display: flex;
width: 26px;
height: 26px;
position: relative;
border-radius: 51%;
background-color: #F5222D;
.leftWrap,
.rightWrap {
width: 13px;
height: 26px;
position: absolute;
top: 0;
overflow: hidden;
}
.leftWrap {
left: 0;
}
.rightWrap {
right: 0;
}
.left {
width: 13px;
height: 26px;
border-radius: 12px 0 0 12px;
background-color: #ffe1e2;
transform-origin: right center;
}
.right {
width: 13px;
height: 26px;
border-radius: 0 12px 12px 0;
background-color: #fde1e2;
transform-origin: left center;
}
.cover {
position: absolute;
top: 4px;
left: 4px;
width: 18px;
height: 18px;
background-color: #fff;
border-radius: 50%;
}
}
</style>
\ No newline at end of file
src/components/Trash.vue 0 → 100644
<template>
<div id="trash">
<div class="trash" @click="dialogVisible=true">
<i class="iconfont icon-shanchu trashIcon"></i>
<span>一键清除废弃标签值</span>
<div class="trashState">
<component :is="stateComponent" :progress="progress"></component>
</div>
</div>
<el-dialog
title="批处理撕标签"
:visible.sync="dialogVisible"
width="600px"
@open="dialogOpen">
<el-alert
title="每次操作一键清除的时间间隔为6小时。"
type="info"
show-icon
:closable="false"
style="width: 535px;margin-bottom:15px">
</el-alert>
<header>已选择删除的标签值</header>
<ul class="tagBox">
<li v-for="item in trashList" :key="item.tagItemId" class="tagItem">{{ item.tagItemName }}</li>
</ul>
<span slot="footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="doClean" :disabled="delTime">{{ delTime ? getDelTime() : '一键清除' }}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import CycleWrap from './CycleWrap.vue';
import { getProgress, getTrashList, isCleanTrashList, cleanTrashList } from '@/request/api';
let Success = {
template: '<i class="el-icon-success" style="color:#52C41A;font-size:20px;"></i>'
}
let Pending = {
props: ['progress'],
template: '<div class="pendingClass">{{ progress }}</div>'
}
export default {
name: 'trash',
data() {
return {
progress: 0,
trashList: [],
stateComponent: '',
dialogVisible: false,
delTime: 1
}
},
components: { CycleWrap, Success, Pending },
mounted() {
this.getProgress();
},
methods: {
getProgress() {
getProgress().then(res => {
const { errorCode, message, result } = res;
if(errorCode != 1) return this.$message.error(message);
if(result === null) {
this.getTrashList();
} else {
this.progress = result;
this.stateComponent = 'CycleWrap';
}
})
},
getTrashList() {
getTrashList().then(res => {
const { errorCode, message, result = [] } = res;
if(errorCode != 1) return this.$message.error(message);
this.trashList = result;
this.progress = result.length;
this.stateComponent = !result.length ? 'Success' : 'Pending';
})
},
dialogOpen() {
this.getTrashList();
isCleanTrashList().then(res => {
const { errorCode, message, result } = res;
if(errorCode != 1) return this.$message.error(message);
this.delTime = result;
})
},
getDelTime() {
let s = parseInt(this.delTime % (1000 * 60) / 1000);
let m = parseInt((this.delTime % (1000 * 60 * 60)) / (1000 * 60));
let h = parseInt(this.delTime % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
return `倒计时: ${h}h:${m}min:${s}s`;
},
doClean() {
if(!this.delTime) return;
cleanTrashList().then(res => {
const { errorCode, message } = res;
if(errorCode != 1) return this.$message.error(message);
this.$message.success('已开始执行');
this.dialogVisible = false;
this.getProgress();
})
}
}
}
</script>
<style lang="scss" scoped>
.trash {
position: fixed;
right: 0;
bottom: 370px;
z-index: 2;
display: flex;
flex-wrap: nowrap;
font-size: 14px;
padding: 8px 10px 8px 0;
background-color: #fff;
color: #1890ff;
box-shadow: 0 0 3px rgba(85, 85, 85, 0.808);
cursor: pointer;
transform: translateX(170px);
transition: .4s;
&:hover {
transform: translateX(0);
}
.trashIcon {
display: block;
font-size: 28px;
margin: 0 8px 0 10px;
}
span {
display: flex;
align-items: center;
margin-top: -2px;
}
.trashState {
display: flex;
justify-content: center;
align-items: center;
width: 26px;
height: 26px;
margin-left: 8px;
}
.pendingClass {
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
border-radius: 50%;
background-color: #F5222D;
color: #fff;
}
}
header {
color: #303133;
font-weight: 700;
}
.tagBox {
display: flex;
flex-wrap: wrap;
.tagItem {
margin-top: 10px;
margin-right: 10px;
padding: 5px 8px;
border: 1px solid #DCDFE6;
border-radius: 2px;
background-color: #FAFAFA;
font-size: 13px;
color: #606266;
}
}
</style>
\ No newline at end of file
src/request/api.js
...@@ -226,3 +226,58 @@ export const gradeList = (params = {}) => ...@@ -226,3 +226,58 @@ export const gradeList = (params = {}) =>
...params ...params
} }
}); });
// 获取垃圾桶进度
export const getProgress = (params = {}) =>
request({
url: '/delTagItem/progress',
method: 'get',
params: {
requestProject: 'gic-member-tag-web',
...params
}
});
// 获取垃圾桶列表
export const getTrashList = (params = {}) =>
request({
url: '/delTagItem/list',
method: 'get',
params: {
requestProject: 'gic-member-tag-web',
...params
}
});
// 添加垃圾桶列表
export const addTrashList = (params = {}) =>
request({
url: '/delTagItem/add',
method: 'get',
params: {
requestProject: 'gic-member-tag-web',
...params
}
});
// 执行垃圾桶
export const cleanTrashList = (params = {}) =>
request({
url: '/delTagItem/execute',
method: 'get',
params: {
requestProject: 'gic-member-tag-web',
...params
}
});
// 距离下次的可以执行时间
export const isCleanTrashList = (params = {}) =>
request({
url: '/delTagItem/remainingTime',
method: 'get',
params: {
requestProject: 'gic-member-tag-web',
...params
}
});
src/view/manualTag/manual-tag-value-edit.vue
...@@ -46,10 +46,10 @@ ...@@ -46,10 +46,10 @@
<!-- 删除的初始状态 --> <!-- 删除的初始状态 -->
<template v-else> <template v-else>
<el-popover placement="top" width="300" trigger="click" v-model="scope.row.showDelPopOver"> <el-popover placement="top" width="300" trigger="click" v-model="scope.row.showDelPopOver">
<p>删除标签后，符合该标签值的会员对应标签值将同步删除。一旦删除将无法恢复，确认要删除吗？</p> <p>选择删除后，请去批处理一键清除所有标签值。</p>
<div style="text-align: right; margin: 5px 0 0 0;"> <div style="text-align: right; margin: 5px 0 0 0;">
<el-button type="text" size="mini" @click.native="scope.row.showDelPopOver = false">取消</el-button> <el-button type="text" size="mini" @click.native="scope.row.showDelPopOver = false">取消</el-button>
<el-button type="primary" size="mini" @click.native="delTagApi(scope.$index, scope.row)">确定 <el-button type="primary" size="mini" @click.native="delTagApi(scope.$index, scope.row, $event)">确定
</el-button> </el-button>
</div> </div>
<el-button type="text" size="small" slot="reference">删除</el-button> <el-button type="text" size="small" slot="reference">删除</el-button>
...@@ -121,7 +121,9 @@ ...@@ -121,7 +121,9 @@
</el-dialog> </el-dialog>
</div> </div>
</div> </div>
<Trash ref="Trash" />
<vue-gic-footer></vue-gic-footer> <vue-gic-footer></vue-gic-footer>
<i id="aniIcon" class="iconfont icon-shougongbiaoqian aniIcon" :style="{ right: `${animationPos.x}px`, bottom: `${animationPos.y}px` }"></i>
</div> </div>
</template> </template>
<script> <script>
...@@ -131,6 +133,7 @@ import navCrumb from '@/components/nav/nav.vue'; ...@@ -131,6 +133,7 @@ import navCrumb from '@/components/nav/nav.vue';
import { export_json_to_excel } from '@/vendor/Export2Excel'; import { export_json_to_excel } from '@/vendor/Export2Excel';
import showMsg from '@/common/js/showmsg'; import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error'; import errMsg from '@/common/js/error';
import Trash from '@/components/Trash.vue';
/* eslint-disable */ /* eslint-disable */
import { getRequest, postRequest, postForm } from '@/api/api'; import { getRequest, postRequest, postForm } from '@/api/api';
/** /**
...@@ -188,7 +191,11 @@ export default { ...@@ -188,7 +191,11 @@ export default {
refreshTag: [], refreshTag: [],
// 需要显示上传完成的标签值id // 需要显示上传完成的标签值id
uploadedTag: [], uploadedTag: [],
timer: null timer: null,
animationPos: {
x: 1000,
y: 500
}
}; };
}, },
computed: { computed: {
...@@ -281,22 +288,25 @@ export default { ...@@ -281,22 +288,25 @@ export default {
}, },
// 删除标签值 // 删除标签值
delTagApi(index, item) { delTagApi(index, item, e) {
this.startAnimation(e)
const para = { const para = {
tagItemId: item.tagItemId itemId: item.tagItemId
}; };
this.refreshTag.push({ this.refreshTag.push({
tagItemIndex: index, tagItemIndex: index,
tagItemId: item.tagItemId tagItemId: item.tagItemId
}); });
getRequest('/memberTag/delHandTagItem', para).then(res => { getRequest('/delTagItem/add', para).then(res => {
const { errorCode } = res.data; const { errorCode, result } = res.data;
if (errorCode === 1) { if (errorCode === 1) {
item.delStatus = 0; item.delStatus = 0;
this.$refs.Trash.getTrashList();
this.handleRefreshTag(); this.handleRefreshTag();
return; return;
} }
errMsg.errorMsg(res.data); // errMsg.errorMsg(res.data);
this.$message.error(result)
}).catch(error => { }).catch(error => {
this.$message.error({ this.$message.error({
duration: 1000, duration: 1000,
...@@ -305,6 +315,17 @@ export default { ...@@ -305,6 +315,17 @@ export default {
}); });
}, },
startAnimation(e) {
this.animationPos = {
x: document.body.offsetWidth - e.pageX,
y: document.body.offsetHeight - e.pageY
}
document.querySelector('#aniIcon').style.display = 'block'
setTimeout(_ => {
document.querySelector('#aniIcon').style.display = 'none'
}, 1800)
},
// 获取标签值列表 // 获取标签值列表
getValueData() { getValueData() {
const para = { const para = {
...@@ -691,7 +712,8 @@ export default { ...@@ -691,7 +712,8 @@ export default {
clearTimeout(this.timer); clearTimeout(this.timer);
}, },
components: { components: {
navCrumb navCrumb,
Trash
} }
} }
</script> </script>
...@@ -871,4 +893,23 @@ export default { ...@@ -871,4 +893,23 @@ export default {
} }
} }
} }
.aniIcon {
display: none;
position: absolute;
z-index: 99999;
color: #1890ff;
font-size: 26px;
animation: toTrash 2s infinite;
opacity: 0;
}
@keyframes toTrash {
0% {
opacity: 1;
}
100% {
right: 0;
bottom: 380px;
font-size: 12px;
}
}
</style> </style>
src/view/platformTag/member-tag.vue
...@@ -41,7 +41,10 @@ ...@@ -41,7 +41,10 @@
<!-- 我的标签 --> <!-- 我的标签 -->
<div class="my-pop-tagbox" @click="expendsGroupList"> <div class="my-pop-tagbox" @click="expendsGroupList">
<p class="txt">已选标签</p> <p class="txt">
<i class="iconfont icon-shougongbiaoqian" style="margin-bottom:2px"></i>
已选标签
</p>
<p class="number-txt">{{ groupListNumber }}</p> <p class="number-txt">{{ groupListNumber }}</p>
</div> </div>
</div> </div>
...@@ -124,6 +127,7 @@ ...@@ -124,6 +127,7 @@
</div> </div>
<edit-tag :showEditTagPop.sync="showEditTagPop" :tagData="tagData" :title="editPopType === 'add' ? '添加标签' : '更新标签'" @returnTagData="returnTagData" @refersh="refersh"></edit-tag> <edit-tag :showEditTagPop.sync="showEditTagPop" :tagData="tagData" :title="editPopType === 'add' ? '添加标签' : '更新标签'" @returnTagData="returnTagData" @refersh="refersh"></edit-tag>
<manual-tag-edit :options="manualTagPop" :showPop.sync="manualTagPop.show" @save="addNewTag"></manual-tag-edit> <manual-tag-edit :options="manualTagPop" :showPop.sync="manualTagPop.show" @save="addNewTag"></manual-tag-edit>
<Trash />
</div> </div>
</template> </template>
...@@ -138,6 +142,7 @@ import ManualTagEdit from '../manualTag/manualTagEdit'; ...@@ -138,6 +142,7 @@ import ManualTagEdit from '../manualTag/manualTagEdit';
import { getMemberTag, getMemberTagList, addNewGroup, memberGroupList, groupCount } from '@/request/api'; import { getMemberTag, getMemberTagList, addNewGroup, memberGroupList, groupCount } from '@/request/api';
import EditTag from '../memberGroup/edit-tag'; import EditTag from '../memberGroup/edit-tag';
import { mapState } from 'vuex'; import { mapState } from 'vuex';
import Trash from '@/components/Trash.vue';
Vue.component(CollapseTransition.name, CollapseTransition); Vue.component(CollapseTransition.name, CollapseTransition);
...@@ -152,7 +157,8 @@ export default { ...@@ -152,7 +157,8 @@ export default {
TagContainer, TagContainer,
TagsGroupList, TagsGroupList,
EditTag, EditTag,
ManualTagEdit ManualTagEdit,
Trash
}, },
data() { data() {
...@@ -783,19 +789,22 @@ export default { ...@@ -783,19 +789,22 @@ export default {
.my-pop-tagbox { .my-pop-tagbox {
position: fixed; position: fixed;
z-index: 2; z-index: 2;
right: 120px; right: 0;
bottom: 100px; bottom: 230px;
height: 70px; height: 120px;
width: 70px; width: 45px;
color: #fff; // color: #fff;
background-color: #1890ff; background-color: #fff;
box-shadow: 0 0 5px #555; color: #1890ff;
border-radius: 50%; box-shadow: 0 0 3px rgba(85, 85, 85, 0.808);
// border-radius: 50%;
cursor: pointer; cursor: pointer;
.txt { .txt {
padding: 10px 13px 0;
text-align: center; text-align: center;
padding-top: 25px; // padding-top: 25px;
font-size: 12px; font-size: 14px;
line-height: 17px;
} }
.number-txt { .number-txt {
text-align: center; text-align: center;
...@@ -803,8 +812,9 @@ export default { ...@@ -803,8 +812,9 @@ export default {
font-size: 14px; font-size: 14px;
} }
&:hover { &:hover {
transition: all ease 0.3s; transition: all ease 0.4s;
transform: scale(1.2); // transform: scale(1.2);
width: 50px;
} }
} }
.group-right-list { .group-right-list {
......
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