Skip to content

M
memberTag-web
Commit fb6bc9d8 by 无尘
Options

add: 增加标签列表分类通用组件

parent 1fc695ac
Showing with 412 additions and 12 deletions
src/components/tagCategory.vue 0 → 100644
<!--
公共标签列表分类面包屑组件,通过 tagLibName 参数不同,区分不同的标签列表,请求不同的标签库字段
-->
<template>
<div class="common-wrap__temp">
<div class="common-wrap__currentTag inline-block">
<a :href="'#/'+tagLibName+'Lib'" class="common-wrap__currentTag__name">全部</a>
<i class="el-icon-arrow-right m-l-8 m-r-8"></i>
<template v-for="(item,index) in currentTagDatas">
<a :href="'#/'+tagLibName+'List?id='+item.id" class="common-wrap__currentTag__name">{{item.name}}</a>
<i class="el-icon-arrow-right m-l-8 m-r-8" v-if="currentTagDatas.length-1 != index"></i>
</template>
</div>
<div class="common-wrap__childTag inline-block">
<template v-for="(item,index) in childTagDatas">
<a href="" class="common-wrap__childTag__name">{{item.name}}</a>
</template>
</div>
</div>
</template>
<script>
import { getRequest, postRequest, postJson, postForm } from '@/api/api';
export default {
name: "tagCategory",
props: {
tagLibName: {
type: String
}
},
data() {
return {
// 子分类数据
currentTagDatas: [
{
id: 1,
name: '基本信息',
},
{
id: 2,
name: '地理信息',
},
],
childTagDatas: [
{
id: 1,
name: '其他一',
num: 12
},
{
id: 2,
name: '其他二',
num: 12
},
],
}
},
methods: {
/**
* 添加到我的标签库
*/
},
watch:{
},
mounted() {
var that = this
console.log(that.tagLibName)
},
components: {
}
}
</script>
<style lang="scss" scoped>
</style>
src/components/tagLib.vue
......@@ -16,19 +16,19 @@
<div class="common-libFields flex" >
<template v-for="(item,pindex) in libDatas">
<div class="common-lib__cell flex-1" :key="pindex">
<div :class="['common-lib__cell','flex-1',item.id == libRadio? 'border-primary-color':'']" :key="pindex">
<div class="border-box common-lib__cell__head">
<a :href="'#/platformTagList?test='+item.id" class="block"><i :class="['iconfont','common-lib__cell__icon',item.icon]"></i><span class="common-lib__cell__name">{{item.name}}</span><span class="platformTagLib-wrap__cell__icon fr"><i class="el-icon-arrow-right"></i></span>
<a :href="'#/'+tagCategory+'?test='+item.id" class="block"><i :class="['iconfont','common-lib__cell__icon',item.icon]"></i><span class="common-lib__cell__name">{{item.name}}</span><span class="platformTagLib-wrap__cell__icon fr"><i class="el-icon-arrow-right"></i></span>
</a>
</div>
<div class="border-box common-lib__cell__body">
<template v-for="(itemTwo,cindex) in item.children">
<div class="border-box common-lib__cell__fieldRow" :key="cindex">
<div class="inline-block common-lib__cell__fieldChild"><a :href="'#/platformTagList?test='+itemTwo.id" class="inline-block common-lib__cell__name">{{itemTwo.name}}</a><i class="el-icon-arrow-right"></i>
<div class="inline-block common-lib__cell__fieldChild"><a :href="'#/'+tagCategory+'?test='+itemTwo.id" class="inline-block common-lib__cell__name">{{itemTwo.name}}</a><i class="el-icon-arrow-right"></i>
</div>
<div class="inline-block common-lib__cell__fieldLastChild">
<template v-for="(itemThree,lindex) in itemTwo.children">
<a :href="'#/platformTagList?test='+itemThree.id" class="inline-block common-lib__cell__fieldName">{{itemThree.name}}</a>
<a :href="'#/'+tagCategory+'?test='+itemThree.id" class="inline-block common-lib__cell__fieldName">{{itemThree.name}}</a>
</template>
</div>
......
src/router/index.js
......@@ -49,6 +49,13 @@ export const constantRouterMap = [
title: '会员标签-平台标签列表'
}
},
{
path: '/platformTagDetail',
component: _import('platformTag','platformTagDetail'),
meta: {
title: '会员标签-平台标签详情'
}
},
// 手工标签
{
......
src/view/manualTag/manualTagLib.vue
......@@ -11,7 +11,7 @@
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import tagLib from '@/components/taglib.vue';
import tagLib from '@/components/tagLib.vue';
import { getRequest, postRequest, postJson, postForm } from '@/api/api';
export default {
name: "manualTagLib",
......@@ -29,7 +29,7 @@
}
],
tagCategory: 'manualTag', // 当前标签类别
tagCategory: 'manualTagList', // 当前标签类别
}
},
methods: {
......
src/view/myTag/myTagLib.vue
......@@ -11,7 +11,7 @@
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import tagLib from '@/components/taglib.vue';
import tagLib from '@/components/tagLib.vue';
import { getRequest, postRequest, postJson, postForm } from '@/api/api';
export default {
name: "myTagLib",
......@@ -28,7 +28,7 @@
path: ''
}
],
tagCategory: 'myTag', // 当前标签类别
tagCategory: 'myTagList', // 当前标签类别
}
},
methods: {
......
src/view/platformTag/platformTagDetail.vue 0 → 100644
<template>
<div class="manualTagEdit-wrap common-wrap">
<nav-crumb :navpath="navpath"></nav-crumb>
<div class="right-content">
<div class="right-box">
</div>
</div>
<vue-gic-footer></vue-gic-footer>
</div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import { getRequest, postRequest, postJson, postForm } from '@/api/api';
export default {
name: "manualTagEdit",
data() {
return {
// 面包屑参数
navpath: [
{
name: '首页',
path: ''
},
{
name: '会员标签',
path: ''
}
],
}
},
methods: {
},
mounted() {
},
components: {
navCrumb
}
}
</script>
<style lang="scss" scoped>
</style>
src/view/platformTag/platformTagLib.vue
......@@ -69,7 +69,7 @@
}
],
tagCategory: 'platformTag', // 当前标签类别
tagCategory: 'platformTagList', // 当前标签类别
}
},
methods: {
......
src/view/platformTag/platformTagList.vue
......@@ -3,7 +3,83 @@
<nav-crumb :navpath="navpath"></nav-crumb>
<div class="right-content">
<div class="right-box">
<!-- 子类 -->
<div class="common-wrap__cateTags">
<!-- <div class="common-wrap__currentTag inline-block">
<a href="#/platformTagList?v=122" class="common-wrap__currentTag__name">全部</a>
<i class="el-icon-arrow-right m-l-8 m-r-8"></i>
<template v-for="(item,index) in currentTagDatas">
<a href="" class="common-wrap__currentTag__name">{{item.name}}</a>
<i class="el-icon-arrow-right m-l-8 m-r-8" v-if="currentTagDatas.length-1 != index"></i>
</template>
</div>
<div class="common-wrap__childTag inline-block">
<template v-for="(item,index) in childTagDatas">
<a href="" class="common-wrap__childTag__name">{{item.name}}</a>
</template>
</div> -->
<tag-category :tagLibName="tagLibName"></tag-category>
</div>
<div class="common-wrap__opt">
<el-input
class="w-184"
placeholder="请输入标签"
prefix-icon="el-icon-search"
v-model="tagSearch"
@keyup.enter.native="searchEnterFun">
</el-input>
<el-button type="primary" @click="toAddMyTagLib" class="fr">添加至我的标签库</el-button>
</div>
<div class="common-wrap__table m-t-20">
<el-table
ref="multipleTable"
:data="tagTableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectChange">
<el-table-column
type="selection"
>
</el-table-column>
<el-table-column
prop="name"
label="标签名称"
>
<!-- <template slot-scope="scope">{{ scope.row.name }}</template> -->
</el-table-column>
<el-table-column
prop="tagDescribe"
label="标签描述"
>
</el-table-column>
<el-table-column
label="是否实时"
>
<template slot-scope="scope">
{{scope.row.isRealTime == 1? '实时':'非实时'}}
</template>
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<router-link :to="{path:'/platformTagDetail',query:{name:scope.row.id}}" class="edit-btn el-button--text">详情</router-link>
<el-button type="text" size="small" class="p-l-32" @click="toAddMyTagLib(scope.row.id)">添加至我的标签库</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="block common-wrap__page text-right" v-if="tagTableData.length!=0">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
</div>
<vue-gic-footer></vue-gic-footer>
......@@ -11,22 +87,122 @@
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import tagCategory from '@/components/tagCategory.vue';
import { getRequest, postRequest, postJson, postForm } from '@/api/api';
export default {
name: "platformTagList",
data() {
return {
// 面包屑参数
navpath: [
{
name: '首页',
path: ''
},
{
name: '会员标签',
path: ''
}
],
tagLibName: 'platformTag',// 面包屑分类需要的参数
tagSearch: '', // 搜索值绑定的参数
// 标签列表数据
tagTableData:[
{
id: 1,
name: "123",
tagDescribe: '描述描述，最多200字，一行显示50字，默认显示一行',
isRealTime: 1
}
],
// 分页参数
currentPage: 1,
pageSize: 20,
total: 0,
// 子分类数据
currentTagDatas: [
{
id: 1,
name: '基本信息',
},
{
id: 2,
name: '地理信息',
},
],
childTagDatas: [
{
id: 1,
name: '其他一',
num: 12
},
{
id: 2,
name: '其他二',
num: 12
},
],
}
},
methods: {
/**
* 添加到我的标签库
*/
toAddMyTagLib(id) {
var that = this
console.log(id)
},
/**
* 搜索标签
*/
searchEnterFun(e) {
var that = this
console.log(e)
},
/**
* 表格---多选
*/
handleSelectChange(val) {
var that = this
console.log(val);
},
/**
* 分页---页码变化
*/
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
/**
* 分页---当前页变化
*/
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
},
/**
* 获取当前分类下下的标签
*/
getTagList(val) {
var that = this
},
},
mounted() {
var that = this
console.log(that.$route.query);
that.getTagList()
},
components: {
navCrumb
navCrumb,
tagCategory
}
}
</script>
......
static/css/public.css
......@@ -317,7 +317,15 @@ input:focus {
zoom: 1;
}
.text-right {
text-align: right;
}
/* 边距 */
.m-l-8 {
margin-left: 8px;
}
.m-l-16 {
margin-left: 16px;
}
......@@ -326,6 +334,22 @@ input:focus {
margin-top: 10px;
}
.m-t-20 {
margin-top: 20px;
}
.m-r-8 {
margin-right: 8px;
}
.p-l-32 {
padding-left: 32px;
}
.p-l-36 {
padding-left: 36px;
}
.w-184 {
width: 184px;
}
......@@ -596,6 +620,19 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
line-height: 48px;
}
.el-table th .cell {
color: #909399;
font-size: 14px;
}
#index .el-table__empty-block {
height: 256px;
}
.common-wrap__table .el-table__empty-text {
margin-bottom: 40px;
}
/* 会员标签 */
.common-lib__cell__fieldName::before {
content: '';
......@@ -626,6 +663,10 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
border-radius: 3px;
}
.common-libFields .common-lib__cell.border-primary-color {
border-color: #1890ff;
}
.common-libFields .common-lib__cell:nth-child(2n+1) {
margin-right: 30px;
}
......@@ -674,6 +715,8 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
.common-libFields .common-lib__cell__fieldChild i {
font-weight: normal;
color: #C0C4CC;
font-size: 14px;
padding-left: 6px;
}
.common-libFields .common-lib__cell__fieldChild .common-lib__cell__name {
......@@ -708,3 +751,52 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
.common-libFields .common-lib__cell__radio .el-radio__label {
display: none;
}
/* 通用标签列表 面包屑头部标签 */
.common-wrap__cateTags {
position: relative;
width: 100%;
height: 45px;
margin-bottom: 20px;
border-bottom: 1px solid #EBEEF5;
}
.common-wrap__cateTags .common-wrap__currentTag {
font-size: 0;
color: #303133;
}
.common-wrap__currentTag .common-wrap__currentTag__name {
font-size: 14px;
color: #303133;
font-weight: 700;
}
.common-wrap__currentTag i {
font-size: 14px;
color: #909399;
}
.common-wrap__cateTags .common-wrap__childTag {
font-size: 14px;
color: #606266;
}
.common-wrap__childTag .common-wrap__childTag__name{
}
/* 分页 */
.common-wrap__page {
padding: 24px 0 30px 0;
}
.common-wrap__page .el-input {
font-size: 12px;
}
.common-wrap__page .el-input__inner {
height: 28px;
line-height: 28px;
}
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