Skip to content

M
memberTag-web
Commit eac14442 by 无尘
Options

add: 增加excel 导入导出插件

parent 21628c00
Showing with 667 additions and 21 deletions
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
......@@ -19,12 +19,11 @@
"@tinymce/tinymce-vue": "^1.0.8",
"element-ui": "^2.3.9",
"file-saver": "^1.3.8",
"script-loader": "^0.7.2",
"tinymce": "^4.8.3",
"vue": "^2.5.2",
"vue-clipboard2": "^0.2.0",
"vue-router": "^3.0.1",
"xlsx": "^0.13.0"
"xlsx": "^0.13.5"
},
"devDependencies": {
"@antv/data-set": "^0.8.9",
......@@ -58,6 +57,7 @@
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"sass-loader": "^7.0.1",
"script-loader": "^0.7.2",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
......
src/components/uploadExcel/index.vue 0 → 100644
<template>
<div>
<input id="excel-upload-input" ref="excel-upload-input" type="file" accept=".xlsx, .xls, .csv" class="c-hide" @change="handkeFileChange">
<div id="drop">
<el-button style="margin-left:16px;" size="mini" type="text" @click="handleUpload">点击导入会员</el-button>
<div class="excel-upload__tip">只能上传一个文件,且不超过</div>
</div>
</div>
</template>
<script>
import XLSX from 'xlsx'
export default {
data() {
return {
loading: false,
excelData: {
header: null,
results: null
}
}
},
methods: {
generateDate({ header, results }) {
this.excelData.header = header
this.excelData.results = results
this.$emit('on-selected-file', this.excelData)
},
handleDrop(e) {
e.stopPropagation()
e.preventDefault()
const files = e.dataTransfer.files
if (files.length !== 1) {
this.$message.error('Only support uploading one file!')
return
}
const itemFile = files[0] // only use files[0]
this.readerData(itemFile)
e.stopPropagation()
e.preventDefault()
},
handleDragover(e) {
e.stopPropagation()
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
},
handleUpload() {
console.log(this.excelData.header)
document.getElementById('excel-upload-input').click()
},
handkeFileChange(e) {
const files = e.target.files
console.log(e)
const itemFile = files[0] // only use files[0]
if (!itemFile) return
this.readerData(itemFile)
this.$refs['excel-upload-input'].value = null // fix can't select the same excel
},
readerData(itemFile) {
const reader = new FileReader()
reader.onload = e => {
const data = e.target.result
const fixedData = this.fixdata(data)
const workbook = XLSX.read(btoa(fixedData), { type: 'base64' })
const firstSheetName = workbook.SheetNames[0]
const worksheet = workbook.Sheets[firstSheetName]
const header = this.get_header_row(worksheet)
const results = XLSX.utils.sheet_to_json(worksheet)
this.generateDate({ header, results })
}
reader.readAsArrayBuffer(itemFile)
},
fixdata(data) {
let o = ''
let l = 0
const w = 10240
for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
return o
},
get_header_row(sheet) {
const headers = []
const range = XLSX.utils.decode_range(sheet['!ref'])
let C
const R = range.s.r /* start in the first row */
for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */
var hdr = 'UNKNOWN ' + C // <-- replace with your desired default
if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
headers.push(hdr)
}
return headers
}
}
}
</script>
<style scoped>
#excel-upload-input{
display: none;
z-index: -9999;
}
#drop{
/*border: 2px dashed #bbb;
width: 600px;
height: 160px;
line-height: 160px;*/
margin: 0 auto;
/*font-size: 24px;*/
/*border-radius: 5px;*/
/*text-align: center;*/
/*color: #bbb;*/
position: relative;
}
.excel-upload__tip {
margin-left: 16px;
font-size: 12px;
color: #909399;
}
</style>
src/view/manualTag/manualTagList.vue
......@@ -3,7 +3,99 @@
<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 m-l-8">添加至我的标签库</el-button>
<el-button type="primary" @click="toManualTagEdit" class="fr">新增标签</el-button>
<el-button type="primary" @click="showCateDialog" 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:'/myTagDetail',query:{name:scope.row.id}}" class="edit-btn el-button--text">详情</router-link>
<router-link :to="{path:'/manualTagEdit',query:{name:scope.row.id}}" class="edit-btn el-button--text p-l-20">编辑</router-link>
<el-button type="text" size="small" class="p-l-20" @click="toAddMyTagLib(scope.row.id)">添加至我的标签库</el-button>
<el-popover
placement="top"
width="160"
v-model="scope.row.popVisible">
<p style="line-height: 1.5; padding: 10px 10px 20px;">确认删除吗？</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="cancelDelTag(scope.$index,scope.row)">取消</el-button>
<el-button type="primary" size="mini" @click="toDelTag(scope.$index,scope.row)">确定</el-button>
</div>
<el-button slot="reference" class="p-l-20" type="text">
删除
</el-button>
</el-popover>
</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>
......@@ -30,7 +122,7 @@
</el-form>
<el-table :data="cateTableData" height="275">
<el-table-column label="分类名称" fixed>
<el-table-column label="分类名称">
<template slot-scope="scope">
{{ !scope.row.editAble? scope.row.name: ''}}
<el-input v-if="scope.row.editAble" size="small" class="h5-el-input" v-model="scope.row.inputValue" type="text" placeholder="请输入分类名称" @keyup.native="(value) => toEditInput(value,scope.$index,scope.row)"></el-input>
......@@ -57,6 +149,7 @@
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import tagCategory from '@/components/tagCategory.vue';
import strLength from '@/common/js/strlen';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
......@@ -76,8 +169,53 @@
path: ''
}
],
tagLibName: 'manualTag',// 面包屑分类需要的参数
tagSearch: '', // 搜索值绑定的参数
// 标签列表数据
tagTableData:[
{
id: 1,
name: "123",
tagDescribe: '描述描述，最多200字，一行显示50字，默认显示一行',
isRealTime: 1,
popVisible: false,
}
],
// 分页参数
currentPage: 1,
pageSize: 20,
total: 0,
// 子分类数据
currentTagDatas: [
{
id: 1,
name: '基本信息',
},
{
id: 2,
name: '地理信息',
},
],
childTagDatas: [
{
id: 1,
name: '其他一',
num: 12
},
{
id: 2,
name: '其他二',
num: 12
},
],
// 分类设置
cateTableVisible: true,
cateTableVisible: false,
inputNum: 0,
limitLength: 10,
cateForm: {
......@@ -122,6 +260,92 @@
},
methods: {
/**
* 路由跳转
*/
changeRoute(route) {
this.$router.push(route);
},
/**
* 添加到我的标签库
*/
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
},
/**
* 删除当前标签 -- 取消
*/
cancelDelTag(index,row) {
var that = this
row.popVisible = false
},
/**
* 删除当前标签 -- 取消
*/
toDelTag(index,row) {
var that = this
that.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
that.tagTableData.splice(index,1)
}).catch(() => {
});
},
/**
* 点击新增标签
*/
toManualTagEdit() {
var that = this
that.changeRoute('/manualTagEdit')
},
/**
* 判断添加重复字段
*/
isRepeat(arr) {
......@@ -136,6 +360,14 @@
},
/**
* 点击分类设置-显示弹窗
*/
showCateDialog() {
var that = this
that.cateTableVisible = true
},
/**
* 添加分类
*/
toAddCate(formName) {
......@@ -282,7 +514,8 @@
},
components: {
navCrumb
navCrumb,
tagCategory
}
}
</script>
......
src/view/memberGroup/memberGroupList.vue
......@@ -3,7 +3,112 @@
<nav-crumb :navpath="navpath"></nav-crumb>
<div class="right-content">
<div class="right-box">
<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="toAddGroup" 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%">
<el-table-column
prop="name"
label="标签名称"
width="150px"
show-overflow-tooltip>
<!-- <template slot-scope="scope">{{ scope.row.name }}</template> -->
</el-table-column>
<el-table-column
label="是否实时"
width="100px"
>
<template slot-scope="scope">
{{scope.row.isRealTime == 1? '实时':'非实时'}}
</template>
</el-table-column>
<el-table-column
prop="recentUpdateDate"
label="最近更新时间"
width="150px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="recentUpdateDate"
label="更新频率"
width="150px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="state"
label="状态"
width="50px"
>
<template slot-scope="scope">
{{scope.row.state == 1? '有效':'失效'}}
</template>
</el-table-column>
<el-table-column
prop="peopleCover"
label="覆盖人数"
width="150px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
width="150px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="recentUpdateDate"
label="到期时间"
width="150px"
show-overflow-tooltip>
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<el-button type="text" size="small" class="" @click="toInvalid(scope.row.id)">失效</el-button>
<router-link :to="{path:'/memberGroupDetail',query:{name:scope.row.id}}" class="edit-btn el-button--text p-l-20">详情</router-link>
<router-link :to="{path:'/memberGroupEdit',query:{name:scope.row.id}}" class="edit-btn el-button--text p-l-20">编辑</router-link>
<el-popover
placement="top"
width="160"
v-model="scope.row.popVisible">
<p style="line-height: 1.5; padding: 10px 10px 20px;">确认删除吗？</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="cancelDelTag(scope.$index,scope.row)">取消</el-button>
<el-button type="primary" size="mini" @click="toDelTag(scope.$index,scope.row)">确定</el-button>
</div>
<el-button slot="reference" class="p-l-20" type="text">
删除
</el-button>
</el-popover>
</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>
......@@ -13,13 +118,113 @@
import navCrumb from '@/components/nav/nav.vue';
import { getRequest, postRequest, postJson, postForm } from '@/api/api';
export default {
name: "memberGroupList",
name: 'memberGroupList',
data() {
return {
// 面包屑参数
navpath: [
{
name: '首页',
path: ''
},
{
name: '会员标签',
path: ''
}
],
tagSearch: '', // 搜索值绑定的参数
// 标签列表数据
tagTableData:[
{
id: 1,
name: '123',
isRealTime: 1,
recentUpdateDate: '2018-09-30 14:30:28',
updateRate: '-',
state: 1,
peopleCover: '456566',
createTime: '2018-09-30 14:30:28',
expiredTime: '2018-09-30 14:30:28',
popVisible: false,
}
],
// 分页参数
currentPage: 1,
pageSize: 20,
total: 0,
}
},
methods: {
/**
* 路由跳转
*/
changeRoute(route) {
this.$router.push(route);
},
/**
* 新增分组
*/
toAddGroup() {
var that = this
that.changeRoute('/memberGroupEdit')
},
/**
* 搜索标签
*/
searchEnterFun(e) {
var that = this
console.log(e)
},
/**
* 分页---页码变化
*/
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
/**
* 分页---当前页变化
*/
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
},
/**
* 点击失效
*/
toInvalid(id) {
var that = this
},
/**
* 删除当前标签 -- 取消
*/
cancelDelTag(index,row) {
var that = this
row.popVisible = false
},
/**
* 删除当前标签 -- 取消
*/
toDelTag(index,row) {
var that = this
that.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
that.tagTableData.splice(index,1)
}).catch(() => {
});
},
},
mounted() {
......
src/view/myTag/myTagList.vue
......@@ -56,18 +56,18 @@
<el-button type="text" size="small" class="p-l-32" @click="addTemporary(scope.row.id)">添加至暂存架</el-button>
<!-- <el-button type="text" size="small" class="p-l-32" @click="toDelTag(scope.row.id)">删除</el-button> -->
<el-popover
placement="top"
width="160"
v-model="scope.row.popVisible">
<p style="line-height: 1.5; padding: 10px 10px 20px;">确认删除吗？</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="cancelDelTag(scope.$index,scope.row)">取消</el-button>
<el-button type="primary" size="mini" @click="toDelTag(scope.$index,scope.row)">确定</el-button>
</div>
<el-button slot="reference" class="m-l-10" type="text">
删除
</el-button>
</el-popover>
placement="top"
width="160"
v-model="scope.row.popVisible">
<p style="line-height: 1.5; padding: 10px 10px 20px;">确认删除吗？</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="cancelDelTag(scope.$index,scope.row)">取消</el-button>
<el-button type="primary" size="mini" @click="toDelTag(scope.$index,scope.row)">确定</el-button>
</div>
<el-button slot="reference" class="m-l-10" type="text">
删除
</el-button>
</el-popover>
</template>
</el-table-column>
</el-table>
......@@ -170,6 +170,7 @@
changeRoute(route) {
this.$router.push(route);
},
/**
* 显示标签详情缩小版
*/
......
src/view/platformTag/platformTagList.vue
......@@ -62,7 +62,7 @@
<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>
<router-link :to="{path:'/myTagDetail',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>
......
static/css/public.css
......@@ -338,6 +338,10 @@ input:focus {
margin-left: 20px;
}
.m-t-05 {
margin-top: -5px;
}
.m-t-10 {
margin-top: 10px;
}
......@@ -374,6 +378,10 @@ input:focus {
padding: 0 4px;
}
.p-l-8 {
padding-left: 8px;
}
.p-l-20 {
padding-left: 20px;
}
......@@ -386,6 +394,10 @@ input:focus {
padding-left: 36px;
}
.p-r-8 {
padding-right: 8px;
}
.w-86 {
width: 86px;
}
......@@ -398,10 +410,30 @@ input:focus {
width: 98px;
}
.w-180 {
width: 180px;
}
.w-182 {
width: 182px;
}
.w-184 {
width: 184px;
}
.w-290 {
width: 290px;
}
.w-375 {
width: 375px;
}
.w-485 {
width: 485px;
}
.border-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
......@@ -440,6 +472,14 @@ input:focus {
flex: 1;
}
.flex-row {
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}
.flex-align-center {
-webkit-box-align: center;
-webkit-align-items: center;
......@@ -465,6 +505,10 @@ i {
font-weight: normal;
}
.font-12 {
font-size: 12px;
}
.font-14 {
font-size: 14px;
}
......@@ -483,6 +527,14 @@ i {
color: #1890ff;
}
.color-303133 {
color: #303133;
}
.color-909399 {
color: #909399;
}
.pagewrap {
margin: 20px 0;
text-align: right;
......@@ -1118,7 +1170,38 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
overflow: unset;
}
.el-date-editor .el-range__close-icon {
line-height: 27px;
}
.manualTagEdit-wrap__form .input-label {
position: absolute;
right: 10px;
top: 2px;
font-size: 12px;
color: #909399;
}
.manualTagEdit-wrap__set .input-label {
position: absolute;
right: 80px;
top: 10px;
font-size: 12px;
color: #909399;
}
.manualTagEdit-wrap__form .textarea-label {
position: absolute;
right: 10px;
top: 65px;
font-size: 12px;
color: #909399;
}
.manualTagEdit-wrap__form .el-textarea__inner {
resize: none;
height: 96px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
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