1
This commit is contained in:
146
demo/src/views/users/recommend_blocks.vue
Normal file
146
demo/src/views/users/recommend_blocks.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<div class="content-view">
|
||||
<div class="table-head-tool">
|
||||
<Button type="primary" @click="showAddWarp">新增</Button>
|
||||
<Form ref="formInline" :model="gridOption.param.seachOption" inline :label-width="80">
|
||||
<FormItem :label-width="20" class="flex">
|
||||
<Select v-model="gridOption.param.seachOption.key" style="width: 120px"
|
||||
:placeholder="seachTypePlaceholder">
|
||||
<Option v-for="item in seachTypes" :value="item.key" :key="item.key">{{ item.value }}</Option>
|
||||
</Select>
|
||||
<Input class="ml10" v-model="gridOption.param.seachOption.value" style="width: 200px" search
|
||||
placeholder="请输入关键字" @on-search="query(1)" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="query(1)">查询</Button>
|
||||
<Button type="default" @click="resetQuery" class="ml10">重置</Button>
|
||||
<Button type="default" @click="exportCsv">导出</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<tables :columns="listColumns" :value="gridOption.data" :pageOption="gridOption.param.pageOption"
|
||||
@changePage="query"></tables>
|
||||
</div>
|
||||
<editModal ref="editModal" :columns="editColumns" :rules="gridOption.rules"> </editModal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import funTool from '@/libs/funTool'
|
||||
import uiTool from '@/libs/uiTool'
|
||||
import recommend_blocksServer from '@/api/users/recommend_blocks_server.js'
|
||||
export default {
|
||||
data() {
|
||||
let rules = {}
|
||||
|
||||
rules["user_id"] = [{ required: true, type: "number", message: '请填写用户ID', trigger: 'change' }];
|
||||
rules["blocked_user_id"] = [{ required: true, type: "number", message: '请填写被屏蔽用户ID', trigger: 'change' }];
|
||||
rules["block_time"] = [{ required: false, message: '请填写屏蔽时间', trigger: 'change' }];
|
||||
|
||||
return {
|
||||
seachTypes: [
|
||||
{ key: 'user_id', value: '用户ID' },
|
||||
{ key: 'blocked_user_id', value: '被屏蔽用户ID' },
|
||||
{ key: 'nickname', value: '用户昵称' }
|
||||
],
|
||||
seachTypePlaceholder: '请选择搜索类型',
|
||||
gridOption: {
|
||||
param: {
|
||||
seachOption: {
|
||||
key: 'nickname',
|
||||
value: ''
|
||||
},
|
||||
pageOption: {
|
||||
page: 1,
|
||||
pageSize: 20
|
||||
}
|
||||
},
|
||||
data: [],
|
||||
rules: rules
|
||||
},
|
||||
listColumns: [
|
||||
{ title: 'ID', key: 'id', minWidth: 80 },
|
||||
{ title: '用户ID', key: 'user_id', minWidth: 100 },
|
||||
{ title: '被屏蔽用户ID', key: 'blocked_user_id', minWidth: 120 },
|
||||
{ title: '用户昵称', key: 'nickname', minWidth: 150 },
|
||||
{ title: '被屏蔽用户昵称', key: 'blocked_nickname', minWidth: 150 },
|
||||
{ title: '屏蔽时间', key: 'block_time', minWidth: 160 },
|
||||
{ title: '创建时间', key: 'create_time', minWidth: 160 },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
type: 'template',
|
||||
render: (h, params) => {
|
||||
let btns = [
|
||||
{
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
click: () => {
|
||||
this.showEditWarp(params.row)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '删除',
|
||||
type: 'error',
|
||||
click: () => {
|
||||
this.delConfirm(params.row)
|
||||
},
|
||||
},
|
||||
]
|
||||
return uiTool.getBtn(h, btns)
|
||||
},
|
||||
}
|
||||
],
|
||||
editColumns: [
|
||||
{ title: '用户ID', key: 'user_id', type: 'number', required: true },
|
||||
{ title: '被屏蔽用户ID', key: 'blocked_user_id', type: 'number', required: true },
|
||||
{ title: '屏蔽时间', key: 'block_time', type: 'datetime' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.query(1);
|
||||
},
|
||||
methods: {
|
||||
query(page) {
|
||||
this.gridOption.param.pageOption.page = page;
|
||||
recommend_blocksServer.page(this.gridOption.param).then(res => {
|
||||
this.gridOption.data = res.data.rows;
|
||||
this.gridOption.param.pageOption.total = res.data.count;
|
||||
});
|
||||
},
|
||||
showAddWarp() {
|
||||
this.$refs.editModal.showModal();
|
||||
},
|
||||
showEditWarp(row) {
|
||||
this.$refs.editModal.showModal(row);
|
||||
},
|
||||
delConfirm(row) {
|
||||
uiTool.delConfirm(async () => {
|
||||
await recommend_blocksServer.del(row)
|
||||
rootVue.$Message.success('删除成功!')
|
||||
this.query(1)
|
||||
})
|
||||
},
|
||||
exportCsv() {
|
||||
recommend_blocksServer.exportCsv(this.gridOption.param).then(res => {
|
||||
funTool.downloadFile(res, '推荐屏蔽.csv');
|
||||
});
|
||||
},
|
||||
resetQuery() {
|
||||
this.gridOption.param.seachOption = {
|
||||
key: 'nickname',
|
||||
value: ''
|
||||
};
|
||||
this.query(1);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
seachTypePlaceholder() {
|
||||
const selected = this.seachTypes.find(item => item.key === this.gridOption.param.seachOption.key);
|
||||
return selected ? selected.value : '请选择搜索类型';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
147
demo/src/views/users/user_follows.vue
Normal file
147
demo/src/views/users/user_follows.vue
Normal file
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div class="content-view">
|
||||
<div class="table-head-tool">
|
||||
<Button type="primary" @click="showAddWarp">新增</Button>
|
||||
<Form ref="formInline" :model="gridOption.param.seachOption" inline :label-width="80">
|
||||
<FormItem :label-width="20" class="flex">
|
||||
<Select v-model="gridOption.param.seachOption.key" style="width: 120px"
|
||||
:placeholder="seachTypePlaceholder">
|
||||
<Option v-for="item in seachTypes" :value="item.key" :key="item.key">{{ item.value }}</Option>
|
||||
</Select>
|
||||
<Input class="ml10" v-model="gridOption.param.seachOption.value" style="width: 200px" search
|
||||
placeholder="请输入关键字" @on-search="query(1)" />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="query(1)">查询</Button>
|
||||
<Button type="default" @click="resetQuery" class="ml10">重置</Button>
|
||||
<Button type="default" @click="exportCsv">导出</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<tables :columns="listColumns" :value="gridOption.data" :pageOption="gridOption.param.pageOption"
|
||||
@changePage="query"></tables>
|
||||
</div>
|
||||
<editModal ref="editModal" :columns="editColumns" :rules="gridOption.rules"> </editModal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import funTool from '@/libs/funTool'
|
||||
import uiTool from '@/libs/uiTool'
|
||||
import menuServer from '@/api/system_high/menuServer.js'
|
||||
import user_followsServer from '@/api/users/user_follows_server.js'
|
||||
export default {
|
||||
data() {
|
||||
let rules = {}
|
||||
|
||||
rules["follower_id"] = [{ required: true, type: "number", message: '请填写关注者ID', trigger: 'change' }];
|
||||
rules["following_id"] = [{ required: true, type: "number", message: '请填写被关注者ID', trigger: 'change' }];
|
||||
rules["follow_time"] = [{ required: false, message: '请填写关注时间', trigger: 'change' }];
|
||||
|
||||
return {
|
||||
seachTypes: [
|
||||
{ key: 'follower_id', value: '关注者ID' },
|
||||
{ key: 'following_id', value: '被关注者ID' },
|
||||
{ key: 'nickname', value: '用户昵称' }
|
||||
],
|
||||
seachTypePlaceholder: '请选择搜索类型',
|
||||
gridOption: {
|
||||
param: {
|
||||
seachOption: {
|
||||
key: 'nickname',
|
||||
value: ''
|
||||
},
|
||||
pageOption: {
|
||||
page: 1,
|
||||
pageSize: 20
|
||||
}
|
||||
},
|
||||
data: [],
|
||||
rules: rules
|
||||
},
|
||||
listColumns: [
|
||||
{ title: 'ID', key: 'id', minWidth: 80 },
|
||||
{ title: '关注者ID', key: 'follower_id', minWidth: 100 },
|
||||
{ title: '被关注者ID', key: 'following_id', minWidth: 120 },
|
||||
{ title: '关注者昵称', key: 'nickname', minWidth: 150 },
|
||||
{ title: '被关注者昵称', key: 'followed_nickname', minWidth: 150 },
|
||||
{ title: '关注时间', key: 'follow_time', minWidth: 160 },
|
||||
{ title: '创建时间', key: 'create_time', minWidth: 160 },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
type: 'template',
|
||||
render: (h, params) => {
|
||||
let btns = [
|
||||
{
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
click: () => {
|
||||
this.showEditWarp(params.row)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '删除',
|
||||
type: 'error',
|
||||
click: () => {
|
||||
this.delConfirm(params.row)
|
||||
},
|
||||
},
|
||||
]
|
||||
return uiTool.getBtn(h, btns)
|
||||
},
|
||||
}
|
||||
],
|
||||
editColumns: [
|
||||
{ title: '关注者ID', key: 'follower_id', type: 'number', required: true },
|
||||
{ title: '被关注者ID', key: 'following_id', type: 'number', required: true },
|
||||
{ title: '关注时间', key: 'follow_time', type: 'datetime' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.query(1);
|
||||
},
|
||||
methods: {
|
||||
query(page) {
|
||||
this.gridOption.param.pageOption.page = page;
|
||||
user_followsServer.page(this.gridOption.param).then(res => {
|
||||
this.gridOption.data = res.data.rows;
|
||||
this.gridOption.param.pageOption.total = res.data.count;
|
||||
});
|
||||
},
|
||||
showAddWarp() {
|
||||
this.$refs.editModal.showModal();
|
||||
},
|
||||
showEditWarp(row) {
|
||||
this.$refs.editModal.showModal(row);
|
||||
},
|
||||
delConfirm(row) {
|
||||
uiTool.delConfirm(async () => {
|
||||
await user_followsServer.del(row)
|
||||
rootVue.$Message.success('删除成功!')
|
||||
this.query(1)
|
||||
})
|
||||
},
|
||||
exportCsv() {
|
||||
user_followsServer.exportCsv(this.gridOption.param).then(res => {
|
||||
funTool.downloadFile(res, '用户关注关系.csv');
|
||||
});
|
||||
},
|
||||
resetQuery() {
|
||||
this.gridOption.param.seachOption = {
|
||||
key: 'nickname',
|
||||
value: ''
|
||||
};
|
||||
this.query(1);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
seachTypePlaceholder() {
|
||||
const selected = this.seachTypes.find(item => item.key === this.gridOption.param.seachOption.key);
|
||||
return selected ? selected.value : '请选择搜索类型';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
173
demo/src/views/users/user_tracking.vue
Normal file
173
demo/src/views/users/user_tracking.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<div class="content-view">
|
||||
<div class="table-head-tool">
|
||||
<Button type="primary" @click="showAddWarp">新增</Button>
|
||||
<Form ref="formInline" :model="gridOption.param.seachOption" inline :label-width="80">
|
||||
<FormItem :label-width="20" class="flex">
|
||||
<Select v-model="gridOption.param.seachOption.key" style="width: 120px"
|
||||
:placeholder="seachTypePlaceholder">
|
||||
<Option v-for="item in seachTypes" :value="item.key" :key="item.key">{{ item.value }}</Option>
|
||||
</Select>
|
||||
<Input class="ml10" v-model="gridOption.param.seachOption.value" style="width: 200px" search
|
||||
placeholder="请输入关键字" @on-search="query(1)" />
|
||||
</FormItem>
|
||||
<FormItem label="事件类型">
|
||||
<Select v-model="gridOption.param.seachOption.event_type" style="width: 120px" clearable @on-change="query(1)">
|
||||
<Option value="page_view">页面浏览</Option>
|
||||
<Option value="click">点击</Option>
|
||||
<Option value="search">搜索</Option>
|
||||
<Option value="share">分享</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="primary" @click="query(1)">查询</Button>
|
||||
<Button type="default" @click="resetQuery" class="ml10">重置</Button>
|
||||
<Button type="default" @click="exportCsv">导出</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<tables :columns="listColumns" :value="gridOption.data" :pageOption="gridOption.param.pageOption"
|
||||
@changePage="query"></tables>
|
||||
</div>
|
||||
<editModal ref="editModal" :columns="editColumns" :rules="gridOption.rules"> </editModal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import funTool from '@/libs/funTool'
|
||||
import uiTool from '@/libs/uiTool'
|
||||
import user_trackingServer from '@/api/users/user_tracking_server.js'
|
||||
export default {
|
||||
data() {
|
||||
let rules = {}
|
||||
|
||||
rules["user_id"] = [{ required: true, type: "number", message: '请填写用户ID', trigger: 'change' }];
|
||||
rules["event_type"] = [{ required: true, message: '请填写事件类型' }];
|
||||
rules["event_name"] = [{ required: true, message: '请填写事件名称' }];
|
||||
rules["page_path"] = [{ required: false, message: '请填写页面路径' }];
|
||||
rules["duration"] = [{ required: false, type: "number", message: '请填写停留时长', trigger: 'change' }];
|
||||
|
||||
return {
|
||||
seachTypes: [
|
||||
{ key: 'user_id', value: '用户ID' },
|
||||
{ key: 'event_name', value: '事件名称' },
|
||||
{ key: 'nickname', value: '用户昵称' }
|
||||
],
|
||||
gridOption: {
|
||||
param: {
|
||||
seachOption: {
|
||||
key: 'nickname',
|
||||
value: '',
|
||||
event_type: null
|
||||
},
|
||||
pageOption: {
|
||||
page: 1,
|
||||
pageSize: 20
|
||||
}
|
||||
},
|
||||
data: [],
|
||||
rules: rules
|
||||
},
|
||||
listColumns: [
|
||||
{ title: 'ID', key: 'id', minWidth: 80 },
|
||||
{ title: '用户ID', key: 'user_id', minWidth: 100 },
|
||||
{ title: '用户昵称', key: 'nickname', minWidth: 120 },
|
||||
{ title: '事件类型', key: 'event_type', minWidth: 120 },
|
||||
{ title: '事件名称', key: 'event_name', minWidth: 150 },
|
||||
{ title: '页面路径', key: 'page_path', minWidth: 200 },
|
||||
{ title: '停留时长(秒)', key: 'duration', minWidth: 100 },
|
||||
{ title: 'IP地址', key: 'ip_address', minWidth: 130 },
|
||||
{ title: '创建时间', key: 'create_time', minWidth: 160 },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
type: 'template',
|
||||
render: (h, params) => {
|
||||
let btns = [
|
||||
{
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
click: () => {
|
||||
this.showEditWarp(params.row)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '删除',
|
||||
type: 'error',
|
||||
click: () => {
|
||||
this.delConfirm(params.row)
|
||||
},
|
||||
},
|
||||
]
|
||||
return uiTool.getBtn(h, btns)
|
||||
},
|
||||
}
|
||||
],
|
||||
editColumns: [
|
||||
{ title: '用户ID', key: 'user_id', type: 'number', required: true },
|
||||
{ title: '事件类型', key: 'event_type', type: 'select', required: true, options: [
|
||||
{ value: 'user_soure', label: '用户来源' },
|
||||
{ value: 'page_view', label: '页面访问' },
|
||||
{ value: 'button_click', label: '按钮点击' },
|
||||
{ value: 'api_call', label: '接口调用' },
|
||||
{ value: 'user_action', label: '用户行为' },
|
||||
{ value: 'form_submit', label: '表单提交' },
|
||||
{ value: 'search', label: '搜索' },
|
||||
{ value: 'share', label: '分享' },
|
||||
{ value: 'error', label: '错误' }
|
||||
]},
|
||||
{ title: '事件名称', key: 'event_name', type: 'text', required: true },
|
||||
{ title: '页面路径', key: 'page_path', type: 'text' },
|
||||
{ title: '停留时长(秒)', key: 'duration', type: 'number' },
|
||||
{ title: 'IP地址', key: 'ip_address', type: 'text' },
|
||||
{ title: '用户代理', key: 'user_agent', type: 'textarea' }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.query(1);
|
||||
},
|
||||
methods: {
|
||||
query(page) {
|
||||
this.gridOption.param.pageOption.page = page;
|
||||
user_trackingServer.page(this.gridOption.param).then(res => {
|
||||
this.gridOption.data = res.data.rows;
|
||||
this.gridOption.param.pageOption.total = res.data.count;
|
||||
});
|
||||
},
|
||||
showAddWarp() {
|
||||
this.$refs.editModal.showModal();
|
||||
},
|
||||
showEditWarp(row) {
|
||||
this.$refs.editModal.showModal(row);
|
||||
},
|
||||
delConfirm(row) {
|
||||
uiTool.delConfirm(async () => {
|
||||
await user_trackingServer.del(row)
|
||||
rootVue.$Message.success('删除成功!')
|
||||
this.query(1)
|
||||
})
|
||||
},
|
||||
exportCsv() {
|
||||
user_trackingServer.exportCsv(this.gridOption.param).then(res => {
|
||||
funTool.downloadFile(res, '用户行为追踪.csv');
|
||||
});
|
||||
},
|
||||
resetQuery() {
|
||||
this.gridOption.param.seachOption = {
|
||||
key: 'nickname',
|
||||
value: '',
|
||||
event_type: null
|
||||
};
|
||||
this.query(1);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
seachTypePlaceholder() {
|
||||
const selected = this.seachTypes.find(item => item.key === this.gridOption.param.seachOption.key);
|
||||
return selected ? selected.value : '请选择搜索类型';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user